Changing app themes using React Native, Styled Components and Redux

If you are getting into React Native or have already dipped your toes, you know that there are different ways you can style a React Native app. React Native uses JavaScript objects to style by default. If you have some experience with the CSS of the web, you know that styling a component is nothing more than writing code by using proper styling syntax.

This tutorial is going to be about styling your React Native apps using 💅 Styled Components and switching between two themes using Redux as state management library with it. It is a third-party open-source library. Using it is a matter of choice, but also another way to add styling to your app, and many might find it easy to use, especially if you have used this library before with other frameworks.

To follow this tutorial, please make sure you have the following installed on your local development environment and have access to the services mentioned below:

• Nodejs (>=10.x.x) with npm/yarn installed.
• react-native-cli
• Mac users must be running an iOS simulator.
• Windows/Linux users must be running an Android emulator.

To know more about how to setup a development environment for React Native using react-native-cli please refer to the official documentation here.

You can find the complete code for this tutorial at this Github repository.

Assuming that you have created a new React Native project using the command react-native init StyledThemeApp from a terminal window, please navigate inside the newly generated directory. When inside it, please execute the following command to install styled-components library.

Copy
npm install styled-components

That's all you need to do to use it in your React Native app!

Styled Components is a CSS-in-JS library that enables developers to write each component with their styles and allows the code to be in a single location. By coupling your styles with the components, it results in optimizing developer experience and output.

Let us create a simple component that will act as a primary screen of the app. Create a new file inside screens/HomeScreen.js. It is a class component that displays a text inside a box. The visual components are created using styled-components. To consume this library, you start by writing an import statement from styled-components/native.

Copy
1import React from 'react';
2import styled from 'styled-components/native';
3
4const Container = styled.SafeAreaView`
5  flex: 1;
6  background-color: papayawhip;
7  justify-content: center;
8  align-items: center;
9`;
10
11const TextContainer = styled.View`
12  padding: 15px;
13  border-radius: 5px;
14  border: 1px solid palevioletred;
15`;
16
17const Title = styled.Text`
18  padding: 20px;
19  font-size: 24px;
20  font-weight: 500;
21  color: palevioletred;
22`;
23
24class HomeScreen extends React.Component {
25  render() {
26    return (
27      <Container>
28        <TextContainer>
29          <Title>Themed App with React Native & Styled Components</Title>
30        </TextContainer>
31      </Container>
32    );
33  }
34}
35
36export default HomeScreen;

styled-components utilizes tagged template literals to style your components using backtick. The Container and the TextContainer are React Native View and have styling attached to them. The Title uses Text from React Native. The styled-components library uses the same flexbox model that React Native Layouts. The advantage here is that you get to write styles in the same understandable syntax that you have been using in web development and standard CSS.

Import the HomeScreen component inside the entry point file, App.js. Replace its existing content with the following.

Copy
1import React from 'react';
2
3import HomeScreen from './screens/HomeScreen';
4
5const App = () => {
6  return <HomeScreen />;
7};
8
9export default App;

Open the app in a simulator. You can execute either of the commands from the terminal window depending on the mobile platform you are using.

Copy
# for ios
react-native run-ios

# for android
react-native run-android

You will get the following result.

In the current React Native app, you have are going to make use of the classic example of a dark and a light mode.

Create a new file called /styles/theme.js. It is going to contain the style attributes that are going to be changed when setting a theme at the run time.

These attributes are nothing but colors for different React Native components. In a later section, using props from styled-components you learn how to extend the current styles of HomeScreen component.

Copy
1export const darkTheme = {
2  mode: 'dark',
3  PRIMARY_BACKGROUND_COLOR: '#353c51',
4  PRIMARY_TEXT_COLOR: '#767d92',
5  SECONDARY_TEXT_COLOR: '#ffffff',
6  PRIMARY_BUTTON_COLOR: '#152642',
7  SECONDARY_BUTTON_COLOR: '#506680'
8};
9export const lightTheme = {
10  mode: 'light',
11  PRIMARY_BACKGROUND_COLOR: '#ffefd5',
12  PRIMARY_TEXT_COLOR: '#DB7093',
13  SECONDARY_TEXT_COLOR: '#333333',
14  PRIMARY_BUTTON_COLOR: '#b9d6f3',
15  SECONDARY_BUTTON_COLOR: '#a1c9f1'
16};

To manage to switch between two themes, let us use Redux. With the help of this state management library, you are going to create a store that will keep an initial value of a theme. Redux will help to change switch between two themes (defined in the previous section) at the run time. This means you do not have to hard code these values every time you want to add a new theme. Every time a theme is changed, the component or the screen will be re-rendered to display the new style attributes.

First, you will have to install the following libraries to create a store.

Copy
yarn add redux react-redux redux-thunk

Apart from redux, the other two packages have important uses. react-redux lets your React Native components connect with the Redux store. redux-thunk is a middleware that enables you to make Redux actions return asynchronous operations. A thunk is a function that wraps an expression to delay its evaluation.

In Redux, the state of the whole application is represented by one JavaScript object. Think of this object as read-only, since you cannot make changes to this state (which is represented in the form of a tree) directly. That is what actions are for.

Actions are like events in Redux. They can be triggered in the form of a user's touch on a button, key presses, timers, or network requests. The nature of each event mentioned is mutable. An action is a JavaScript object. To define an action, there’s one requirement. Each action has its type property. Every action needs a type property for describing how the state should change.

Create a new folder called redux in the root of your project. This directory is going to contain all the files related to Redux. To define an action, create a new file called action.js inside this folder.

There is the only action required right now called switchTheme. It will accept one parameter, the value of the theme.

Copy
1// define type
2export const SWITCH_THEME = 'SWITCH_THEME';
3
4// dispatch actions
5export const switchTheme = BaseTheme => {
6  return dispatch => {
7    dispatch({
8      type: SWITCH_THEME,
9      baseTheme: BaseTheme
10    });
11  };
12};

To change the state of the app when using Redux, or in our case, to change the state of the value of the theme, dispatching the theme from the action switchTheme is the only way.

Next, let us define themeReducer that will take the initial state of the application's theme and action to change that theme.

Copy
1import { lightTheme } from '../styles/theme';
2import { SWITCH_THEME } from './actions';
3
4const initialState = {
5  theme: { ...lightTheme }
6};
7
8const themeReducer = (state = initialState, action) => {
9  switch (action.type) {
10    case SWITCH_THEME:
11      let newState = {
12        ...state,
13        theme: { ...state.theme, ...action.baseTheme }
14      };
15      return newState;
16    default:
17      return state;
18  }
19};
20
21export default themeReducer;

A reducer is a pure function that calculates the next state based on the initial or previous state. It always produces the same output if the state is unchanged. In the above snippet, the current state of this application is the light theme. This theme will change whenever the user is going to press the button to switch it to the dark theme.

To create the store, you will have to modify the App.js file. Start by adding the following import statements.

Copy
1import React from 'react';
2import { Provider } from 'react-redux';
3import { createStore, applyMiddleware, combineReducers } from 'redux';
4import thunk from 'redux-thunk';
5
6import themeReducer from './redux/themeReducer';
7import HomeScreen from './screens/HomeScreen';

A store is an object that brings actions and reducers together. It provides and holds state at the application level instead of individual components. Redux is not an opinionated library in terms of which framework or library should use it or not.

Next, create the following store.

Copy
1const store = createStore(
2  combineReducers({ themeReducer }),
3  applyMiddleware(thunk)
4);

To bind a React Native application with Redux, you do it with react-redux module. This is done by using the high ordered component Provider. It basically passes the store down to the rest of the React Native application.

Copy
1const App = () => {
2  return (
3    <Provider store={store}>
4      <HomeScreen />
5    </Provider>
6  );
7};

In this section, you are going write the logic to consume the state from redux's store as well as make use of ThemeProvider.

styled-components has gives React Native components theming support by a ThemeProvider wrapper component. In the render tree all styled-components such as Container, Title and so on, will have access to the provided theme. Open HomeScreen.js file adds the following import statements.

