How can we create Side Tabs in React Native - reactjs

Question

Creating Side Menu in React Application.
This would work both with Expo and react

Answer 1

Create a Navigation Service(Navigation-service.ts)
import { NavigationActions } from 'react-navigation';
function navigate(routeName: any, params?: any) {
NavigationActions.navigate({
routeName,
params
});
setRoute(routeName);
}
export default {
navigate
}
After this
create a new file sidemnu.tsx
import NavigationService from Navigation-service.ts;
import { View, TouchableHighlight, Image } from 'react-native';
openHome() {
NavigationService.navigate('Home');
}
render(){
return (
<View style={[this.props.isLoggedIn ? styles.container : styles.containerHidden]}>
<View style={[this.props.isLoggedIn ? styles.tabContainer : styles.tabContainerHidden]}>
<View>
<TouchableHighlight
style={this.props.currentTab === 'Home' ? styles.activeTab : styles.menuBtnContainer}
onPress={() => this.openHome()}
disabled={!this.props.isLoggedIn}
underlayColor='red'
>
<Image
source='any image url'
/>
</TouchableHighlight>
</View>
</View>
</View>
);
}
Add style
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
width: 108,
backgroundColor: '#002A5C',
borderTopColor: '#002457',
borderWidth: 1
},
containerHidden: {
width: 108,
backgroundColor: '#002A5C'
},
tabContainer: {
flex: 1,
flexDirection: 'column'
},
tabContainerHidden: {
flex: 1,
display: 'none'
},
activeTab: {
backgroundColor: '#008cc3',
height: 108,
width: 108,
padding: 10,
alignSelf: 'center',
justifyContent: 'center'
},
menuBtnContainer: {
height: 80,
width: 80,
alignSelf: 'center',
justifyContent: 'center'
},
});
Call in app.tsx file
<Sidemnu />
Whenever you want to display this side menu.
If you have any queries, please write back.