I'm trying to add a SafeAreaView so my icons don't get squished together like shown in the image.
But it seems the SafeAreaView just pushes the contents up instead.
This is how I've currently Implemented it/
const BottomTabs = () => (<SafeAreaView style={styles.container}><DevSupport /><Tab.Navigator><Tab.Screen name="Home" component={FeaturedScreen} options={{ unmountOnBlur: true, tabBarLabel: 'Home', tabBarIcon: ({ color }) => (<Icons.IconHome width={ICON_SIZE} height={ICON_SIZE} color={color} /> ), }} /></Tab.Navigator></SafeAreaView>);const styles = StyleSheet.create({ container: { flex: 1, },});Any tips on where I'm going wrong? Or am I simply adding the SafeAreaView on the wrong screen?
Without SafeArea it looks like the following:
