Themed React Native app with redux, and styled-components
In this article, I will show how to move from a design to a fully customize-able theme. We will use the three main libraries described below and any additional as the need arises. Luckily, many of us are already familiar with redux, react-native and styled components.
Design
First we need to see a design so as to understand what styles we need to apply. If you work with designers or are provided a ui-kit, then you are in luck. If not, then it would be important to take a step back and really think about what styles your design are made up of. Especially those that are not explicit.
We will use the design below to create our theme.
From the design above, there are a few things that we can deduce. Having an understanding of the how react native styles work, there are a few styles that we can list in our theme.
FontSize, FontFamily, BackgroundColor, Color
There are many aspects of the style, but i will limit myself to just those mentioned above for this example. Using the basic react native stylesheet, we can make the user interface. But first we will make a simple react-native project:
react-native init themeable
cd themeable npm install --save redux react-redux redux-thunk styled-components
react-native run-android
npm start
We can now add a login screen in the same level as our App.js file.
touch Login.jsAnd we will override our App.js to show the login page.
Redux
Now that the View looks fine, we can connect it with a basic redux store. The redux store is where we will create our theme and serve the app.
To set up our store, we will create a folder called store and add two files: our themeReducer a theme file.
Why Redux anyway? Redux will provide us the ability to customize the theme as we desire. This means we don’t have to hard code the styles. Redux can also change the theme in run-time, and will cause all affected component to re-render making style changes immediate.
We also need to connect our app to the store. Add this code to App.js
As you can see, the theme is provided in the initial state of the reducer by combining all theme objects into one. I know the theme.js looks complicated, but it is simple. Here is an illustration.
At the bottom, we have the base, the styles that can never change such as FontSize, FontFamily.
Then we have our themes. Primarily Dark and light. They mostly affect BackgroundColor and Color.
Finally, we have our color options. They affects the colors as well, but for specific elements such as buttons and headers.
Styled Components
Now that the View can access the theme as a prop. Let us make use of the theme with styled components. I will convert the user interfaces into styled components and substitute the fixed values for the theme props so that they are changeable.
We have converted each of the styles from the styles and created a styled component out from it.
To make changes in our theme, we can dispatch actions to redux that cause this change. To keep this article short, I will directly edit the initial state in our reducer:
// light-blue
const initialState = {theme: { ...base, ...lightTheme, ...colorOptions.blue }};// light-orange
const initialState = {theme: { ...base, ...lightTheme, ...colorOptions.orange }};// dark-blue
const initialState = {theme: { ...base, ...darkTheme, ...colorOptions.blue }};//dark-orange
const initialState = {theme: { ...base, ...darkTheme, ...colorOptions.oranger }};
Thank you for reading through this mess. Please give your suggestions on how to do this better.
The repository can be found here
Here are some more useful resources
To persist the theme even after user closes the app:
some more RN libraries
