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);
Great 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 affect the behavior like styles, and plugins and bring them back one by one.