You like what you Read then Vote!
0 / 5 4.86 21

Your page rank:

We are going to learn how to style react native application. This tutorial is simple and short. it is targeted to beginners and those who are new to react native.

For more reference on react native tutorial, you can go through all the topics we have covered from simple tutorials to project based tutorials here.

If you have a background in web development, on seeing react native style you will think oh it is CSS. But is it CSS for real? No it is not.  Style is a react native component prop. It is written in Javascript but it has some similarity with CSS.

Since it is a prop, all the core and built-in react native components accept a style prop.


The code below shows a simple example of the different between CSS and react native style.

CSS style

  width: 200px;
  background-color: white;

The same style in react native will look like below.

React Native Style

//import StyleSheet

var styles = StyleSheet.create({

      width: 200,
      backgroundColor: 'white'


From the above codes, we can see that there is no pixel or a unit of measurement in react native. All dimensions in React Native are unitless, and represent density-independent pixels.

Also, there is no CSS class, id or selector like you will found within html element you want to style it. Style in react native is a javascript object with key-value pair properties. Each object prop is separated with a comma.

CSS uses hyphen to join two different words like in background-color but in react native, project name with two different words are represented using a camelCase style like backgroundColor.

In React native, every other values that is not of type number uses a quote or double quotes unlike in CSS where you can use color name like white to assign a color to text without like kind of quotes.

React native makes extensive use of Flexbox for page layout. We will not go into details about React Native Flexbox but if you will like to read more about it or understand how it is use in react native application, I will suggest you read my tutorial on React Native Layout With Flexbox


You can manage react native styling in different ways. Below are few options.


We will look at using inline styling which is basically using the style prop in a component and assign an object of a style to it. This is easier to understand with a simple example.

style={{width: 200, height: 40, backgroundColor: 'green'}}

The code above show how to pass a style object value to a style props. This method can serve as a quick and easy way to apply a style and test the effect but it has its own disadvantage when you completely relay on it so much. As you project grows bigger and bigger it can become a night mare to manage an inline style scatters all over the code.


Another way to create a style for your component is through a component property. In this case, the default StyleSheet class will be import to the component. The StyleSheet method create() returns an object containing other style object(s).

The example below will help you understand this concept better.

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',

  inputbox: {
    height: 35,

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,

We can use any of the style object by using the styles property with a dot notation as shown below.

<View style={styles.container}>

This is clearer and it affords us the opportunity to change our style in one place when you need to change a style property. In addition, this way of using style encourages code reuse and maintainability.


There are situations were it is important to extract common style in a separate file and import it to any other file that will make use of it.

An example of common styles can be style properties that we will used in the entire application. So instead of recreating it in every component that requires it, it can be imported and assign to whatever property that needs it.

The way to go about this is to define a styles/common.js where all the variables will be added and exported.

A simple example is shown below to help us better understand this concept.

// styles/common.js

export const PRIMARY_COLOR = '#8aa7ad';
export const PRIMARY_COLOR_DARK = '#8aa5ad';

To use these variables in a component class, we will first of all import it and assign the variables to a property as shown below.

import { StyleSheet } from 'react-native';
import { PRIMARY_COLOR, PRIMARY_COLOR_DARK } from '../styles/common.js';

export default StyleSheet.create({
 backgroundColor: PRIMARY_COLOR,


Another handy way of using style in component is by using a component that accepts a style prop which will in turn used it to style sub-components. This process is regarded as passing context to stylesheets.


Yes, I know that you might be surprised when you see dimension. Don’t worry. We will look at how to use dimension to apply style in react native application.

Remember that a component height and width determines its size on the screen. The easy way to specify the width and height of a component is to add a fixed width and height to style.

Dimension is imported from react native and you can use it to get a user device window width and height which can be helpful in certain situation when applying style.

The code below shows a simple example on how to get dimension.

import {Dimension} from 'react-native';

const {width, height} = Dimension.get('window');

Imagine a situation that we want to load or use different style depending on the height of a device. I personally think that in this situation, using height works better than width. But you have to be careful when using dimension for style or layout. You can take a look at my tutorial on react native layout with flex to learn how to use flexible layout and components in react native application.

Now that we have covered different ways to apply style in react native application, we will go further to create a simple react native application with styling.


This tutorial is created with

"react": "16.0.0-beta.5",
"react-native": "0.49.5",

This version might not be the latest version when you are reading it. If you have any issues as a result of different versions, kindly contact me.

If you have not created a react native application before, I will suggestion you follow my tutorial on how to setup react native development in windows

Follow the steps below

1. Create a new react native project and give it any name of your choice

2. if you are targeting iOS, you should run the command react-native run-ios or react-native run-android to start your application.

3. Open index.js file in the root directory of your application in any IDE of your choice (Visual Studio Code, Atom, etc).

4. Once it is open, copy and paste the code below to the file and save it.

5. Reload your app to see the effect of the changes you have made.

import React, { Component } from 'react';
import {
} from 'react-native';

const onboardContent = 'By choosing us we will help you explore the world in a simple and fun ways and see places you have never seen before. Above all, we will have the opportunity to make new friends.';

export default class App extends Component<{}> {

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.boardicon}>
          <Image source={require('./images/travel.png')} style={{width:200, height:150}} />
        <Text style={styles.welcome}> Explore New World </Text>
        <Text style={styles.instructions}>{onboardContent} </Text>

        <View style={styles.footer}> 
          <TouchableOpacity onPress={() => 'Button has been pressed'} style={styles.startButton}>
            <Text style={{color: 'white'}}>Get Started</Text>

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 100,
    backgroundColor: '#95D3BF',
  welcome: {
    fontSize: 16,
    textAlign: 'center',
    margin: 20,
  instructions: {
    color: '#225344',
    marginLeft: 24,
    marginRight: 24,
    fontSize: 12,
    lineHeight: 18
  boardicon: {
    alignItems: 'center',
    marginTop: 50
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    position: 'absolute',
    bottom: 0
  startButton: {
    width: 300,
    height: 45,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20

Finally, if everything works for you, you will see an app interface that is similar to the screen-shot below.

If you have any questions or suggestion on how to improve this tutorial, kindly contact me through the comment box below.

Please remember to subscribe to my tutorials so that you will be among the first to be notified once a new post is published.

Recent Articles

Related Stories

Stay on op - Ge the daily news in your inbox