Manage dark mode without installing any package in react native

Hello Friends,

welcome to Infinitbility!

Today we are going to discuss how to manage dark mode without installing any package in react native with example.

I read many articles about managing dark mode applications in react-native but no one can explain without package. then I write custom code for managing dark mode without any package and sharing with you.

Step 1: Create Global Veriable

Create Global Veriable for manage themeMode on src\App.js

// App.js

/* App theme mode */
global.themeMode 	=	'light'; // light, dark

Step 2: Create a function

Create a function for get and set themeMode from Async Storage

// functions.js

// call when your app start
async getThemeMode(){
    let themeMode = await AsyncStorage.getItem("themeMode");
    
    if(themeMode) {
        global.themeMode  = themeMode;
    }else{
        global.themeMode  = 'light';
        themeMode = 'light';
    }
    return themeMode;
}

// call when user change theme mode
async setThemeMode(mode){
    let themeMode = await AsyncStorage.setItem("themeMode", mode);
    global.themeMode  = mode;
    return mode;
}

Step 3: Manage Styles file

create seprate const for differant styles on dark mode and light mode.

// Styles.js

// diffrent styles for modes
const ThemeStyle = {
    light: {
        background: {
            backgroundColor: '#FFFFFF'
        }
    },
    dark: {
        background: {
            backgroundColor: '#000000'
        }
    }
};

// home screen styles
const HomeScreenStyles = StyleSheet.create({
    // background
    content: {
        flex: 1,
    },
});

Step 4: Manage styles on HomeScreen

Here you understand using styles for both mode


import React from 'react';
import { View, Text } from 'react-native';
import { HomeScreenStyles, ThemeStyle } from "../Styles";


export default class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      loader: false,
    }

  }

  render() {
    return (
      <View style={[HomeScreenStyles.content, ThemeStyle[themeMode].background]}>
        <Text>Here Your Content</Text>
      </View>
    );
  }
}

Tips

whenever user change themeMode update your any state such as loader and etc.

Thanks for reading…

Manage dark mode without installing any package in react native

Step 1: Create Global Veriable

Step 2: Create a function

Step 3: Manage Styles file

Step 4: Manage styles on HomeScreen

Tips

More From React Native Tutorial

Basics

Advances

Error & Issue Solution

Step 1: Create Global Veriable#

Step 2: Create a function#

Step 3: Manage Styles file#

Step 4: Manage styles on HomeScreen#

Tips#

More From React Native Tutorial#

Basics#

Advances#

Error & Issue Solution#

Step 1: Create Global Veriable

Step 2: Create a function

Step 3: Manage Styles file

Step 4: Manage styles on HomeScreen

Tips

More From React Native Tutorial

Basics

Advances

Error & Issue Solution