React Native Error: undefined is not an object (evaluating '_this._root.setNativeProps') - react-native

Question

I'm trying to create custom button. For this, I wrapped my existed view into TouchableHighlight (write me please another way, if it's not suitable here)
<TouchableHighlight onPress={this.freeTimeTapped} underlayColor="white">
<LabelsView data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
</TouchableHighlight>
This code throws an error touchable child must either be native, described here, for example. So, I added
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
error disappeared, but now I receive an error
React Native Error: undefined is not an object (evaluating
'_this._root.setNativeProps')
after touch. What am I doing wrong?
More code about LabelsView:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}

Answer 1

I created the same sitaution as yours and found that the only thing you are doing wrong is you are wrapping a class inside the TouchableHighlight . If you want to wrap it in any touchable component then react native needs the native child, So to resolves this change your code as follows:-
<LabelsView freeTimeTapped={this.freeTimeTapped} data={this.freeTimeData}
containerStyle={{ backgroundColor: '#3A65FF' }} />
and your LabelsView class as follows:-
render() {
return (
<TouchableHighlight onPress={this.props.freeTimeTapped} underlayColor="white">
<View style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
</TouchableHighlight>
);
}
If you still hava any problem then let me know :)
In case you want to have it in parent, just fix your code to this:
export default class LabelsView extends Component {
// Make TouchableHighlight wrapper work
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
}
render() {
return (
<View ref={component => this._root = component} style={[styles.container, this.props.containerStyle]}>
<View style={styles.leftContainer}>
<Text style={[styles.nameText, styles.textColor]}> {this.props.data.leftText} </Text>
</View>
<View style={styles.rightContainer}>
<Text style={[styles.durationText, styles.textColor]}> {this.props.data.rightTopText + ' hrs'} </Text>
<Text style={[styles.rangeText, styles.textColor]}> {this.props.data.rightBottomText} </Text>
</View>
</View>
);
}
}
You missed ref={component => this._root = component}