Understanding StyleSheet in React-native

In this lesson, we will discuss the Style component. In React Native, we apply styles using the style property, which is accepted by all standard React Native components. Let's look at an example -

      <Text style={{color:"red", fontWeight: "bold"}}> Hello to every One </Text>

In above code "style" is property applied to Text element to make text bold and red color. This way of writing is known as Inline Style. As we are writing the style behind the tag itself.

The other way to apply style is using Style API. Its simple to implement , We use create method of styleSheet to create objects. Then for style property use object created by create method. Lets see below example.

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

function AppPro(): JSX.Element {
   return (
    <SafeAreaView>
      <View style={styles.container}></View>
    </SafeAreaView>

  );
}
const styles = StyleSheet.create({
  container :{
    margin:20,
    marginTop: 30,
    backgroundColor: "gray"
}
});

export default AppPro;

We can also apply combine styles to an element. i.e. inline style as well style from object. Lets see below example:

function AppPro(): JSX.Element {
    return (
      <SafeAreaView>
        <View style={styles.container}>
        <Text style={{color:"yellow", fontWeight: "bold"}}> Hello to every One</Text>
         <Text style={styles.boldHeading}>Welcome to React-Native world</Text>  
        <Text style={[styles.RegularTextHeading, {fontWeight: "bold"}]}> My Learning On StyleSheet</Text></View>
      </SafeAreaView>
    );
  }
const styles = StyleSheet.create({
  container:{
    margin:20,
    marginTop: 30,
    backgroundColor: "gray"
},

  boldHeading: {
    fontWeight: 'bold',
    color: "red",
  },
  RegularTextHeading: {
    fontSize: 24,
    color: 'green',
  },
});

Benifits of using StyleSheet create over inline style:

It maintains more readable code; the render function becomes smaller.
The name you choose for a style serves as a way to document code (giving meaningful names to component styles).
The one measure difference of using styleSheet.create is to improve app performance . In inline style new object is created each time a render function gets called.

Now If we look into above example , for Container style object we have defined flex:1 we often used our app container to be flex: 1 to take all the height of the available screen.

React-native uses Flex to ensure layout and arrange the component. It uses the concept of primary and secondary axis.

We use flexDirection property to determine the primary axis. We will dive little deeper into Flex. Lets understand this with an example

const styles = StyleSheet.create ({
container :{
    margin:20,
    marginTop: 30,
    flex: 1,
    backgroundColor: "linen",
    flexDirection: "row",
},

flexDirection - defines the primary axis . By default flexDirection takes value. "column" . other values it takes are row/column-reverse/row-reverse

Similarly you can try with row-reverse/ column-reverse to see the different output.

justifyContents - it defines how children component of container are aligned with primary axis. the default value is "flex-start" . The other values are flex-end/space-around/space-between. Lets see below example with output

 function FlexExmaple(): JSX.Element{

 return (
     <View style= {styles.container}>
         <View style={[styles.square, {
             backgroundColor :"green"}
             ]}></View>
         <View style={[styles.square, { backgroundColor :"blue"}
         ]}></View>
         <View style={[styles.square, {backgroundColor :"black"}]}></View>
         <View style={[styles.square, {backgroundColor :"yellow"}]}></View>

     </View>
    );

 }

 const styles = StyleSheet.create ({
 container :{
     margin:20,
     marginTop: 30,
     flex: 1,
     backgroundColor: "linen",
     flexDirection: "row",
    justifyContent:  "flex-start"  ,
 },
 square : {
     width:60,
     height: 60,
 },
 })

flexDirection: "row", justifyContent: "flex-start"

container :{ margin:20, marginTop: 30, flex: 1, backgroundColor: "linen", flexDirection: "column", justifyContent: "flex-end" , },

flexDirection: "column", justifyContent: "flex-end"

container :{ margin:20, marginTop: 30, flex: 1, backgroundColor: "linen", flexDirection: "column", justifyContent: "space-between" , },

flexDirection: "column", justifyContent: "space-between"

container :{ margin:20, marginTop: 30, flex: 1, backgroundColor: "linen", flexDirection: "column", justifyContent: "space-around" , },

flexDirection: "column", justifyContent: "space-around"

space-between and space-around are similar except there will be space between margins also in case of space-around. i.e (left and right space in case of flexDirection:"row" and top and bottom margin in case of flexDirection:column)

alignItems - It is used to describe items alignment along the cross axis. "flex-start " is default value.
It consider alignItems for the secondary axis . i.e what we defined for justifyContent

 container :{
     margin:20,
     marginTop: 30,
     flex: 1,
     backgroundColor: "linen",
     flexDirection: "column",
    justifyContent:  "center" ,
    alignItems : "center",

 },

The above code will produce output as

justifyContent: "center" , alignItems : "center",

container :{ margin:20, marginTop: 30, flex: 1, backgroundColor: "linen", flexDirection: "column", justifyContent: "flex-end" , alignItems : "center", },

 const styles = StyleSheet.create ({
 container :{
     margin:20,
     marginTop: 30,
     flex: 1,
     backgroundColor: "linen",
     flexDirection: "row",
    justifyContent:  "flex-end" ,
    alignItems : "stretch",

 },
 square : {
     width:60,
    //height: 60,
 },
 })

for stretch , we need to remove the height constraint of child component. Otherwise it will not allow to stretch the view.

Please try out different combinations and check the output for better understanding.

alignSelf : justifyContent and alignItems are applied to the container, but there is one property that can be directly applied to children. It can be used to override alignItems property of the container. Lets demonstrate with example.

Lets think we want to stretch the green box, so we explicitly need to remove height constraint of green view and override alignItems property (which is applied as center for the container )


 function FlexEmaple(): JSX.Element{
    return (
     <View style= {styles.container}>
         <View style={[styles.square, {
             backgroundColor :"green",
             height: null,
             alignSelf:"stretch",}
             ]}></View>
         <View style={[styles.square, { backgroundColor :"blue",
         alignSelf:"flex-end",}
         ]}></View>
         <View style={[styles.square, {backgroundColor :"black"}]}></View>
         <View style={[styles.square, {backgroundColor :"yellow"}]}></View>

     </View>
    );

 }

 const styles = StyleSheet.create ({
 container :{
     margin:20,
     marginTop: 30,
     flex: 1,
     backgroundColor: "linen",
     flexDirection: "row",
    justifyContent:  "flex-end" ,
    alignItems : "center",

 },
 square : {
     width:60,
    height: 60,
 },
 })

In the above snippet , we have overridden the alignItems property of green and blue view by assigning "alignSelf" property directly on the specific child component. Below is the output.

Summary: This lesson covers the use of styles in React Native, including inline styles and Style API with StyleSheet. It explains how to combine styles, the benefits of using StyleSheet.create, and the use of Flex for layout and alignment. Examples are provided for better understanding. Additionally, it discusses the properties flexDirection, justifyContent, alignItems, and alignSelf for controlling layout and alignment of components.

Thanks Hitesh Choudhary for providing such a nice explanation for learning React Native