Learn About Styling In React Native

Introduction

 

React Native is a JavaScript framework to build mobile applications which are supportable by both Android and iOS platforms. It is just code once and then React Native apps are available for both Android and iOS platforms, which helps to save the development time.

 

To know details about React Native setup for Android, visit the below link.

• How To Set Up React Native Development Environment For Android Apps

Description

 

In this article, we are going to learn how to apply style to React Native applications. There are multiple ways we can style the React Native elements. Basically, styling in React Native is a little bit different from the writing style in HTML or others like Angular or JavaScript.

 

Styling in React

 

In React Native, names are written using camel casing. For example -

• margin-top: - marginTop
• text-align: - textAlign

While we do not use % or px for styling.

 

Syntax

 

style={add style here}

 

There are multiple ways styling can be done in React.

• Inline style
• Referencing styles defined within a Stylesheet
• Declaring stylesheets in a separate file.
  

Before starting the styling part, we are removing the extra line of code from the App.js file and make it simple so that we easily target React Native elements.

 

Change the App.js file code like below.

import React, { Component } from "react";
import { View, Text } from "react-native";

class App extends Component {
  render() {
    return (
      <View>
        <Text>Hi React Native</Text>
      </View>
    );
  }
}

export default App;

O/P

 

The output should be like below.

 

 

Inline style

• In React Native, it lets you add CSS inline, written as attributes and passed to elements.
• An inline style contained key value pair having property and its value.
• Multiple inline styles applied at once.
• Syntax: - style={{property: ‘values’}}

Example

 

In the below example, I have added a style attribute with margin-left and margin-top properties and set the value as 20 for View component. In the second style, we are setting color as red and font size as 40.

import React, { Component } from "react";
import { View, Text } from "react-native";

class App extends Component {
  render() {
    return (
      <View style={{ marginLeft: 20, marginTop: 20 }}>
        <Text style={{ fontSize: 40, color: "red" }}>Hi React Native</Text>
      </View>
    );
  }
}

export default App;

The o/p will be displayed as below.

 

 

Referencing styles defined within a Stylesheet,

• This is another way to add style to React Native element.
• A StyleSheet is an abstraction similar to CSS StyleSheets.
• We will import StyleSheet from React Native to create a style object.
• StyleSheet helps to move style from render function.
• create helps to create style objects with an ID which is further used to reference instead of rendering it again.

Example

 

In the below example, I have imported StyleSheet from react-native and created style object by using StyleSheet.create method.

import React, { Component } from 'react'
import { StyleSheet, Text, View } from 'react-native'

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.message, styles.warning]}>Hi React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginLeft: 20,
    marginTop: 20
  },
  message: {
    fontSize: 40
  },
  warning: {
    color: 'red'
  }
});

export default App;

O/P

 

The output should be like below.

 

 

Declaring stylesheets in a separate file,

• Putting styles in the separate file might seem like a better approach and feel more familiar.
• In this approach, we will create a stylesheet definition in a separate file.
• We can name it whatever we want but be sure the extension is ‘’.js’’.

Example

 

In this example, we will see “How to add a separate file for styles and use it.”

• Create a file with any name in a project like mystyle.js
• Import StyleSheet from react-native
• Create a style object with an ID
• Export that creates style object.
• Import that file into component code for reference.(Where we want add style to component)
• Build code or reload

Code

 

Style.js

import { StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    container: {
        marginTop: 150,
        backgroundColor: '#ededed',
        color: "green",
        fontSize: 20
    }
})
export { styles}

App.js

import React, { Component } from 'react'
import { View, Text } from 'react-native'
import { styles } from "./styles"

class App extends Component {
  render() {
    return (
      <View>
        <Text style={styles.container}>This is React Native example.</Text>
      </View>
    );
  }
}

export default App;

O/P

 

The output should be like below.

 

 

Conclusion

 

In this article, I have explained how to decorate components using style and some common approaches of adding styles in React Native for Android apps. Hopefully, it will help you to understand.