React Navigation - Gradient color for Header

Question

I am using React Navigation in React Native app and I want to change the backgroundColor for the header to be gradient and I found out there is a node module :

Answer 1

Similar to this issue: React Navigation; use image in header?

For a Linear Gradient you would simply do >

//imports

import { Image, StyleSheet, View } from 'react-native';
import { Header } from 'react-navigation' ;
import LinearGradient from 'react-native-linear-gradient';

//header

Create the Header component which is wrapped in the Linear Gradient. by making the header backgroundColor: 'transparent' you will then show the Linear Gradient wrapping it.

const GradientHeader = props => (
  
    
    

  
);

Return the screen with the header being your GradientHeader component.

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
}, {
  navigationOptions: {
    headerTitleStyle: { color: '#fff' },
    header: (props) => ,
  }
});

Should look something like this with the above code.

Gradient Header