title: React Native searchbar with react-navigation
body: <p>I would like to add a searchbar in my header. I am using react-navigation, and want to create an effect like in the below 2 pictures. When you press the search icon, the hamburger icon becomes a arrow-back icon, the header title becomes a search field. I have tried to accomplish this with the navigationOptions but the problem is that it is static and it cannot be updated when an action happens on the header itself. So for experimenting what I want to accomplish is that when the search icon is pressed, the hamburger icon becomes a arrow-back icon. Thank you!</p>
  
  <pre><code>var search = false;
  
  const menuButton = navData =&gt; (
      &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
          &lt;Item 
              title="Menu"
              iconName="ios-menu"
              onPress={() =&gt; {
                  navData.navigation.toggleDrawer();
              }}
          /&gt;
      &lt;/HeaderButtons&gt;
  );
  
  const goBackButton = navData =&gt; (
      &lt;HeaderButtons HeaderButtonComponent={HeaderButton}&gt;
          &lt;Item 
              title="Menu"
              iconName="ios-arrow-back"
              onPress={() =&gt; {
                  search=false
              }}
          /&gt;
      &lt;/HeaderButtons&gt;
  );
  
  MyScreen.navigationOptions = navData =&gt; {
      return {
          headerTitle: 'My title',
          headerLeft: search ? goBackButton : menuButton(navData),
          headerRight: (
              &lt;BorderlessButton
              onPress={() =&gt; search=true}
              style={{ marginRight: 15 }}&gt;
              &lt;Ionicons
                  name="md-search"
                  size={Platform.OS === 'ios' ? 22 : 25}
              /&gt;
              &lt;/BorderlessButton&gt;
          )
      }
  }; 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pCpyH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pCpyH.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/wZWNX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZWNX.png" alt="enter image description here"></a></p>