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