Bokerjy Zahgan Bokerjy Zahgan - 3 days ago 9
React JSX Question

Hide / show in react -native on press

i have tool bar in react-native , like this

enter image description here

when click in search icon , i need to open input text like this

enter image description here

i tried many example for this , but i cannot apply anyone for my case , any help ???

this is my code :

constructor(props, context) {
super(props, context);
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
this.state = {
visible: false,
selectedTab: 'view1',

ds:[{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"},{CustomerName: "Customer Name", CustomerPhone: "+564659878964"}],
dataSource:ds,
}


}
<TouchableHighlight
onPress={()=>this.toggleStatus()}>
<Image style={styles.imagestyle}
source={require('./ic_search.png')} />
</TouchableHighlight>
<Text style={styles.toolbarTitle}>CUSTOMERS</Text>
<TouchableHighlight onPress={() => this.moveToAddNewCustomer()}>
<Image style={styles.imagestyle}
visible={this.state.visible}

source={require('./ic_action_name.png')} />
</TouchableHighlight>


</View>


how i can hide the title and open input text ???

Answer

If the navigation bar has access to the visible state, then you should be able to just use an if statement to determine which to show

if (this.state.visible) {
  return (
    <SearchBar />
  )
} else {
  return (
    <Title />
  )
}
Comments