Access underlying DOM node in react-native-web

Question

When creating a custom component in react-native-web, I'd want to access the underlying DOM node of my View component to add/remove an eventListener.

class MyButton extends React.Component {    
  render() {
    return (
      <View ref={component => this._root = component}>
        <Text>{this.props.label}</Text>
      </View>
    )
  }
}

I'd like to add an eventListener like so:

this._root.dontknowthis.addEventListener('sn:focused', this._componentFocused);

As an alternative solution, I tried rendering a component directly, and then attaching the eventListener:

    <div
      ref={e => (this.el = e)}
      tabIndex="-1"
    >
      <WrappedComponent {...this.props} />
    </div>

In this case I can attach an eventListener:

this.el.addEventListener('sn:focused', this._componentFocused);

This works, but I would also like to set a style on this component, preferably the one passed by props. This does not seem to work as the react-native styles are different from the DOM node styles.

So what's the best solution here? Continue to use the div component and reformat the style somehow, or use a View and somehow access the underlying DOM node to attach the listener?

Access underlying DOM node in react-native-web

0 Answers0