反应本机底部标签导航不起作用，图标出现在彼此之上

Question

I'm having a very weird behavior from react navigation, Whenever I want to use bottom tabs navigation it doesn't load any screen and icons render on top of each other.

I installed all needed packages for navigation to work like react-native-safe-area-context react-native-screens

Navigation.js

import {
  Cases,
  Employees,
  ...
} from './../screens'

export const adminBottomTabs = [
  {
    name: 'CASES',
    label: 'Cases',
    component: Cases,
    icon: 'home',
    icon_active: 'home',
  },
  {
    name: 'EMPLOYEES',
    label: 'Employees',
    component: Employees,
    icon: 'users',
    icon_active: 'users',
  },
  ...
]

Admin.jsx (where I load the navigation)

export const Admin = ({ navigation }) => {
  return (
    <View style={[mainStyles.screen, { flex: 1 }]}>

      <Tab.Navigator>
        {
          adminBottomTabs.map(route => (
            <Tab.Screen
              key={route.name}
              name={route.name}
              component={route.component}
              initialParams={{ name: route.name }}
              options={{
                headerShown: false,
                tabBarLabel: route.label,
                tabBarIcon: ({ focused, color }) => (
                  <Icon name={route.icon} color={color} />
                ),
                tabBarOptions: {
                  activeTintColor: '#333333',
                  inactiveTintColor: '#333333',
                },
              }}

            />
          ))
        }
      </Tab.Navigator>

    </View>
  )
}

CustomIcon Component

import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
import icoMoonConfig from './selection.json';
export default createIconSetFromIcoMoon(icoMoonConfig);

Answer 1

Grate thanks to @ronakdholariya for his answer, The problem was that I used alignItems: 'center'

My recommendation for further problems like this is to take out everything that can effect the behavior like styles, plugins and bring them back one by one.