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

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) => ,
    headerStyle: { height: 68, backgroundColor: "transparent", color: colors.white },
    headerTitle: "Sign Up",
    headerTitleStyle: { color: colors.white, fontSize: 18 },
    headerLeft: (
      
        
      
    ),
  };
};