React-native-router-flux: Search field inside navigation?

[liesislukas]

Best behaviour would be:

1. click on right icon, which is search button
2. search field expands and focuses

all in navigation bar

I'm planning to make my own navigation component for search view to handle this, but i think many applications would benefit from some simple search handler

[YuriyUlantsev]

@liesislukas This specific functionality can be implemented using RenderTitle func.

[liesislukas]

ok, thanks will play with it

[infacq]

do you build your own component?

[liesislukas]

I've done new view for search and when click on search icon from navigation it just changes scene to search and when clicking X to close search, it replaces scene back to position.

[plraphael]

@liesislukas could you be more specific? I did not understand what you did...if you could provide some example code would be great.

Thanks,

Pedro.

[liesislukas]

it just navigates to another view where is no navigation at all and instead of it search field with X icon next to input field, on click X it navigates back. Check out gmail app for android, can't check ios version now, but i think it's same for both OS and click search icon.

[marcelmfa]

@liesislukas could you share your code, please?

[liesislukas]

@marcelmfa sorry but this issue is way too old. That code would be out of date anyway. Almost full year passed, many updates pushed to react native and router during that time.

[marcelmfa]

The docs probably are outdated. I tried that solution, but didn't work. I found a solution in stackoverflow, if I remember well. Below have my code that works in this last version:
<Scene key="drawer" drawer contentComponent={SideBar} hideNavBar> <Scene key="main"> <Scene key="showInbox" component={Main} title="System's name" initial/> </Scene> </Scene>
I didn't know if it's right way, but it works.

[munkhorgil]

I made this way, unfortunately, it can't work as expected. Every time I write on Text Input it clears automatically.

renderTitle = () => {
    return (
      <View style={styles.searchContainer}>
        {
          this.state.toggleSearch
          ? <TextInput
              style={styles.inputStyle}
              placeholder="Search"
              value={this.state.searchValue}
              onChangeText={searchValue => this.onSearch(searchValue)}
            />
          : <Text style={styles.titleNavbar}>CONTACT</Text>
        }
      </View>
    );
  }

Any solutions?

[lewyuburi]

@munkhorgil you need to update the state this.state.searchValue, something like this:

renderTitle = () => {
    return (
      <View style={styles.searchContainer}>
        {
          this.state.toggleSearch
          ? <TextInput
              style={styles.inputStyle}
              placeholder="Search"
              value={this.state.searchValue}
              onChangeText={searchValue => this.onSearch(searchValue)}
            />
          : <Text style={styles.titleNavbar}>CONTACT</Text>
        }
      </View>
    );
  }

...

onSearch(searchValue) {
  this.setState({ searchValue });
  ...andTheRestOfMethodCode
}

[munkhorgil]

@lewis-yuburi Of course it updates, I think the problem is it re-renders TextInput.