How to add style to React Native Component Using Stylesheet

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 {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} 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.

render(){
 return (
    <View>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View>
          // add components here
          </View>
        </ScrollView>
      </SafeAreaView>
    </View>
  );
}

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 🙂