React Navigation - Gradient color for Header

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 => (
  <View style={{ backgroundColor: '#eee' }}>
    <LinearGradient
      colors={['#00a8c3', '#00373f']}
      style={[StyleSheet.absoluteFill, styles.linearGradient]}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

Return the screen with the header being your GradientHeader component.

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

Should look something like this with the above code.

Gradient Header

The solution of Mark P was right but now you need to define headerStyle and do the absolute positioning there:

navigationOptions: {
  header: props => <GradientHeader {...props} />,
  headerStyle: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
},

and the GradientHeader:

const GradientHeader = props => (
<View style={{ backgroundColor: '#eee' }}>
    <LinearGradient
      colors={['red', 'blue']}
      style={[StyleSheet.absoluteFill, { height: Header.HEIGHT }]}
    >
      <Header {...props} />
    </LinearGradient>
  </View>
)

Just for your information, now with headerBackground props it's a way easier.

You can have a gradient header just doing this :

navigationOptions: {
  headerBackground: (
    <LinearGradient
      colors={['#a13388', '#10356c']}
      style={{ flex: 1 }}
      start={{x: 0, y: 0}}
      end={{x: 1, y: 0}}
    />
  ),
  headerTitleStyle: { color: '#fff' },
}

This solution works good even with SafeArea for IosX