How to add Styles in React Native

Hi everyone. Today we’re gonna learn how to add styles in React Native.

In the previous article we wrote our first code to display a content on Mobile App UI. For that we created a content and registered it. Then, we got an output as given below.

Hello Word with React Native

Although we got what we wanted onto the UI, it doesn’t feel like an attractive UI. We can barely see the ‘Hello World’ text up in the UI. So, in this tutorial we are going to talk about how to add styles in React Native to make our app more attractive.

Getting Started

As a reminder, I’ll put the previous code of ‘App.js’ here, that we created a  component.

//Import a library to help to create a component.
import React from 'react';
import { Text } from 'react-native';

//Create the component.
const App = () => {
  return(
    /*This code tells react native to render some text to the screen of the device.
*/
    <Text>Hello World!</Text>
  );
}

//Render it to the device.
export default App;

Styling with React Native is little bit similar to CSS(Not the syntax). But, if you have worked with web applications, you may have experienced that copying bootstrap files or any other CSS fille, makes it a lot easier for styling. But in React Native, we have to do styling by ourselves.

Adding Styles

Rather than creating a separate styling sheet, we place our styling codes inside same file. First, we create a new object under our component and name it ‘styles’ as mentioned below.

const styles = {

}

Inside this object, we are going to add styling for each element in the ‘App’ component. Unlike in CSS, we don’t add id or class properties for elements. We create properties inside the object we created and add styles for each element in the component. First, I am going to increase the font size of our text. So, we create a property called textStyle and add styles.

const styles = {
  textStyle: {
    fontSize: 20
  }
}

Now you have to create a property inside “<Text>”element to add the style to text as given below.

const App = () => {
  return(
    <Text style = {styles.textStyle}>Hello World!</Text>
  );
}

First Styled Output

Now you have done everything to increase the font size of the text. Let’s run the app again and check it out.

You should get the above mentioned UI. As you can see font size has been increased now.

So, this is the way you add styles in react native. Let’s add more styles for this UI and make it attractive.

First of all, wrap the ‘Text’ tag up with a ‘View’ tag. View tag is something little bit similar to ‘div’ tag in HTML. It covers an area in your UI and you have to give it a width and a height. Make sure, you don’t have more than one root element inside return method. Because, there can be only one root element. Other elements should be inside the root element. Before we add the View tag, we have to import it as given below.

import { Text, View } from 'react-native';

Then, we change the code inside the return method as given below.

    <View>
        <Text style = {styles.textStyle}>Hello World!</Text>
    </View>

Now we have entered a root element and inside it we have add ‘Text’ tag.

Now enter styles inside ‘styles’ object as following.

 const styles = {
    viewStyle: {
        backgroundColor: '#04A5FA',
        justifyContent: 'center',
        alignItems: 'center',
        height: 60,
        paddingTop: 15,
        shadowColor: '#000',
        shadowOffset: { width:0, height:2 },
        shadowOpacity: 0.2,
        elevation: 2,
        position: 'relative'
    },
    textStyle: {
        fontSize: 20,
        fontWeight: 'bold'
    }
};

Now, add ‘viewStyle’ property inside ‘View’ tag.

    <View style={styles.viewStyle}>
      <Text style={styles.textStyle}>Hello World!</Text>
    </View>

So, let’s run the app and see how this styling has affected our UI.

Styled Hello Word on React Native app

Considering to the UI we had, we have a much better one now. I didn’t and I am not going to explain each and every style property to you. It’s useless to study styles and remember it and apply them in code. You have to self search them when you need and apply it in your code. So, now you know how to add styles in React Native. Let’s continue our tutorial in the next article.

Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *