Transparent background for header using createStackNavigator, React Native - 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>
);
};

Answer 2

this worked for me :
navigationOptions: {
...
headerTransparent: true,
headerStyle: {
backgroundColor: 'transparent',
...
}
}

Answer 3

To achieve this effect you need to follow those steps:
Change the style of the navigation header with absolute position, transparent background and no border.
Use ImageBackground component as parent component for your screen with the image that you want to use as background.
Add padding top to this ImageBackground to fix the overlapping.
So your code should looks something similar to this:
import React, {Component} from 'react';
import {
StyleSheet,
Button,
ImageBackground,
Platform,
} from 'react-native';
import {
createStackNavigator,
} from 'react-navigation';
class HomeScreen extends Component {
render() {
return (
<ImageBackground
style={styles.container}
source={require('./images/bg.png')}
>
<Button
onPress={() => {}}
title="Just a button"
/>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: Platform.OS === 'ios' ? 60 : 80,
}
});
const App = createStackNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
title: 'Home',
headerStyle: {
position: 'absolute',
backgroundColor: 'transparent',
zIndex: 100,
top: 0,
left: 0,
right: 0,
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
},
}
})
export default App;

Answer 4

Solution:
navigationOptions: {
headerTransparent: {
position: 'absolute',
backgroundColor: 'transparent',
zIndex: 100,
top: 0,
left: 0,
right: 0
}

Answer 5

If using React Navigation 6.x, the option is the same headerTransparent:
<Stack.Screen
name="BottomTab"
component={BottomTabNavigator}
options={{
headerTransparent: true,
}}
/>

Answer 6

You need to use headerTransparent and headerShadowVisible otherwise if you just use headerTransparent a shadow will be left. This works with React Navigation 6.x. See de docs here https://reactnavigation.org/docs/native-stack-navigator/#headershadowvisible
<Stack.Screen name='Main' component={Main}
options={{
title: 'MainPage',
headerTransparent: true,
headerShadowVisible: false
}}
/>

Answer 7

I have achieved it setting the navigation options like this:
BirdDetails.navigationOptions = () => {
return {
...NavStyle,
headerStyle: {
backgroundColor: 'transparent',
},
headerTransparent: {
position: 'absolute',
},
headerLeft: <Back></Back>,
headerRight: <HeaderDetailsRight></HeaderDetailsRight>,
};
};

Answer 8

With V5
<NavigationContainer>
<Stack.Navigator
initialRouteName="Home"
screenOptions={{
headerShown: true,
headerTransparent:true
}}
>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Detail" component={DetailScreen}/>
<Stack.Screen name="Setting" component={SettingScreen}/>
</Stack.Navigator>
</NavigationContainer>

Answer 9

this worked for me:
headerStyle: {elevation:0, backgroundColor:"transparent"}
set elevation to 0 so there is no shadow.

Answer 10

I did it this way, it has one flaw though, in the the background color must be hard-coded. This approach is specifically for ScrollView and starts out transparent becoming opaque (keeping the original text).
Since this was designed for native stack navigator to leverage iOS' large text the headerHeight also needs to be adjusted to the proper values.
const navigation = useNavigation();
return (
<ScrollView
onLayout={(e) => {
navigation.setOptions({
headerStyle: {
backgroundColor: "transparent",
},
});
}}
onScroll={(e) => {
const headerOpacity =
Math.min(
Math.max(e.nativeEvent.contentOffset.y, 0) / headerHeight,
1.0
) ?? 0.0;
navigation.setOptions({
headerStyle: {
elevation: headerOpacity,
backgroundColor: `rgba(255,0,0,${headerOpacity})`,
},
});
}}
scrollEventThrottle={16}
contentInsetAdjustmentBehavior="never"
>