White border in the bottom after upgrade from 7.x to 8.x for `bottomTabs` layout

[retyui]

What happened?

Before	After

What was the expected behaviour?

remove that border

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

No response

In what environment did this happen?

React Native Navigation version: 8.3.2
React Native version: 77
Has Fabric (React Native's new rendering system) enabled: (yes/no)
Node version:
Device model: Pixel 9 pro xl
Android version: 16

[retyui]

As workaround you can add negative inset

                  component: {
                    name: 'Home',
                    options: {
                      layout: {
                        fitSystemWindows: true,
                        backgroundColor: 'red',
                        insets: {
                          bottom: -24, <-- WORKAROUND
                        },

Default	WORKAROUND

---

Sample app:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Navigation } from 'react-native-navigation';

const HomeScreen = (props) => {
  return (
    <View style={styles.root}>
      <Text>Hello React Native Navigation 👋</Text>

      <Button
        title="Push Settings Screen"
        color="#710ce3"
        onPress={() =>
          Navigation.push(props.componentId, {
            component: {
              name: 'Settings',
            },
          })
        }
      />
    </View>
  );
};
HomeScreen.options = {
  topBar: {
    title: {
      text: 'Home',
    },
  },
  bottomTab: {
    text: 'Home',
  },
};

const SettingsScreen = () => {
  return (
    <View style={styles.root}>
      <Text>Settings Screen</Text>
    </View>
  );
};
SettingsScreen.options = {
  topBar: {
    title: {
      text: 'Settings',
    },
  },
  bottomTab: {
    text: 'Settings',
  },
};

Navigation.registerComponent('Home', () => HomeScreen);
Navigation.registerComponent('Settings', () => SettingsScreen);

Navigation.setDefaultOptions({
  statusBar: {
    backgroundColor: '#4d089a',
    translucent: true,
    visible: false,
  },
  topBar: {
    visible: false,
  },
  bottomTab: {
    fontSize: 14,
    selectedFontSize: 14,
  },
  bottomTabs: {
    visible: false,
  },
});

Navigation.events().registerAppLaunchedListener(async () => {
  Navigation.setRoot({
    root: {
      bottomTabs: {
        children: [
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Home',
                    options: {
                      layout: {
                        fitSystemWindows: true,
                        backgroundColor: 'red',
                        insets: {
                          // bottom: -24, <-- WORKAROUND
                        },
                      },
                    },
                  },
                },
              ],
            },
          },
          {
            stack: {
              children: [
                {
                  component: {
                    name: 'Settings',
                  },
                },
              ],
            },
          },
        ],
      },
    },
  });
});

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'pink',
    borderWidth: 2,
    borderColor: 'green',
  },
});