Open logicman opened 2 years ago
Yes, you can't see status bar in dark mode. Icons are white on a white background.
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>
</>
);
};
@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.
💬 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