title: React Native - Animate width shrink
body: <p>In the header of my React Native app, I have a conditional icon and a <a href="https://react-native-training.github.io/react-native-elements/docs/searchbar.html" rel="noreferrer">Searchbar</a>. </p>
  
  <pre><code>static navigationOptions = ({ navigation }) =&gt; {
  const { params = {} } = navigation.state;
  return {
    headerTitle: (
      &lt;View
        style={{
          flex: 1,
          backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
          alignItems: 'center',
          flexDirection: 'row',
          paddingHorizontal: 10,
          height: StatusBar.currentHeight,
        }}&gt;
        {params.isIconTriggered &amp;&amp; &lt;Icon name="chevron-left" size={28} /&gt;}
        &lt;SearchBar
          round
          platform={'default'}
          placeholder="Search"
          containerStyle={{
            flex: 1,
            backgroundColor: 'transparent',
          }}
        /&gt;
      &lt;/View&gt;
    ),
    headerStyle: {
      backgroundColor: '#e54b4d',
    },
  };
  };
  </code></pre>
  
  <p>Normally the Searchbar will take the full width of the header which is what I want. If the condition <code>isIconTriggered</code> is true, an icon will appear in front of the Searchbar and the width of the SearchBar will shrink enough so that the icon is visible next to it. </p>
  
  <p>However, there is no transition or animation when this happens and it does not feel nor look nice. I would like to add an animation to the Searchbar so the width shrinks gradually and smoothly when the condition is triggered and the icon appears.</p>
  
  <p>Is that possible to achieve and how can I achieve this?</p>