React navigation- Wrap button in TabBar

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;