icon & text overlap in BottomTabNavigator in react native

Question

current:

expected:

Below Code for home tab only:

function MyTabs() {
   return(
     <Tab.Navigator
        initialRouteName="Dashboard"
        screenOptions={{
          tabBarActiveTintColor: "#e91e63",
          tabBarStyle: {
            paddingTop: 15,
            height: 80,
            paddingBottom: 15,
            borderTopWidth: 0,
            paddingHorizontal: 15
          }
        }}
      >
       <Tab.Screen
          name="Home"
          component={HomePage}
          options={{
            headerShown: false,
            tabBarLabelPosition: "beside-icon",
            tabBarLabelStyle: {
              fontSize: 14,
              fontFamily: "Gilroy-Medium",
            },
            tabBarLabel: ({ focused }) => {
              return (
                <Text
                  style={{
                    fontFamily:"Gilroy-Medium"
                    fontSize:14
                    fontWeight:"500"
                    color:"#D6407A"
                  }}
                >
                  {focused ? "Home" : ""}
                </Text>
              );
            },
            tabBarIcon: ({ focused }) =>
              focused ? (
                <Image
                  source={require("./src/assets/Homefill.png")}
                  style={{ resizeMode: "contain", height: 30, width: 30 }}
                />
              ) : (
                <Image
                  source={require("./src/assets/Home.png")}
                  style={{ resizeMode: "contain", height: 30, width: 30 }}
                />
              ),
          }}
        />
    </Tab.Navigator>
   )
}

I have tried to put marginLeft to text but it icon also goes to left side, so not works

I also want Home text beside of icon only if foucussed or say when current route is Home and with pills like pink border

How to make it like expected above?

Answer 1

import React, { useEffect } from 'react';
import { Text, View, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';


function HomeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
        </View>
    );
}

const Tab = createBottomTabNavigator();

function App() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarActiveTintColor: 'tomato',
                tabBarInactiveTintColor: 'gray',
            })}>
            <Tab.Screen
                name="HomeScreen"
                component={HomeScreen}
                options={{
                    headerShown: false,
                    tabBarLabelPosition: 'beside-icon',
                    tabBarLabelStyle: {
                        fontSize: 14,
                        fontFamily: 'Gilroy-Medium',
                    },
                    tabBarLabel: ({ focused }) => {
                        return (
                            <Text>
                                {focused ?
                                    <>
                                        <Text>Home</Text>   <Icon name="home" size={30} />
                                    </>
                                    : null}
                            </Text>
                        );
                    },
                    tabBarIcon: ({ focused }) =>
                        focused ? null : <Icon name="home" size={30} />,
                }}
            />
            <Tab.Screen
                name="SettingsScreen"
                component={SettingsScreen}
                options={{
                    headerShown: false,
                    tabBarLabelPosition: 'beside-icon',
                    tabBarLabelStyle: {
                        fontSize: 14,
                        fontFamily: 'Gilroy-Medium',
                    },
                    tabBarLabel: ({ focused }) => {
                        return (
                            <Text>
                                {focused ?
                                    <>
                                        <Text style={{textAlign:'center'}}>setting</Text>   <Icon name="gear" size={30} />
                                    </>
                                    : null}
                            </Text>
                        );
                    },
                    tabBarIcon: ({ focused }) =>
                        focused ? null :<Icon name="gear" size={30} />,
                }}
            />
        </Tab.Navigator>
    );
}

const Home = () => {
    return (
        <NavigationContainer>
            <App />
        </NavigationContainer>
    )
}
export default Home;

this will help you