Transparent background for header using createStackNavigator, React Native
Solution:
navigationOptions: {
headerTransparent: {
position: 'absolute',
backgroundColor: 'transparent',
zIndex: 100,
top: 0,
left: 0,
right: 0
}
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;
this worked for me :
navigationOptions: {
...
headerTransparent: true,
headerStyle: {
backgroundColor: 'transparent',
...
}
}
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>
);
};