We want to reuse a custom header between several screens. That's why it's best to create a separate component for it and import it in those screens:
/*** src/components/Header ***/
import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import { Icon, Button } from 'native-base';
import { Platform } from 'react-native';
export default class Header extends React.Component {
render() {
return (
<View style={styles.container}>
{
Platform.OS === 'android' &&
<Button transparent onPress={this.props.onMenuButtonPress}>
<Icon android='md-menu' style={styles.menuIcon}/>
</Button>
}
<Image source={require('../../img/logo.png')}
style={styles.logo} />
{
Platform.OS === 'android' &&
<Button onPress={this.props.onCameraButtonPress} transparent>
<Icon name='camera' style={styles.cameraIcon}/>
</Button>
}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
borderBottomWidth: 1,
borderBottomColor: '#ccc'
},
menuIcon: {
fontSize: 30,
color: 'black'
},
logo: {
height: 25,
resizeMode: 'contain',
margin: 10
},
cameraIcon: {
fontSize: 30,
color: 'black'
}
});We are using the Platform API again to detect Android devices and show a drawer menu button and a camera button only on that platform. We decided to do this to make those features, which are the core of the app, more prominent to Android users by reducing the number of buttons needed to be pressed to reach them. The actions to be performed when pressing the buttons are passed by the parent component through two props:
onMenuButtonPressonCameraButtonPress
Those two props call two separate functions invoking the navigate method of the navigator:
this.props.navigation.navigate('DrawerOpen')this.props.navigation.navigate('Camera')
The last thing to note is how we set up the layout for the container in this component. We use justifyContent: 'space-around', which is the way we tell Flexbox to evenly distribute items in the line with equal space around them. Note that, visually, the spaces aren't equal since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies:
