How can I export and import a static in a component in React Native? - static

Question

I'm really new in this ReactJS/React Native thing and found something I just don't understand.
I'm creating static in every screen with the header, which can be different from a screen to another. So for example, my Home looks like this:
static navigationOptions = {
headerTitle: () => <HeaderLogo />,
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#DA1A31",
elevation: 0,
shadowOpacity: 0,
height: 60
},
headerLeft: (
<TouchableOpacity>
<Image
source={require('../assets/chevronback.png')}
style={{marginHorizontal: 20}}
size={15}
/>
</TouchableOpacity>
),
headerRight: (
<Image
source={require('../assets/menu.png')}
style={{marginHorizontal: 15}}
size={20}
/>
),
};
render() {
return (
///etc
But when I put my home element in App.js, the header is not there:
export default class App extends React.Component {
render() {
return (
<Home/>
)
}
What can I do for the header to show in my home screen? Is there something I am missing?
Thanks

Answer 1

Rather than relying on the react navigation header, i woud suggest to make your own custom header , which would be global component and you can import it in every screen which would act as a header and pass title of screen for the header .
First ive creater a header.js class component :
export default class Header extends Component {
constructor(props){
super(props);
this.state = {
}
}
render(){
return(
<View style={{flexDirection:'row' , paddingBottom :hp("3.125%") , justifyContent:'space-between'}}>
<View style={{opacity:0}}>
<Image source={require('../assets/images/crossIcon.png')} />
</View>
<View >
<Text style={headerStyles.headerText}>{this.props.title}</Text>
</View>
<View style={{left:-20}}>
<TouchableOpacity style={headerStyles.imageView} onPress={() => this.props.navigation.goBack()}>
<Image style={{height:15,width:15}} source={require('../assets/images/crossIcon.png')} />
</TouchableOpacity>
</View>
</View>
)
}
}
then suppose in my Home.js ive imported the header class and passed the title an navigatiobn props to it :
import Header from '../components/Header';
class Home extends React.Component {
constructor(props){
super(props);
}
render(){
return(
<View>
<Header title="Home page" navigation={this.props.navigation}/>
</View>
)
}
}
Hope it helps feel free for doubts.