'Implement Tab Screen in React Native

I'm facing a weird problem. In my react native app I have a return <Tab.Navigator> which contains <Tab.Screen>. The problem shown in the image is not properly implemented, I tried putting padding in every tab Screen but it does not work, when I tried landscaping my Emulator the text and icon will scattered, can anyone help me with this, thanks in advance.

Portrait

Landscape

import { COLORS, FONTS, icons } from "../constants"

const TabBarCustomButton = ({ children, onPress }) => {   //this is the design from thye circle shape in the image
  return (
    <TouchableOpacity
      style={{
        top: -30,
        justifyContent: 'center',
        alignItems: 'center',
        ...styles.shadow
      }}
      onPress={onPress}
    >
      <LinearGradient
        colors={[COLORS.primary, COLORS.secondary]}
        style={{
          width: 70,
          height: 70,
          borderRadius: 35
        }}
      >
        {children}
      </LinearGradient>

    </TouchableOpacity>
  )
}

return (

<Tab.Navigator
  screenOptions={{
    tabBarShowLabel: false,
    tabBarStyle: [
      {
        display: "flex"
      },
      null
    ],
    headerShown: false
  }}
  tabBarOptions={{
    showLabel: false,
    style: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      elevation: 0,
      backgroundColor: COLORS.white,
      borderTopColor: "transparent",
      height: 100
    }
  }}
>
  <Tab.Screen
    name="Home"
    component={FeedStack}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Image
            source={icons.home}
            resizeMode="contain"
            style={{
              width: 25,
              height: 20,
              tintColor: focused ? COLORS.
                primary : COLORS.black
            }}
          />
          <Text style={{
            color: focused ? COLORS.
              primary : COLORS.black, ...FONTS.body5
          }}
          >HOME</Text>
        </View>
      )
    }}
  />
  <Tab.Screen
    name="Portfolio"
    component={MessageStack}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Image
            source={icons.pie_chart}
            resizeMode="contain"
            style={{
              width: 25,
              height: 20,
              tintColor: focused ? COLORS.
                primary : COLORS.black
            }}
          />
          <Text style={{
            color: focused ? COLORS.
              primary : COLORS.black, ...FONTS.body5
          }}
          >PORTFOLIO</Text>
        </View>
      )
    }}
  />
  <Tab.Screen
    name="Transaction"
    component={ProfileStack}
    options={{
      tabBarIcon: ({ focused }) => (
        <Image
          source={icons.transaction}
          resizeMode="contain"
          style={{
            width: 25,
            height: 20,
            tintColor: COLORS.white
          }}
        />
      ),
      tabBarButton: (props) => (
        <TabBarCustomButton
          {...props}
        />
      )
    }}

  />
  <Tab.Screen
    name="Prices"
    component={ProfileStack}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Image
            source={icons.line_graph}
            resizeMode="contain"
            style={{
              width: 25,
              height: 20,
              tintColor: focused ? COLORS.
                primary : COLORS.black
            }}
          />
          <Text style={{
            color: focused ? COLORS.
              primary : COLORS.black, ...FONTS.body5
          }}
          >STATS</Text>
        </View>
      )
    }}
  />
  <Tab.Screen
    name="Settings"
    component={ProfileStack}
    options={{
      tabBarIcon: ({ focused }) => (
        <View style={{
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Image
            source={icons.settings}
            resizeMode="contain"
            style={{
              width: 25,
              height: 20,
              tintColor: focused ? COLORS.
                primary : COLORS.black
            }}
          />
          <Text style={{
            color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5
          }}
          >SETTINGS</Text>
        </View>
      )
    }}
  />
</Tab.Navigator>
);

Solution 1:^[1]

Try changing the options to match the following. I wasn't able to run the code since I don't have the environment setup right now. So please ignore any/all possible errors.

return (
<Tab.Navigator
  screenOptions={{
    tabBarShowLabel: true,
    tabBarStyle: [
      {
        display: "flex"
      },
      null
    ],
    headerShown: false
  }}
  tabBarOptions={{
    showLabel: false,
    style: {
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      elevation: 0,
      backgroundColor: COLORS.white,
      borderTopColor: "transparent",
      height: 100
    }
  }}
>
  <Tab.Screen
    name="Home"
    component={FeedStack}
    options={{
       tabBarLabel: ({color, focused}) => (
            <Text
                numberOfLines={1}
                style={{color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5}}>
                Home
            </Text>
            ),
        tabBarIcon: ({ focused }) => (
            <Image
                source={icons.home}
                resizeMode="contain"
                style={{
                width: 25,
                height: 20,
                tintColor: focused ? COLORS.
                    primary : COLORS.black
                }}
            />
        )
    }}
  />
  <Tab.Screen
    name="Portfolio"
    component={MessageStack}
    options={{
        tabBarLabel: ({color, focused}) => (
            <Text
                numberOfLines={1}
                style={{color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5}}>
                PORTFOLIO
            </Text>
            ),
        tabBarIcon: ({ focused }) => (
            <Image
                source={icons.pie_chart}
                resizeMode="contain"
                style={{
                width: 25,
                height: 20,
                tintColor: focused ? COLORS.
                    primary : COLORS.black
                }}
            />
        )
    }}
  />
  <Tab.Screen
    name="Transaction"
    component={ProfileStack}
    options={{
        tabBarLabel: ({color, focused}) => (
            <Text
                numberOfLines={1}
                style={{color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5}}>
                TRANSACTION
            </Text>
            ),
        tabBarIcon: ({ focused }) => (
            <Image
                source={icons.transaction}
                resizeMode="contain"
                style={{
                width: 25,
                height: 20,
                tintColor: focused ? COLORS.
                    primary : COLORS.black
                }}
            />
        )
    }}

  />
  <Tab.Screen
    name="Prices"
    component={ProfileStack}
    options={{
        tabBarLabel: ({color, focused}) => (
            <Text
                numberOfLines={1}
                style={{color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5}}>
                STATS
            </Text>
            ),
        tabBarIcon: ({ focused }) => (
            <Image
                source={icons.line_graph}
                resizeMode="contain"
                style={{
                width: 25,
                height: 20,
                tintColor: focused ? COLORS.
                    primary : COLORS.black
                }}
            />
        )
    }}
  />
  <Tab.Screen
    name="Settings"
    component={ProfileStack}
    options={{
        tabBarLabel: ({color, focused}) => (
            <Text
                numberOfLines={1}
                style={{color: focused ? COLORS.primary : COLORS.black, ...FONTS.body5}}>
                SETTINGS
            </Text>
            ),
        tabBarIcon: ({ focused }) => (
            <Image
                source={icons.settings}
                resizeMode="contain"
                style={{
                width: 25,
                height: 20,
                tintColor: focused ? COLORS.
                    primary : COLORS.black
                }}
            />
        )
    }}
  />
</Tab.Navigator>
);

Hope I was able to help. Cheers.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Implement Tab Screen in React Native

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]