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 : react-native-linear-gradient to achieve gradient in react native.

I have Root StackNavigator like that :

const Router = StackNavigator({

Login: {
    screen: Login,
    navigationOptions: ({navigation}) => ({
       headerTitle: <Text>SomeTitle</Text>
       headerLeft: <SearchAndAgent />,
       headerRight: <TouchableOpacity
        onPress={() => { null }
    </TouchableOpacity>,
    headerStyle: { backgroundColor: '#005D97' },
    }),
},
});

I can wrap Text or View to be gradient like that :

<LinearGradient colors={['#3076A7', '#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,

How can I wrap the header background in the navigationOptions to use the the LinearGradient module?

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.

Thanks for helping !

Muaz · Accepted Answer · 2019-05-08 10:17:33Z

47

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

edited May 8, 2019 at 10:17

Muaz

1424 silver badges13 bronze badges

answered May 2, 2018 at 21:44

Steeve Pitis

4,4631 gold badge24 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pmont Over a year ago

Thanks, this is indeed much easier using react-navigation 2.x

Alfred Alfizo Mosima Over a year ago

Nice one very easy

Jobeso · Accepted Answer · 2018-03-03 22:55:54Z

7

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>
)

answered Mar 3, 2018 at 22:55

Jobeso

7631 gold badge10 silver badges12 bronze badges

3 Comments

user9578753 Over a year ago

When I implement this, I keep having a probleme , the red screen saying that : TypeError : undefined is not a object (evaluation 'this.props.scene.index') this errir is located at : in Header (at withOrientation.js 30)... ...... ...... Please help me, my react version is 0,55, is this the issue ?

Jobeso Over a year ago

@G.Adnane This is probably because you are using the latest version of react navigation (v2). They changed a lot in the navigator components there.

user9578753 Over a year ago

any idea how to implements it ?! And thank you by the way

Mark P · Accepted Answer · 2017-09-15 03:30:21Z

5

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

answered Sep 15, 2017 at 3:30

Mark P

631 silver badge6 bronze badges

1 Comment

Juan Jimenez Over a year ago

This will work as long as you give it a height to both the <Header> and <LinearGradient> components

Gapur Kassym · Accepted Answer · 2019-01-30 05:46:25Z

You can use LinearGradient component from the expo. It is a useful component and you can't install another library like react-native-linear-gradient. https://docs.expo.io/versions/latest/sdk/linear-gradient/. By the way, you can change the back button. It is easy.

You can implement it on inside screen with navigationOptions like that

static navigationOptions = ({ navigation }: any) => {
  const onGoBack = () => navigation.goBack();
  return {
    header: (props: any) => <GradientHeader {...props} />,
    headerStyle: { height: 68, backgroundColor: "transparent", color: colors.white },
    headerTitle: "Sign Up",
    headerTitleStyle: { color: colors.white, fontSize: 18 },
    headerLeft: (
      <TouchableOpacity style={{ width: 32, height: 32, paddingLeft: 8 }} onPress={onGoBack}>
        <Image source={images.back} resizeMode="center" style={{ width: 32, height: 32 }} />
      </TouchableOpacity>
    ),
  };
};

Collectives™ on Stack Overflow

React Navigation - Gradient color for Header

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related