Error: Invariant Violation: Touchable child must either be native or forward setNativeProps to a native component stack

Question

I'm having hard time to cope up with this error.

I don't understand why ? I have a child component that is not using custom component. I wrapped the Text or Image or Icon in a View component and then wrapped them in TouchableHighlight still getting the error on a particular page but not on other pages which are doing the same thing.

    <TouchableHighlight
      onPress={this.changeTo} style={PictureStyles.btnClickContain}
      underlayColor='#042417'>
      <View
        style={PictureStyles.btnContainer}>
        <Icon
          name='fontawesome|calendar'
          size={25}
          color='#042'
          style={PictureStyles.btnIcon}/>
        <Text style={PictureStyles.btnText}>Book</Text>
      </View>
    </TouchableHighlight>

Answer 1

I was able to fix a similar error in my app by following the instructions in the docs about Composite components and setNativeProps to forward setNativeProps to a child. From the docs:

All we need to do is provide a setNativeProps method on our component that calls setNativeProps on the appropriate child with the given arguments.

Below is your code updated with the same changes the worked for me. I was also using react-native-icons as it looks like you are too.

The only changes are the setNativeProps method and creating a ref on the View using the ref callback syntax

var MyComponent = React.createClass({
  setNativeProps (nativeProps) {
    this._root.setNativeProps(nativeProps);
  }

  render () {
    return (
      <TouchableHighlight
        onPress={this.changeTo} style={PictureStyles.btnClickContain}
        underlayColor='#042417'>
        <View
          ref={component => this._root = component}
          style={PictureStyles.btnContainer}>
          <Icon
            name='fontawesome|calendar'
            size={25}
            color='#042'
            style={PictureStyles.btnIcon}/>
          <Text style={PictureStyles.btnText}>Book</Text>
        </View>
      </TouchableHighlight>
    );
  }
})