In the previous sample we built a simple application that has DrawerNavigation. Lets build more on that. In this sample we build a similar DrawerNavigatoer that has a custom list, formatted by our choice
To start, lets have a simple DrawerNavigator, like the following
This code is very familiar to us, mostly. What's new though is 'contentComponent'. We have introduced a new component 'Drawer'. That's what is displayed when drawer, opens. What gets displayed in Drawer is left to us. When a user taps on an item in drawer, we need to navigate to respective view. We need navigator object for that. We pass navigator as an attribute to Drawer. We will talk about drawerProps a little later. We have enough to look into Drawer code
drawer.js
As you see, the code is very simple. Its a basic component that have a scrollview with a list of controls. Simple, right?. All that happens here is we have a bunch of TouchableHighlight controls, when tapped on it, we navigate to respective views.
Our next step is to make this list more dynamic. That's for the next BLOG. If you are interested to try the entire sample, feel free to visit this code here
To start, lets have a simple DrawerNavigator, like the following
export const MainNavigator = DrawerNavigator({
Home: {
screen: StackNavigator({
Home: {
screen: Home,
navigationOptions:{
title:'Home',
}
},
})
},
Search: {
screen: StackNavigator({
Search: {
screen: Search,
navigationOptions:{
title:'Search',
}
},
Result: {
screen: Result,
navigationOptions:{
title:'Result',
}
}
})
},
Saved: {
screen: StackNavigator({
SavedStack: {
screen: SavedWord,
navigationOptions:{
title:'Saved Word',
}
}
})
},
About: {
screen: StackNavigator({
AboutStack: {
screen: About,
navigationOptions:{
title:'About',
}
}
})
},
},{
contentComponent: props => (<Drawer navigation={props.navigation} drawerProps={{...props}} />),
});
This code is very familiar to us, mostly. What's new though is 'contentComponent'. We have introduced a new component 'Drawer'. That's what is displayed when drawer, opens. What gets displayed in Drawer is left to us. When a user taps on an item in drawer, we need to navigate to respective view. We need navigator object for that. We pass navigator as an attribute to Drawer. We will talk about drawerProps a little later. We have enough to look into Drawer code
drawer.js
export default class Drawer extends Component {
render() {
return (
<ScrollView style={{flex: 1, marginTop:50, marginLeft:10, marginRight: 20,}}>
<TouchableHighlight style={styles.lineItem} onPress={() => this.props.navigation.navigate('Home')}>
<Text style={styles.lineItemText}>Home</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.lineItem} onPress={() => this.props.navigation.navigate('Search')}>
<Text style={styles.lineItemText}>Search</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.lineItem} onPress={() => this.props.navigation.navigate('Saved')} >
<Text style={styles.lineItemText}>Saved</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.lineItem} onPress={() => this.props.navigation.navigate('About')} >
<Text style={styles.lineItemText}>About</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.lineItem} onPress={() => this.props.navigation.navigate('PreAuthStack')} >
<Text style={styles.lineItemText}>LogOff</Text>
</TouchableHighlight>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
lineItem: {
borderBottomColor: 'lightgray',
borderWidth: 1,
borderTopWidth:0,
borderLeftWidth:0,
borderRightWidth:0,
},
lineItemText: {
fontSize: 20,
fontWeight: '200',
textAlign: 'center',
margin: 10,
},
});
Our next step is to make this list more dynamic. That's for the next BLOG. If you are interested to try the entire sample, feel free to visit this code here
