Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

This is the goal I had no problem styling the tab bar with the gradient and the buttons. I created my own custom one with this code:

export default createBottomTabNavigator({
  (... routes here)
}, {
  initialRouteName: "Inspiration",
  tabBarComponent: props => <BottomTabBar {...props} />
})

But now I'm having trouble with the middle button. My bar looks like this:

This is how it looks now

If I remove the custom tab bar removing this line:

tabBarComponent: props => <BottomTabBar {...props} />

Then now my middle button looks how it should, but of course, all of the other styles are missing:

Not close enough

This is how my BottomTabBar component looks right now:

import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

const iconBag = require("./images/bag.png");

export default function BottomTabBar(props: TabBarBottomProps) {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { routes, index: activeRouteIndex } = navigation.state;

  function renderTabBarButton(routeIndex, route) {
    const isRouteActive = routeIndex === activeRouteIndex;
    const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

    if (route.key == "Bag")
      return <Image style={{ width: 100, height: 100 }} source={iconBag} />;
    return (
      <TouchableOpacity
        key={routeIndex}
        style={styles.tabButton}
        onPress={() => onTabPress({ route })}
        onLongPress={() => onTabLongPress({ route })}
        accessibilityLabel={getAccessibilityLabel({ route })}
      >
        {renderIcon({ route, focused: isRouteActive, tintColor })}
        <Text style={styles.tabText}>{getLabelText({ route })}</Text>
      </TouchableOpacity>
    );
  }

  return (
    <LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}>
      {routes.map((route, routeIndex) => renderTabBarButton(routeIndex, route))}
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#C4C4C4"
  },
  tabButton: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  tabText: {
    fontFamily: "Source Sans Pro",
    fontSize: 11,
    color: "#454545",
    marginTop: 1
  }
});

What can I do? Any help will be really much appreciated!

like image 279
hecontreraso Avatar asked Apr 19 '19 18:04

hecontreraso


People also ask

How do I customize the tab bar in react navigation?

Add icons to the tab bar To add icons to each tab, first import the Icon component from react-native-vector-icons library inside the navigation/TabNavigator/index. js file. For this example, let's use AntDesign based icons. // after other import statements import Icon from 'react-native-vector-icons/AntDesign';

How do you apply the style for tab navigation in react native?

If you want to change the style of Bottom Navigation use tabBarStyle or tabBarItemStyle rather than style in screenOptions.

How do I add button tab navigator?

The last remaining puzzle is how to add a Sign In button to the Bottom Navigation Bar. The roadblock is if you write <Tab. Screen name="Sign In component={SignIn} /> and you press a button with parameter onPress={() => navigation. navigate('SignIn')} , it will navigate you to the Tab.


2 Answers

enter image description here

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 }) => (
                        <View style={styles.tab}>
                            <Image source={focused? star_check : star} style={styles.icon} />
                            <Text style={[styles.name, {color: tintColor}]}>Kampanjer</Text>
                        </View>
                    )
            }
        },
        AboutUs: {
            screen: AboutUs,
            navigationOptions: {
                title: 'About Us',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? about_check : about} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Om oss</Text>
                            </View>
                        )
            }
        },
        Booking: {
            screen: Booking,
            navigationOptions: {
                title: 'MIN SALONG',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.book}>
                                <Image source={focused? check : book} style={styles.book_icon} />
                            </View>
                        )
            }
        },
        Shop: {
            screen: Shop,
            navigationOptions: {
                title: 'Shop',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? shop_check : shop} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Shop</Text>
                            </View>
                        )
            }
        },
        Settings: {
            screen: Settings,
            navigationOptions: {
                title: 'More',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? more_check : more} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Inställningar</Text>
                            </View>
                        )
            }
        },
    },
    {
        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"});
like image 104
XPowerDev Avatar answered Oct 06 '22 05:10

XPowerDev


enter image description here


You can try my solution

const TabNavigator = createBottomTabNavigator(
{
Top: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_list.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},

New: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_clock.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
Ask: { // big plus icon in the middle
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <View
        style={{
          position: 'absolute',
          bottom: 20, // space from bottombar
          height: 58,
          width: 58,
          borderRadius: 58,
          backgroundColor: '#5a95ff',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          source={require('./src/assets/ic_add_24.png')}
          style={{
            width: 40,
            height: 40,
            tintColor: '#f1f6f9',
            alignContent: 'center',
          }}
        />
      </View>
    ),
  },
},
Show: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_notification.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
Jobs: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_person.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
},
{
tabBarOptions: {
  activeTintColor: '#FF6F00',
  inactiveTintColor: '#8997B0',
  showIcon: true,
  showLabel: false,
  style: {
    backgroundColor: '#f1f6f9',
  },
},
},
);
like image 31
Trung Nguyen Avatar answered Oct 06 '22 04:10

Trung Nguyen