Hide / show in react -native on press

Question

i have tool bar in react-native , like this

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

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 1

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 />
  )
}