0

I am developing a React native widget. It consists of a single View and I want to give this View the same color as another element on the page with a specific class.

In React (no native) I would do this as follows:

componentDidMount(): void {
  const otherElement = document.querySelector(".classOfElementThatIsNotInMyReactNativeWidget") as HTMLElement;
  const thisComponent = this.Ref.current   // I am getting the reference to my widget in the constructor using React.createRef();
  thisComponent.style.backgroundColor = otherElement.style.backgroundColor
}

In React native, we do not have a document and cannot do getElementById.

So how can I do this, instead?

(yes, I am new to React native)

Note: The tricky thing is that I am developing a widget for Mendix. Consequently, I don't have direct access to the rest of the app, only to the components in my widget. What I want to do is to "listen" to another component that is outside of my widget.

MWB
  • 1,830
  • 1
  • 17
  • 38
  • As you said, there is no DOM to select from. If you don't have a way to pass the color information to your widget then I think there is unfortunately no solution for you. – Krismu Sep 24 '21 at 14:39

1 Answers1

0

I suggest you create one global file, name it theme.js. Add all the global styles values, I mean the values that you use multiple times in your components.

Sample theme.js :

const theme = {
  primary: "rgba(255, 255, 0, 1)",
  error: "rgba(0, 255, 0, 1)",
  // other colors
}

export default theme;

Now, you can use these colors in your other components like this :

import theme from '../../your-theme-file-path/theme.js;

const CustomComponent = () => (
  <View style={{ backgroundColor: theme.primary }}>
    <Text>Test</Text>
  </View>
)
Kishan Bharda
  • 5,446
  • 3
  • 30
  • 57
  • The tricky thing is that I am developing a widget for Mendix. Consequently, I don't have direct access to the rest of the app, only to the components in my widget. That is what I mean with "outside react native component" – MWB Sep 24 '21 at 14:06