Bottom navigation in react native - reactjs

Question

here is image
can we make this kind of bottom navigation in react native specially the shape on navigation? can I make this kind of bottom navigation specially the wave on it

Answer 1

You can make your custom bottom bar
Working example: https://snack.expo.io/#msbot01/happy-waffle
(You can adjust code as per required UI)
Example code
import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome5';
import Dashboard from './Dashboard';
import Gift from './Gift';
import Like from './Like';
var width = Dimensions.get('window').width
var tabs = [
{
key: 'home',
icon: 'home',
label: 'Home',
barColor: '#388E3C',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 0
},
{
key: 'heart',
icon: 'calendar-check',
label: 'Heart',
barColor: '#B71C1C',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 2
},
{
key: 'location',
icon: 'users',
label: 'Location',
barColor: '#E64A19',
pressColor: 'rgba(255, 255, 255, 0.16)',
badgeCount: 2
}
]
export default class SupervisorDashboard extends Component<Props> {
constructor(props) {
super(props);
this.state = {
userData: global.userData,
selectedTab: 'home',
}
}
componentDidMount(){
}
dateSelected(e){
this.setState({
selectedDate: e
})
}
homePressed(){
console.log('Home____')
this.setState({
selectedTab: 'home'
})
}
heartPressed(){
console.log('heart____')
this.setState({
selectedTab: 'heart'
})
}
locationPressed(){
console.log('Location____')
this.setState({
selectedTab: 'location'
})
}
renderScene(){
switch(this.state.selectedTab) {
case ('home'):{
return <Dashboard/>
}
break;
case ('heart'):{
return <Like/>
}
break;
case ('location'):{
return <Gift/>
}
break;
}
}
renderMenuIcons(){
var tempArray = []
for (var i =0; i < tabs.length; i++) {
var a = tabs[i].key
console.log(a)
var eachElement;
switch(tabs[i].key) {
case ('home'):{
console.log('I am in home++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.homePressed()}}>
<Icon name = {tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
</TouchableOpacity>
}
break;
case ('heart'):{
console.log('I am in approvals+++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center', marginBottom:30, backgroundColor:'green', height:50, width:50, borderRadius:30}} onPress={()=>{this.heartPressed()}}>
<Icon name={tabs[i].icon} size={25} light color={'white'}/>
</TouchableOpacity>
}
break;
case ('location'):{
console.log('I am in location+++++++++++++')
eachElement = <TouchableOpacity key={i} style={{alignItems:'center', justifyContent:'center'}} onPress={()=>{this.locationPressed()}}>
<Icon name={tabs[i].icon} size={20} light color={this.state.selectedTab==tabs[i].key? 'red' : 'grey'}/>
</TouchableOpacity>
}
break;
default:{
console.log('+++++++++++++++++'+tabs[i].key)
}
}
tempArray.push(eachElement)
}
return tempArray;
}
render(){
return(
<View style={{flex:1, backgroundColor: global.backGroundColor}}>
{this.renderScene()}
<View style={styles.oval}>
</View>
<View style={{width:'90%', alignItems:'center', height:70, flexDirection:'row', justifyContent:'space-around', marginLeft:'5%', marginRight:'5%', position:'absolute', bottom:10, borderRadius:30, borderColor: global.borderColor, backgroundColor:global.backGroundColor}}>
{this.renderMenuIcons()}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
background: {
backgroundColor: 'red'
},
oval: {
width: (0.78*width),
height: (0.78*width),
borderRadius: 150,
//backgroundColor: 'red',
borderWidth:1,
borderColor:'#e4e4e4',
transform: [
{scaleX: 1.5}
],
marginLeft:45,
marginTop:150,
position:'absolute',
bottom:-200
}
});