Bottom Tab Navigation with an arc/hump - react-native

Question

How do create something as above in react native ?

Answer 1

I have done with ART Library. its not perfect but it can give idea Please check snack.
https://snack.expo.io/#nazrdogan/intrigued-yogurt
import * as React from 'react';
import { Text, View, StyleSheet, ART, Dimensions } from 'react-native';
import { Constants } from 'expo';
const { Surface, Group, Shape, Path } = ART;
import { Card } from 'react-native-paper';
import { IconButton, Colors, FAB } from 'react-native-paper';
const MyComponent = () => (
<FAB style={styles1.fab} onPress={() => console.log('Pressed')} />
);
const styles1 = StyleSheet.create({
fab: {
position: 'absolute',
alignSelf: 'center',
bottom: 30,
},
});
export default class App extends React.Component {
render() {
let deviceWidth = Dimensions.get('window').width;
return (
<View style={styles.container}>
<View>
<Surface width={deviceWidth} height={60}>
<Shape
d={new Path()
.moveTo(0, 0)
.lineTo(0, deviceWidth)
.lineTo(deviceWidth, deviceWidth)
.lineTo(deviceWidth, 0)
.move(-deviceWidth / 2 + 60, 0)
.arc(-120, 0, 80, 120)
.close()}
fill={'#f00'}
/>
</Surface>
<IconButton
style={{ left: 0, position: 'absolute', zIndex: 100 }}
icon="add-a-photo"
color={'white'}
size={30}
onPress={() => console.log('Pressed')}
/>
<MyComponent />
<IconButton
style={{ right: 0, position: 'absolute', zIndex: 100 }}
icon="add-a-photo"
color={'white'}
size={30}
onPress={() => console.log('Pressed')}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});