: Unslpash — Blake Connally Credit React Native comes with many in-built components that you can use to style the cross-platform application. Styling a mobile application is important. I cannot put enough emphasis on how important it is for a mobile app to have a pleasing design and good use of colors. Without a polished User Interface of an application, a potential user will be repelled by the lack of design in the mobile app. React Native uses plain JavaScript to style. In this tutorial, you are going to explore different ways to style a React Native app by getting some hands-on experience and learning tips along the way. Introduction React Native uses JavaScript to style, 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. If you do not have any idea what CSS is, I’d look you to stop right here as there would be no advantage for you reading this tutorial. You need to understand a bit of CSS to continue reading the tutorial below. If you understand what means, then you are good to go. backgroundColor: 'blue’ 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, component supports whereas component does not. However, some of the styles are similar but not exactly the same. supports while supports . Lastly, you have to make not that there are a few platform specific styles such as . Text fontWeight View View shadowColor Text textShadowColor shadowPropTypesIOS Different Ways to Style a React Native App There are different ways you can add styles to your React Native component. First one is . See the example below. inline styling The result of the above code of snippet is following. In my previous article on about object. It is the second way. Getting Started with React Native in 2019 StyleSheet _Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com Getting Started with React Native in 2019: Build Your First App Available from React Native API, by importing and using , 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. StyleSheet 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 with object. It takes a JavaScript object as it does above, and returns a new object from it. There are no classes or ids in React Native like in web development. holds is that when creating a new style object every time, helps to create style objects with an ID which is further used to reference instead of rendering the whole component again and again. App StyleSheet Stylesheet To create a new style object you use **StyleSheet.create()** method. Another advantage this method StyleSheet Encapsulation of Styles 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 called . App.js AppStyles.js Next step is to import this file inside . App.js 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. Using arrays to pass styles In inline styling, you must have observed that it is nothing but an object that starts with a 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 prop. style style 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 property. color Building an App: Dark/Light Themes In this section, you are going to build a simple app called 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. light/dark mode First, let us define styles for it. Open the external styling file. AppStyles.js A lot is going on here. First, the two different color variables are defined inside a single 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, and . 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. Colors lightStyles darkStyles Lastly, there is a function that gets exported that returns theme based upon a boolean value. Dark Theme’s value is returned if its true otherwise light theme is returned. darkStyles The file is a clear representation of structuring styles in a React Native app. This file is then imported inside the that has the following content. AppStyles.js App.js 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. is the method that reverses the boolean value for the dark theme accordingly. Next, inside the 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. toggleTheme render() You can see this in action below. You can find the complete code for this example in the Github Repository below👇 _⚛️ + 📱 React Native Things. Contribute to amandeepmittal/react-native-workspace development by creating an account on…_github.com amandeepmittal/react-native-workspace 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 below to receive 📧 subscribe to my weekly newsletter all my tutorials straight in your inbox

Different

Keep

2022 - HackerNoon Contributor of the Year - Low Code

2022 - Most Authentic Developer Advocate of the Year

Newsletter

Portfolio

Nominated for 2022 - HackerNoon Contributor of the Year - Low Code

Nominated for 2022 - Most Authentic Developer Advocate of the Year

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Styling The React Native Way

Styling The React Native Way

Too Long; Didn't Read

Companies Mentioned

Aman Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Styling The React Native Way

Too Long; Didn't Read

Companies Mentioned

Aman Mittal

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES