React navigation- Wrap button in TabBar - react-native

Question

I'm new in React Native and i'm trying to do the TabBar in the image. My problem is to put a button in the tabbar. If someone can help me or have an idea to create this tabbar it could be really nice.
THX

Answer 1

you can check
this link. One of the props to pass TabNavigator is tabBarComponent. If you do not want the default styling or have to make custom tabBar you can specify the how the component should look.
In your case this should work.
import React from 'react';
import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
import {TabNavigator} from 'react-navigation';
import Tab1Screen from '../components/tab1Screen';
import Tab2Screen from '../components/tab2Screen';
var {height, width} = Dimensions.get('window');
const mainRoutes = TabNavigator({
Tab1: {screen: Tab1Screen},
Tab2: {screen: Tab2Screen}
},
{
tabBarComponent:({navigation}) => (
<View style={{flex: 0.1, borderColor: 'green', borderWidth: 1}}>
<View style={{flexDirection:'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 15}}>
<View style={{width: 40, height: 40, borderRadius: 20, borderColor: 'red', borderWidth: 1, position: 'absolute', left: width/2.5, bottom:13 }}></View>
<TouchableOpacity onPress={() => navigation.navigate('Tab1')}>
<Text>Tab1</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('Tab2')}>
<Text>Tab2</Text>
</TouchableOpacity>
</View>
</View>
)});
export default mainRoutes;

Answer 2

I had to do something similar. I'm using React Navigation v5 and in my case, the button had to execute a custom action instead of navigating to a tab. So this is what I did:
import styles from './styles';
// Other needed imports...
// ...
<Tab.Screen
name="Add Recipe"
component={() => null}
options={{
tabBarButton: () => (
<TouchableOpacity
style={styles.addIconWrapper}
onPress={() => {
// Your custom action here
}}
>
<View style={styles.addIconBackground}>
<Image source={assets.add} style={styles.addIconImage} />
</View>
</TouchableOpacity>
),
}}
/>;
And inside styles.js:
// ...
addIconWrapper: {
width: '20%',
justifyContent: 'center',
alignItems: 'center',
},
addIconBackground: {
marginTop: -30,
backgroundColor: '#85c349',
borderColor: 'white',
shadowOffset: { width: 2, height: 2 },
shadowColor: '#999',
shadowOpacity: 0.5,
borderRadius: 1000,
width: 42,
height: 42,
justifyContent: 'center',
alignItems: 'center',
},
addIconImage: {
tintColor: 'white',
},
Final result