👨💻Developer 💜 Nodejs, React Native, Expo | Tech Writer at Draftbit| 2.5M+ views on Medium
backgroundColor: 'blue’ means, then you are good to go.
React Native comes in with many built-in components, each having its own specific set of styles. These specific styles may or may not be applicable to other components. For example,
Text component supports
View component does not. However, some of the styles are similar but not exactly the same.
textShadowColor. Lastly, you have to make not that there are a few platform specific styles such as
There are different ways you can add styles to your React Native component. First one is inline styling. See the example below.
The result of the above code of snippet is following.
In my previous article on Getting Started with React Native in 2019 about
StyleSheet object. It is the second way.
Available from React Native API, by importing and using
StyleSheet, you create a style object and refer to each style individually. This brings the separation of styles from the render method and helps you organize the code. Also, it promotes re-using styles across components.
This snippet of code will have the same effect on rendering on a mobile device. The only thing changed here is being separation of styles inside the component
Stylesheet object from it. There are no classes or ids in React Native like in web development. To create a new style object you use
StyleSheet.create() method. Another advantage this method holds is that when creating a new style object every time,
StyleSheet helps to create style objects with an ID which is further used to reference instead of rendering the whole component again and again.
In React Native, styles are scoped to the component rather than the whole application. We have seen one preferred way of defining styles used commonly by the React Native community. There is another way to define styles, to organize your application code in such a way that it becomes easier to keep track of them when refactoring, or when the application starts to become huge. In this second way, you declare all the styles related to a component in a separate file. Then import that styles file inside the component file. Here is an example for you. Create a new file next to the
Next step is to import this file inside
The demo runs and produces the same result as before. This separation of styles in a file other than the component file has its own advantages. It increases the reusability of other style objects.
In inline styling, you must have observed that it is nothing but an object that starts with a
style prop and an object is passed with key-value pairs. Similarly, you can use an array that can contain multiple key-value pairs as the value of the
The following is the result for the above snippet.
Do notice that, the last style passed in overrides the previous style when there is a duplicate
In this section, you are going to build a simple app called light/dark mode toggle. It contains a button with some text with a dark background of its own and a light colored background. When the user clicks the button, the background of the app changes to dark mode and the text on the button changes to light mode.
First, let us define styles for it. Open
AppStyles.js the external styling file.
A lot is going on here. First, the two different color variables are defined inside a single
Colors object. Then, there are two different container objects, one for the background and one for the button. Both of these container objects then re-used inside the StyleSheet objects,
darkStyles. Similarly, to define the background color, we make re-use of the color object such that we do not have to write the value of each color twice.
Lastly, there is a function that gets exported that returns theme based upon a boolean value. Dark Theme’s value
darkStyles is returned if its true otherwise light theme is returned.
AppStyles.js is a clear representation of structuring styles in a React Native app. This file is then imported inside the
App.js that has the following content.
By defining the state, you can declare the default value of the dark theme to be false such as it allows the light theme to be the default.
toggleTheme is the method that reverses the boolean value for the dark theme accordingly. Next, inside the
render() you are passing the current value of dark theme from the state. This function is then used to apply the correct theme or set of styles based on the boolean value.
You can see this in action below.
You can find the complete code for this example in the Github Repository below👇
I often write on web technologies, but these my main concern is to provide content on React Native. You can either follow me on Medium or you can subscribe to my weekly newsletter below to receive all my tutorials straight in your inbox 📧
Create your free account to unlock your custom reading experience.