Hide/Show components in react native

Question

I'm really new to React Native and I'm wondering how can I hide/show a component.
Here's my test case:

<TextInput     onFocus={this.showCancel()}     onChangeText={(text) => this.doSearch({input: text})} />  <TouchableHighlight      onPress={this.hideCancel()}>     <View>         <Text style={styles.cancelButtonText}>Cancel</Text>     </View> </TouchableHighlight> 

I have a TextInput component, what I want is to show the TouchableHighlight when the input gets the focus, then hide the TouchableHighlight when the user press the cancel button.

I don´t know how to "access" the TouchableHighlight component in order to hide/show it inside of my functions showCancel/hideCancel.
Also, how can I hide the button from the very beginning?

Answer 1

In your render function:

{ this.state.showTheThing &&    <TextInput/> } 

Then just do:

this.setState({showTheThing: true})  // to show it   this.setState({showTheThing: false}) // to hide it