React Navigation; use image in header?
According to the official docs of react-navigation v5, it can be implemented as follows:
https://reactnavigation.org/docs/headers/#replacing-the-title-with-a-custom-component
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
// title: 'App Name'
options={{
headerTitle: (props) => ( // App Logo
<Image
style={{ width: 200, height: 50 }}
source={require('../assets/images/app-logo-1.png')}
resizeMode='contain'
/>
),
headerTitleStyle: { flex: 1, textAlign: 'center' },
}}
/>
</Stack.Navigator>
Update for React Navigation v5! (making this post for future references)
For react navigation 5, I found this solution.
In StackNavigator.js class you can set a different image for each page (Stack.Screen):
<Stack.Screen
name='Home'
component={HomeScreen}
options={{
title: <Image style={{ width: 250, height: 50 }}
source = require('../images/yourimage.png')}/>
}}
/>
Then, you must adjust width, height, and position of the image, but it works! I think it's the simpliest way. Here's the output (yes, it's my image, before adjustments).
Don't forget to import Image!
import { Image } from 'react-native'
Update:
Since v2 of the library there's an special option for setting the header background, namely headerBackground
.
This option accepts a React component, so when set to an Image
component, it will use that.
For example:
export default createStackNavigator({
Home: {
screen: HomeScreen
},
}, {
navigationOptions: {
headerBackground: () => (
<Image
style={StyleSheet.absoluteFill}
source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
/>
),
}
});
Working example: https://snack.expo.io/@koen/react-navigation-header-background
Old answer, for when still using React Navigation v1:
Creating a custom header with an image is actually really simple.
By wrapping the Header with a view and placing an absolute positioned image in that view, the image will scale to its parent size.
Important is to set the backgroundColor
of the default header to transparent
.
const ImageHeader = props => (
<View style={{ backgroundColor: '#eee' }}>
<Image
style={StyleSheet.absoluteFill}
source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
/>
<Header {...props} style={{ backgroundColor: 'transparent' }}/>
</View>
);
And then use that component as header:
const SimpleStack = StackNavigator({
Home: {
screen: MyHomeScreen,
},
}, {
navigationOptions: {
headerTitleStyle: { color: '#fff' },
header: (props) => <ImageHeader {...props} />,
}
});
Which would result in: