How can I implement dark mode in react native app

Question

I want to add dark mode to my app. But the documentations are confusing. Is there any easy way to understand how to implement the dark mode. I also want the darkmode to stay active in my all app screens. And need to implement the mode in both ios and android. And I am using stacknavigator for navigating through multiple screens. I have tried one expo project could not achieve a satisfying result. Any help will be good and thanks.

Answer 1

(my spanish is not so good)

I add dark mode to my app. I using react-navigation, styled-components, styled-theming and the API Context from React :)

My implementation:

In the App.js file

state = {
   //Dark Mode
      darkMode: false,
      switchDarkMode: () => {
        const darkMode = new Boolean(!this.state.darkMode)
              this.setState({ darkMode: !this.state.darkMode },
                () => AsyncStorage.setItem('darkMode', darkMode.toString()))            
      },
}

 <ThemeProvider theme={{ mode: darkMode ? 'dark' : 'light' }}>          
        <AppContainer
          ref={navigatorRef => NavigationService.setTopLevelNavigator(navigatorRef)}
          uriPrefix={prefix}
          onNavigationStateChange={(prevState, currentState) => {
            const currentScreen = this.getActiveRouteName(currentState)
            const prevScreen = this.getActiveRouteName(prevState)

            return prevScreen !== currentScreen && Analytics.setCurrentScreen(currentScreen)
          }}
        />
      </ThemeProvider>

The darkMode is actived/desactived in other Screen, Config.js file:

<NotificationsContext.Consumer>
                {
                    ({ darkMode, switchDarkMode }) => (

                            <ListItem
                                title="Activar"
                                containerStyle={{
                                    backgroundColor: darkMode ? '#1f1f1f' : '#FFF'
                                }}
                                titleStyle={{ 
                                    fontSize: isTablet ? 23 : 18,
                                    color: darkMode ? '#FFF' : '#333', 
                                    fontFamily: 'Avenir-Book' 
                                }}
                                bottomDivider
                                switch={{
                                    value: darkMode,
                                    onValueChange: switchDarkMode,
                                    trackColor: {
                                        false: '#edf2f4',
                                        true: '#29aae2'
                                    }
                                }}
                            />
                        </View>
                    )
                }
                </NotificationsContext.Consumer>

Finally in mi StyledComponents file:

import {Platform, Dimensions } from 'react-native';
import styled from 'styled-components/native';
import theme from 'styled-theming';
import { isTablet } from 'react-native-device-detection';

//Get dimensions device
const {width, height} = Dimensions.get('window')

//Start Manage Theme
const HeaderBackgroundColor = theme('mode', {
    light: Platform.OS === 'ios' ? '#FFFFFF' : '#FAFAFA',
    dark: '#1f1f1f'
})

const DrawerBackgroundColor = theme('mode', {
    light: '#EDF2F4',
    dark: '#1f1f1f'
})

const BackgroundColor = theme('mode', {
    light: '#FFFFFF',
    dark: '#1f1f1f'
})

const SemiDarkBackground = theme('mode', {
    light: '#EDF2F4',
    dark: '#333333'
})

const TextColor = theme('mode', {
    light: '#333333',
    dark: '#FFFFFF'
})

const Header = styled.SafeAreaView`
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-horizontal: 15;
    background-color: ${HeaderBackgroundColor};
`
const MainContainer = styled.View`
    flex: 1;
    background-color: ${BackgroundColor};
`
const MenuContainer = styled.View`
    flex: 1;
    background-color: ${SemiDarkBackground};
`

. . .

If you have questions please add your feedback :)

Answer 2

Use React navigation themes built-in plugin. If you use Expo, on iOS 13+ you can add the Appearance to detect preferred color scheme.

const Navigation = createAppContainer(RootStack);
export default () => <Navigation theme="light" />;

Check the docs. RN Themes