Themeable react native (Part 2) — Changing themes
In Part one, we created a theme with base themes and various colour themes. We were able to serve the theme through redux and use styled-components to apply the theme.
Here, we are going to use redux to change the theme of the app to bring the app full-circle.
We will make changes to the login page to allow the user to select the theme they prefer. We will add two Pickers, one for the base theme and another for the colour options.
Actions
We first set up two action creators. The first receives a base theme object and sends a dispatch of type “CHANGE BASE THEME”. The second receives a colour theme object and also fires a dispatch of type “CHANGE COLOR THEME”
Reducer
The reducer discards the current theme object in the initial state and combines the theme object in the action payload with the parts of the theme that do not change
Login
Now we need to tweak the login page to allow the user to change the theme.
We import the theme objects from the store and the two action creators as well. Using mapDispatchToProps, we can access the functions from the Login Component.
We now add two selection inputs and populate them with the base theme and colour theme options respectively. When the user taps any option, we trigger a function that invokes the relevant action creator.
Conclusion
Users love products that they can make their own. Small customizations such as colour can go a really long way
