react-native createBottomTabNavigator shows weird tab bar on Android

Question

I am using react-navigation createBottomTabNavigator to create a bottom tabs navigation. The tab bar appears fine on iOS but on Android, it appears as below:

I am not sure what is causing to have this weird styling. Below is my code to create the bottom tab bar:

    <Provider store={store}>
      <NavigationContainer theme={GlobalConfig.theme}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconSrc

              if (route.name === 'Alarms') {
                iconSrc = require('../img/ic_alarm.png')
              } else if (route.name === 'Settings') {
                iconSrc = require('../img/ic_settings.png')
              }

              return (
                <Image
                  source={iconSrc}
                  style={{
                    tintColor: focused
                      ? GlobalConfig.theme.colors.primary
                      : GlobalConfig.theme.colors.tabBarIconUnselected
                  }}
                />
              )
            }
          })}
          tabBarOptions={{
            activeTintColor: GlobalConfig.theme.colors.primary,
            inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected
          }}>
          <Tab.Screen name={I18n.t('alarms')} component={AlarmsTab} />
          <Tab.Screen name={I18n.t('settings')} component={SettingsTab} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>

Each tab is a stack navigator. Alarms stack navigation is configured as below:

    <Stack.Navigator
      initialRouteName="AlarmListScreen"
      screenOptions={{
        headerStyle: {
          backgroundColor: GlobalConfig.theme.colors.primary
        },
        headerTintColor: GlobalConfig.theme.colors.background
      }}>
      <Stack.Screen
        name="AlarmListScreen"
        component={AlarmListScreen}
        options={{title: I18n.t('alarms')}}
      />
      <Stack.Screen
        name="AlarmDetailsScreen"
        component={AlarmDetailsScreen}
        options={{title: 'Alarm Details'}}
      />
    </Stack.Navigator>

If you have experienced this problem in the past and know how to fix it, please let me know. Also let me know if you need any other information in order to solve the problem.

Thanks!

Answer 1

Finally, I found the solution to this after long hard work.

elevation: 0

Set this on tab bar style will fix this issue.

Example -

tabBarOptions={{
        showIcon: true,
        showLabel: true,
        activeTintColor: COLORS.tabSelected,
        inactiveTintColor: COLORS.tabNormal, 
        style: {
          backgroundColor:'transparent',
          borderTopWidth: 0,
          position: 'absolute',
          elevation: 0  // <-- this is the solution
        },
        labelStyle: {
          fontSize: 12,
        },
      }}>

Here are the output screenshots:

Before set "elevation: 0", it was looking like this

After set "elevation: 0", it's looking perfect

Answer 2

I don't know why does the tab bar appear like above on Android but I was able to fix it by specifying the tab bar color in the tabBarOptions as shown below

            tabBarOptions={{
              activeTintColor: GlobalConfig.theme.colors.primary,
              inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected,
              style: {
                backgroundColor: GlobalConfig.theme.colors.tabBarBackground
              }
            }}

By specifying the above tab bar background color style, the whole tab bar was a uniform grey color as expected.