Copy
1import styled, { ThemeProvider } from 'styled-components/native';
2import { connect } from 'react-redux';
3import { bindActionCreators } from 'redux';
4import { switchTheme } from '../redux/actions';
5import { darkTheme, lightTheme } from '../styles/theme';

In the above code snippet, do note that you are also importing both the theme objects from styles/theme.js file. This is necessary because, initially, you will have to pass a theme value for ThemeProvider to know and display the components accordingly. Then, the redux action switchTheme that is responsible for the change theme, expects a parameter of the current theme value.

Next, modify the render function inside the HomeScreen component. Wrap all of its previous contents inside ThemeProvider wrapper and then add a new component called Button which will be display the contents to change the current theme.

Copy
1class HomeScreen extends React.Component {
2  render() {
3    return (
4      <ThemeProvider theme={this.props.theme}>
5        <Container>
6          <TextContainer>
7            <Title>Themed App with React Native & Styled Components</Title>
8          </TextContainer>
9          {this.props.theme.mode === 'light' ? (
10            <Button onPress={() => this.props.switchTheme(darkTheme)}>
11              <ButtonText>Switch to Dark Theme</ButtonText>
12            </Button>
13          ) : (
14            <Button onPress={() => this.props.switchTheme(lightTheme)}>
15              <ButtonText>Switch to Light Theme</ButtonText>
16            </Button>
17          )}
18        </Container>
19      </ThemeProvider>
20    );
21  }
22}

Now, a question you may ask, how come this.props.theme & this.props.switchTheme are available to the above component. In App.js, which is the parent component for HomeScreen, is not passing any props down the component tree.

Well, from the previous import statements, you are importing two important Redux methods: bindActionCreators and connect. The bindActionCreators maps actions to an object using the names of the action functions. These functions automatically dispatch the action to the store when the function is invoked. As we learned earlier, to change the data, we need to dispatch an action.

To enable this, you further need two things: mapStateToProps and mapDispatchToProps. You have to connect both of them with HomeScreen component. This connection is done by using the connect() method from the react-redux package which connects the current React Native component to the Redux store.

Add the following at the end of component file:

Copy
1const mapStateToProps = state => ({
2  theme: state.themeReducer.theme
3});
4
5const mapDispatchToProps = dispatch => ({
6  switchTheme: bindActionCreators(switchTheme, dispatch)
7});
8
9export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

By passing an interpolated function ${props => props...} to a styled component's template literal you can extend that component's styles. Take a look at the following code snippet, and modify the styles wherever necessary.

Copy
1const Container = styled.SafeAreaView`
2  flex: 1;
3  background-color: ${props => props.theme.PRIMARY_BACKGROUND_COLOR};
4  justify-content: center;
5  align-items: center;
6`;
7
8const TextContainer = styled.View`
9  padding: 15px;
10  border-radius: 5px;
11  border: 1px solid ${props => props.theme.PRIMARY_TEXT_COLOR};
12`;
13
14const Title = styled.Text`
15  padding: 20px;
16  font-size: 24px;
17  font-weight: 500;
18  color: ${props => props.theme.PRIMARY_TEXT_COLOR};
19`;
20
21const Button = styled.TouchableOpacity`
22  margin-top: 20px;
23  background-color: ${props => props.theme.SECONDARY_BUTTON_COLOR};
24  border-radius: 5px;
25  padding: 10px;
26`;
27
28const ButtonText = styled.Text`
29  font-size: 20px;
30  color: ${props => props.theme.SECONDARY_TEXT_COLOR};
31`;

Now, go to the simulator running and you will notice a new button with a text that says Switch to ... name of the next theme. If you have been following this tutorial, you will notice that the initial or current theme is the light mode. By pressing the button, you can switch to the dark mode.

Congratulations! You have successfully integrated redux and styled-components in a React Native app to create style attributes for React Native and manage themes. Using props in styled-components you learned how to manage and write composable components. This is just one of the way to create a themeable React Native app.

To dwell more into styled-components, please refer to the official documentation here.