How to target a dom element outside react native component

Question

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.

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
– Krismu, Commented Sep 24, 2021 at 14:39

Kishan Bharda · Accepted Answer · 2021-09-24 14:00:40Z

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>
)

answered Sep 24, 2021 at 14:00

Kishan Bharda

5,7314 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MWB Over a year ago

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"

Collectives™ on Stack Overflow

How to target a dom element outside react native component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related