Switch Themes with Redux and Styled Components in React Native

hey everyone welcome back in today's video we'll talk about switching themes with style components and redux let's get started okay we're starting with a blank project here let's create a home screen that we can work with a new folder put it in a screens folder a new file and we'll call it home screen jeaious we'll just put some basic scaffolding in we'll save it let's go back to apps yes and then we'll import it and pour home screen from screens home screen oops screens instead of the default layout we'll just put our home screen in here now we can get rid of the styles object and we can get rid of all the imports from react native back in our home screen let's pull in the styled components package so we'll open our terminal NPM install style components great now we've got that installed now I'll put together just a little layout for us and then we'll come back and talk about it while you're watching please make sure you like the video and if you're new here please subscribe for more videos like this [Music] [Music] ok so now we've got a very simple layout here we'll want to make sure we import style from styled components we have a parent container that'll take up the entire height of the screen I'll line everything in the center and then we give it a background background color of white we have a container for the text just so that we can add a border around it with a color a black a little bit of padding and a border radius and then we've got a button that we can click to be able to change the theme will change from dark to light mode where we give it a background color some margin around it some padding and a border radius and then the text inside we just give it a font size font weight and a color of white next up we're gonna want to create a file that will contain all of our theme colors so we'll create a new file we'll just call it same j/s and we're just gonna have two seams we'll have a dark theme and a light seam so we'll export an object and we'll call it dark theme and we'll do the same with the light theme so we'll give each one a mode property call this one dark and this one light and then we'll want to fill in all of our colors [Music] so for this example we're gonna have a background color a text color a button color the button text color and then the status bar style which will control whether this is light or dark in our dark theme we have a dark background color white text blue button and then white text on the button and then we want to have a white status bar in the light theme our background color is white the text color is a dark grey the button color is a purple the text on that button is white and then we set the status bar to the default now that we've got our layout and our themes set up let's pull in all the packages that we need for redux so we'll open our terminal NPM install we need three we need redux you need react redux and we need redux dunk let's go ahead and install this in redux the entire state is represented as a single javascript object think of it as a read-only because we can't make changes directly to the state this is where actions come in think of actions as like an event any time somebody presses a button saves a setting anything like that so let's create an action to handle our theme switching close the terminal will create a new folder called redux and in that folder we'll create a new file will call it theme actions actions have one requirement they need a type property to describe how the state should change so we'll call our switch themes we'll export a constant call it switch theme only equal that to the string switch theme so to actually change this theme we need to accept in a parameter which will be the theme that we want to switch to and then we need to dispatch it so we'll create our action here export constant switch theme will accept in the theme we want to switch to and now we need to return a dispatch I'll do return dispatch then we'll call the dispatch method and we'll pass in an object to it the type which is what we declared above switch theme and then the theme that we want to switch to so this action defines what we want to do well now need to set up a reducer to actually mutate the state so we'll create a new file in the Redux folder we'll call it theme reducer and now the reducer will take the initial state or the current state of the app along with the action that we want to call and it'll change the state so initially we'd like to have the light team visible so we'll import that first we'll import it from MJS remember that's this object next we need to import the action that we want to call so we'll import switch theme from actions your theme actions excuse me and remember that's that's this method right here next we'll want to set up the initial state do constant Ischl state is equal to an object well we'll have a theme and we'll pass in the light theme now we can set up the reducer con steam reducer and it will accept in two parameters the state and the action so for our state we want to set it initially to the initial state and then the action that we want to complete now we want to figure out what action that we're taking so we'll switch between them switch action dot type and the type is what we have here is what we defined is switch theme so for the case of switch theme we want to return whatever theme was passed into the action will return theme an action theme if you had any other actions on your theme you define them here in another case statement but we don't so we'll just return a default one in case there isn't one and then we'll just return the default State now let's export the theme reducer and let me spell initial state correctly now we need to create our store so let's head back over to app yes and let's start importing a few things first we need to import the provider which comes from react redux next we need to import three things from redux itself we need the create store apply middleware and combine reducers then let's import thunk and thunk allows you to apply middleware asynchronously lastly we need our theme reducers will import theme reducer from redux do you reducer oops looks like I have a space in there okay we'll save that now creating our stores pretty simple well store it in a variable called store we call the create store method we pass it combined reducers and in that will put our theme reducer in the second parameter is apply middleware where we pass in thunk to give our app access to the store we have to wrap the entire thing in a provider so instead of just returning the home screen we'll wrap home screen and a provider and then pass it in the store now our entire app has access to the store so let's make use of the theme actions in the store and our home screen first we're going to need to import a few things from style components we're going to need the theme provider and to access the state we're going to need to import the youth selector and use dispatch methods from react redux use selector will allow us to access the state and then use dispatch will allow us to dispatch actions we also need to import the actions that we plan on using so import switch theme from redux theme actions and lastly we need to import the actual themes themselves so we'll employ a lightning and dark theme from our theme file now let's get access to our theme and our dispatch so for theme we'll create a variable theme which is equal to the use selector method at this state and we'll return the state that theme reducer that theme now this comes from our theme reducer file and our theme reducer method theme right here back in our home screen let's get access to the dispatch we'll call a dispatch which is equal to used dispatch let's update our button to be able to actually switch themes we want to check whether if it's in the light theme then we'll switch it to the dark theme and vice-versa so in this case we'll actually need two buttons let's check whether or not we are in the light theme will say seam dot mode is equal to light and remember in our theme objects we setup a mode property and if it is light then we'll return the first button otherwise we'll create a second button it'll say change to light theme when we click the button we want to call dispatch with the switch team method and then we want to pass it in which theme we want to switch to in this case we want to switch to the dark theme and we'll just copy this paste it onto our second button and we'll change it to light theme so now when we press the button we should see it switch from dark theme to lightning right here change the light theme change the dark theme now of course we still need to change all the colors based on what scene we're currently in and that's where styled components come into play you can see we imported the theme provider from style components up here now let's wrap the entire component in that theme provider component and the only thing that we need to pass into this theme provider is the theme itself so we'll say theme is equal to theme so eventually what should be passed in here in this theme object is one of these objects this theme object will now be available to any styled component you have so now we just need to change all the colors that we explicitly set so let's first change the background color in our container we do that by dollar sign curly braces and we get the props variable passed in and now we want to get our primary background color so we want to get this color for each one so we'll say props that theme dot primary background color now let's change the themes and see if it works and it does so let's do that for the rest of the colors we'll just copy this for our border color we'll just use the text color in this case that's this outline you can see now it changes from dark to white in our text we want to change that color to the primary text color as well so now the text will change and now in our button we'll change that to the primary button color so it should change from light or from blue to purple and finally we'll do that for the button text oops button text color now in our case is white in both instances now the one thing you may notice that the status bar is not changing colors it's always just set to the default and that won't look very good if it's on a dark background so let's change that now we need to import the status bar from react native we'll add it in above the container and now the bar style property is what changes the color remember back in theme we set the status bar style to be light content when it's on a dark background and default what is when it's on a light background so all we need to do is pass in theme which we're getting from right here that's status bar style oops and close out that component and now you can see is that on the dark background we have a light status bar vice-versa so that's about it for this video if you have any questions please leave them in the comments and if you would like the video I'd really appreciate that it helps me out quite a bit the source code as always is available on my patreon the link is in the description and I'll see you guys back in the next video [Music]

Channel: DesignIntoCode

Views: 15,703

Keywords: React Native, React Native UI, React Native Expo, React Expo, React Native iOS, iOS, Design, Javascript, JS, React, react native tutorial, react native ui, react native design, react native ui design, redux, react redux

Id: eaA7s3jvng8

Length: 17min 47sec (1067 seconds)

Published: Wed Jun 03 2020