could you somebody help me with header bar in react-navigatin v6. My motivation was that I need add image strip like divider instead of default divider under header bar:
I want to create own headerbar so I created Navigator:
<Stack.Navigator
initialRouteName="NoConnectionContent"
screenOptions={{
header: (props) => <Header {...props} />,
headerStyle: {
backgroundColor: 'white',
},
}}>
<Stack.Screen
name="NoConnectionContent"
component={NoConnectionContent}
options={{title: <Text>No connection</Text>}}
/>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
And I created own component Header:
import React, {Component} from 'react';
import {View, StyleSheet, Image} from 'react-native';
import Config from 'react-native-config';
import { Header as RNNHeader, getHeaderTitle} from '@react-navigation/elements';
const Header = (props) => {
let headerStripSource =
Config.ENV === 'dev'
? require('../../assets/images/devhead.jpg')
: require('../../assets/images/prodhead.jpg');
const title = getHeaderTitle(props.options, props.route.name);
return (
<View>
<RNNHeader {...props} title={title} />
<Image source={headerStripSource} style={styles.headStripImageStyle}/>
</View>
);
};
const styles = StyleSheet.create({
headStripImageStyle: {
position: 'absolute',
bottom: -12,
resizeMode: 'stretch',
height: 10,
width: '100%',
marginBottom: 8,
},
});
It works but I have to set manually back button, title, etc... but I want to pass properties automatically to header like:
<RNNHeader {...props} />
It was working in react-navigation in version 5 but in version 6 doesn't work because Header is in @react-navigation/elements.
Do you somebody way how to do it.
Thank so much.