SafeAreaView implementation on iPhone 11

Question

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:

Answer 1

BottomTab had SafeAreaView so you don't need to wrap it in SafeAreaView.

const BottomTabs = () => (
  <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>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});