I am currently working on creating a React Native widget. This widget is made up of a single View, and my goal is to match the color of this View with another element on the page that has a specific class.
In a non-native React environment, I would typically achieve this using the following code:
componentDidMount(): void {
const otherElement = document.querySelector(".classOfElementThatIsNotInMyReactNativeWidget") as HTMLElement;
const thisComponent = this.Ref.current // Reference to my widget obtained in the constructor using React.createRef();
thisComponent.style.backgroundColor = otherElement.style.backgroundColor
}
However, in React Native, we don't have access to the document object or the ability to use getElementById.
So my question is, how can I accomplish this task in React Native instead?
(I am new to React Native, so any guidance is appreciated)
It's worth noting that I'm developing a widget for Mendix. This means that I only have direct access to the components within my widget and not the rest of the application. What I aim to do is to somehow "listen" to an external component beyond my widget.