How to design full Center Cut FAB in react native navigation - react-native

Question

I am need to create a custom bottom navigation with floating action button as a full center cut in react native. I will attach the image. I need exactly this and there is not tutorial to follow as at now.I need help. You can drops links I can follow.If you have done something like this,you can share the code

Answer 1

I did like this in my one project. create "BottomNavigator" component and import it at any class that I wish:
import React, { Component } from 'react';
import { View } from 'react-native';
import { Icon, Button } from 'react-native-elements'
class BottomNavigator extends Component {
render() {
return (
<View style={{
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff'
}}>
<View style={{ position: 'absolute', padding: 5, alignSelf: 'center', backgroundColor: '#fff', width: 70, height: 70, borderRadius: 35, bottom: 25, zIndex: 5 }}>
<Button
icon={{
name: 'plus',
type: 'feather',
color: '#fff',
style: { marginRight: 0 }
}}
onPress={() => this.doSomething()}
buttonStyle={{ backgroundColor: '#000', width: 60, height: 60, borderRadius: 30 }}
containerViewStyle={{ alignSelf: 'center' }}
/>
</View>
<View style={{ position: 'absolute', backgroundColor: '#3F51B5', bottom: 0, zIndex: 1, width: '100%', height: 60, flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 15, paddingVertical: 10 }}>
<Icon
name='list'
type='feather'
color='#fff'
onPress={() => this.doSomething()} // Ex : openDrawer() in react-navigation
/>
<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
<Icon
name='heart'
type='feather'
color='#fff'
containerStyle={{ marginHorizontal: 10 }}
/>
<Icon
name='search'
type='feather'
color='#fff'
/>
</View>
</View>
</View>
);
}
}
export default BottomNavigator;
And in any class import and use <BottomNavigator />.
I am using react-native-elements and vector-icons. It's not necessary just recommended.
Used inline style for your easy edit. I hope this helps you.