ReactNative useSafeAreaInsets bottom and height is 0 on some devices (Galaxy S9)

Question

I'm encountering an issue with the SafeArea insets on our React Native app, specifically on Galaxy S9 devices. While on some devices like Pixel 3a, the SafeArea insets seem to have the correct values, on the Galaxy S9, both the top and bottom insets are set to 0.

I also tried printing the values from initialWindowMetrics and got no success.

Here are the SafeArea insets logged on Pixel 3a:

Bottom Inset: {"bottom": 24, "left": 0, "right": 0, "top": 24}

And on Galaxy S9:

Bottom Inset: {"bottom": 0, "left": 0, "right": 0, "top": 0}

I handle the SafeArea insets in my code as follows:

  const insets = useSafeAreaInsets();
  console.log('Bottom Inset:', insets);

  return (
    <ScreenContainer safeAreaMode="bottom">
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, size }) => (
            <BottomTabIcon focused={focused} route={route} size={size * 1.1} />
          ),
          tabBarLabel: ({ focused }) => <BottomTabTitle routeName={route.name} focused={focused} />,
          tabBarShowLabel: false,
          headerShown: false,
          tabBarStyle: {
            backgroundColor: colors.beige.primary,
            height: bottomBarConfig.height + insets.bottom,
            paddingBottom: insets.bottom,
          },
        })}
      >
....

The issue is causing the bottom navigation to overlap with the bottom navbar on Galaxy S9, as shown in this screenshot:
.

I appreciate any insights or suggestions on how to resolve this problem. Thank you!