SafeArea in Navigation example does not apply the theme background colour

[logicman]

💬 Question

When using the example on https://akveo.github.io/react-native-ui-kitten/docs/guides/configure-navigation#create-screens the background colour of the SafeAreaView does not match that of the theme. Is this an issue?

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.1.1
@ui-kitten/components	^5.1.2

[sikemullivan]

Yes, you can't see status bar in dark mode. Icons are white on a white background.

[sikemullivan]

I switched to using the top nav from react navigation. Then switching the theme for react navigation based on the OS theme.

const { Navigator, Screen } = createNativeStackNavigator();

const HomeNavigator = () => {

  return (
    <Navigator>
      <Screen name="Home" component={HomeScreen} options={{ title: "Home" }} />
      <Screen name="RaceNew" component={RaceNewScreen} options={{ title: "New Race" }} />
    </Navigator>
  )
};

export const AppNavigator = () => {
  const theme = useColorScheme() === 'light' ? DefaultTheme : DarkTheme;

  return (
    <NavigationContainer theme={theme}>
      <HomeNavigator />
    </NavigationContainer>
  )
};

export default function App() {
  const colorScheme = useColorScheme() ?? 'dark';

  return (
    <>
      <IconRegistry icons={EvaIconsPack} />
      <ApplicationProvider {...eva} theme={eva[colorScheme]}>
        <AppNavigator/>
      </ApplicationProvider>
    </>
  );
};

[greenfrvr]

@logicman if I understood the issue correctly, there is no problem in any sort of functionality . SafeAreaView is a container which applies additional paddings which correspond to system elements sizes. SafeAreaView is actually not part of UI Kitten library, so to make it match some color from the theme you should manually set desired color via styles. I think the aim of that example was to show how to use components from screen structure perspective.