Styling The React Native Way

Credit: Unslpash — Blake Connally

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 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 fontWeight whereas View component does not. However, some of the styles are similar but not exactly the same. View supports shadowColor while Text supports textShadowColor. Lastly, you have to make not that there are a few platform specific styles such as 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 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.

Getting Started with React Native in 2019: Build Your First App_Learn how to build your first React Native app with important basic concepts and where to go from here!_hackernoon.com

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 App with StyleSheet object. It takes a JavaScript object as it does above, and returns a new 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.

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 App.js called 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 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 style prop.

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 color property.

Building an App: Dark/Light Themes

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, lightStyles and 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.

The file 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👇

amandeepmittal/react-native-workspace_⚛️ + 📱 React Native Things. Contribute to amandeepmittal/react-native-workspace development by creating an account on…_github.com

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 📧