React-navigation: how to style a big middle button in tab navigation?

Question

So I have this requirement. To make tab navigation with this exact appearance:

I had no problem styling the tab bar with the gradient and the buttons. I created my own

Answer 1

I made this bottom tab with react native. I think your design is very simple. My code sample will help you I think.

import React from 'react';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { View, Image } from 'react-native'
import { Text } from 'native-base';

import Featured from './featured';
import AboutUs from './about_us';
import Shop from './shop';
import Booking from './booking';
import Settings from './settings';
import styles from './styles';

import star from './../../assets/images/icons/star.png';
import star_check from './../../assets/images/icons/star_check.png';
import about from './../../assets/images/icons/about.png';
import about_check from './../../assets/images/icons/about_check.png';
import book from './../../assets/images/icons/book.png';
import check from './../../assets/images/icons/check.png';
import shop from './../../assets/images/icons/shop.png';
import shop_check from './../../assets/images/icons/shop_check.png';
import more from './../../assets/images/icons/more.png';
import more_check from './../../assets/images/icons/more_check.png';

const Tabs = createBottomTabNavigator(
    {
        Featured: {
            screen: Featured,
            navigationOptions: {
                title: 'Featured',
                tabBarIcon: ({ tintColor, focused }) => (
                        
                            
                            Kampanjer
                        
                    )
            }
        },
        AboutUs: {
            screen: AboutUs,
            navigationOptions: {
                title: 'About Us',
                tabBarIcon: ({ tintColor, focused }) => (
                            
                                
                                Om oss
                            
                        )
            }
        },
        Booking: {
            screen: Booking,
            navigationOptions: {
                title: 'MIN SALONG',
                tabBarIcon: ({ tintColor, focused }) => (
                            
                                
                            
                        )
            }
        },
        Shop: {
            screen: Shop,
            navigationOptions: {
                title: 'Shop',
                tabBarIcon: ({ tintColor, focused }) => (
                            
                                
                                Shop
                            
                        )
            }
        },
        Settings: {
            screen: Settings,
            navigationOptions: {
                title: 'More',
                tabBarIcon: ({ tintColor, focused }) => (
                            
                                
                                Inställningar
                            
                        )
            }
        },
    },
    {
        initialRouteName: 'Featured',
        tabBarOptions: {
            activeTintColor: '#80A0AB',
            inactiveTintColor: '#fff',
            showLabel: false,
            style: {
                height: 60,
                backgroundColor: '#485155'
            },
            labelStyle: {
                fontSize: 12,
                fontFamily: 'Abel-Regular'
            }
        }  
    }
);

export default createStackNavigator({Tabs}, {headerMode: "none"});