Implement light and dark mode in react-native with react-native-navigation

[denysoleksiienko]

Hello, everyone!
Could someone explain how to implement light/dark theming in react-native app with react-native-navigation? I use @emotion/react @emotion/native for styled. I understand I need a switch and store the selected theme (example into AsyncStorage) and pass the theme into NavigationContainer from '@react-navigation/native'?
My example colors:

const theme = {
  colors: {
    primary: {
      white: '#FFF',
      background: '#F3F2F5',
    },
  },
};

App:

import { ThemeProvider } from '@emotion/react';
import { NavigationContainer } from '@react-navigation/native';

const RootNavigator = () => (
  <ThemeProvider theme={theme}>
    <NavigationContainer theme={theme}>
      <RootStack.Navigator>
        ....
      </RootStack.Navigator>
    </NavigationContainer>
  </ThemeProvider>
);