React Navigation - Gradient color for Header

user_5726764 0
Viewed 18002

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 !

node-modules react-navigation react-native reactjs javascript
4 Answers

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

user_39301930

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>
    ),
  };
};
user_81794280
Related