Let’s now create a React Native store. This store will use Context to save user theme preferences. This way, the application can persist user choices and remember them when the user revisits the application.

In the project root directory, create a directory named store. Inside the store directory, create a context.js file to hold the context logic. In the context.js file:

• Import the necessary module:

Ensure the createContext is imported to access the method and execute a Context state.

• Define the app context as follows:

• Define the application context provider function:

Here, we are saving the application theme. The application will launch a light theme by default based on the above context provider. Users can, after that, update the theme preferences that will be saved in the application context.

To access the above context provider functions, export the AppContext and AppContextProvider as follows:

This way, any application component can access the Context and update the component theme accordingly.

Setting up the components

To demonstrate this example, we will create a component that we can use to allow the user to switch theme modes. In the project root directory, create a components directory. In the components directory, create an App.js file. Edit the App.js file as follows:

• Import the necessary dependencies:

Note: we have imported the defined context to this component. The component will refer to the application store (Context API) to reflect the user selected them as such. Accordingly, the saved theme will be loaded to the application interface whenever the user relaunches the application.

• Define a render function to switch between modes:

As described in the above code, the application will check the saved states to load the saved theme. This component is only returning a small textual highlight. The component will be updated based on the defined theme artifacts above. Once the application checks that it is on the default light mode, the user can use the button to update the component to dark mode and vice versa. Still, these actions will be saved to the application Context to remember these choices.

Controlling dark mode and light mode

We have a store for the Context API and the application’s components. Let’s now execute them at the application entry point.

Navigate to the application root App.js file and edit it as follows:

• Import the necessary modules: This should be the context store and the components used in the application.

• Edit the render function as follows:

Testing the application

Let’s now test if the themes are working as expected. Go ahead and run your application and Ensure the development server is running:

You can interact with the application as follows: The default light theme as launch time:

The dark mode once the user changes the application theme: