title: React Navigation - Gradient color for Header
body: <p>I am using React Navigation in React Native app and I want to change the <code>backgroundColor</code> for the header to be gradient and I found out there is a node module : <code>react-native-linear-gradient</code> to achieve gradient in react native.</p>
  <p>I have Root <strong>StackNavigator</strong> like that :</p>
  <pre><code>const Router = StackNavigator({
  
  Login: {
      screen: Login,
      navigationOptions: ({navigation}) =&gt; ({
         headerTitle: &lt;Text&gt;SomeTitle&lt;/Text&gt;
         headerLeft: &lt;SearchAndAgent /&gt;,
         headerRight: &lt;TouchableOpacity
          onPress={() =&gt; { null }
      &lt;/TouchableOpacity&gt;,
      headerStyle: { backgroundColor: '#005D97' },
      }),
  },
  });
  </code></pre>
  <p>I can wrap <code>Text</code> or <code>View</code> to be gradient like that :</p>
  <pre><code>&lt;LinearGradient colors={['#3076A7', '#19398A']}&gt;&lt;Text style={styles.title}&gt;{title}&lt;/Text&gt;&lt;/LinearGradient&gt;,
  </code></pre>
  <p>How can I wrap the header background in the <code>navigationOptions</code> to use
  the the <code>LinearGradient</code> module?</p>
  <p>I know that I can create a custom header component and use it but when I am doing it all the native navigation animations from React Navigation not working like the Title Animation between two Routes so its not helping me.</p>
  <p>Thanks for helping !</p>