Transparent background for header using createStackNavigator, React Native

Question

I created a project using CRNA that uses React-Navigation. In one of the screen I have a background image that cover the entire screen and I want to including the header.

Like this image :

Should I just hide the header and use a View that contains the element that I want? If yes will this cause any trouble in case of deep linking?

Solution

React Navigation offers a cool props called headerTransparent that can be used in order to render something under the header.

So the code at the should look like this :

static navigationOptions = {     headerTransparent: true   } 

Answer 1

Right now with React Navigation 5 we can do something like this:

{     headerShown: true,     headerTransparent: true, } 

For example:

const Screen = ({ navigation }) => {   navigation.setOptions({     headerShown: true,     headerTransparent: true,   });    return (     <View>       <Text>Render your component</Text>     </View>   ); };