Home » React-native » How to add style to React Native Component Using Stylesheet

How to add style to React Native Component Using Stylesheet

Beginner React-native

In this article, we learn about how to add style to React Native Component Using Stylesheet, it is to CSS which used on the web. React-native comes with inbuild components and these components support a specific type of style. some set of style are similar for multiple components but some are different like Component View use shadowColor, whereas Component Text use textShadowColor . You can add style inline or you can add a separate style.js and use this style in multiple screens or you can reuse these styles in multiple screens you need not create a new style on each screen. this concept is the same as we create a constant of string and colors and reuse these in the whole project. also, I request you to assign style to view it will work properly in both Android/iOS

For example: borderColor does not work in iOS if you assign directly to the Text component, you need to use separately borderLeftColor, borderRightColor, borderTopColor, borderBottomColor.

1. Import the following components

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

2. Usage of the stylesheet in the render method

Firstly add SafeAreaView which is used to display header and footer in the latest notch smartphones, also add StatusBar with style then add scrollView.

 return (
      <StatusBar barStyle="dark-content" />
          // add components here

You can add stylesheet in two different ways first inline and create another stylesheet so that we can reuse styles

How to add Inline style to component

Let’s consider a component View

<View style={{width: 50, height: 50,  backgroundColor: 'transparent'}}>

This is how you can add inline-style

How to reuse style in for multiple components

You can add styleSheet like below:

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  engine: {
    position: 'absolute',
    right: 0,
  body: {
    backgroundColor: '#FFFFFF',
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: '#000000',
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: '#000000',
  highlight: {
    fontWeight: '700',
  footer: {
    color: '#000000',
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',

And just use above styleSheet like below

<View style={styles.body}>

There are many other ways to use stylesheet like use Array of style, add references to the stylesheet

Let’s look at the array of styles:

<View style={[{color: 'red'},{color: 'black'},{color: 'yellow'}]}>

Inline and references to styleSheet:

<View style={[styles.container,{color: 'blue'}]}>

To know more about how to add style to React Native Component Using Stylesheet please check this post React-native styling View, Flex Dimensions, Flexbox

Thank you 🙂



Related Posts

6 thoughts on “How to add style to React Native Component Using Stylesheet

  1. Hi, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot
    of spam comments? If so how do you reduce it, any plugin or anything
    you can recommend? I get so much lately it’s driving me crazy so any assistance is very much appreciated.

  2. Hi there, I discovered your web site by the use of Google whilst searching for
    a similar topic, your web site came up, it seems great. I’ve bookmarked it in my google bookmarks.

    Hello there, just become alert to your weblog through Google, and found that it’s
    truly informative. I’m gonna watch out for brussels. I will be grateful when you proceed this
    in future. Numerous people might be benefited out
    of your writing. Cheers!

Leave a Reply

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