Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native: Styling
3.
Style attributes
4.
Example Application
5.
Frequently Asked Questions
5.1.
Which styling is best for React?
5.2.
What does React Native use for styling?
5.3.
Is it really worth investing in React Native in 2022?
6.
Conclusion
Last Updated: Mar 27, 2024
Easy

React Native Styling

Author Vivek Goswami
1 upvote
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In React Native, you can style your elements in a few different ways.
The style property can be used to add inline styles. However, this is not the greatest practice because the code can be difficult to read.
Let us assume that you have a basic understanding of programming languages and are familiar with basic React Native Introduction. In this blog, we will use the Stylesheet for styling

So let us start with the basic idea of what Styling in React Native is.

Also see, React devtools

React Native: Styling

JavaScript is used for styling in React Native. You can generate an object of style values and provide them to the component as props because React components support the style prop. The style names operate precisely like CSS, only they're written in camel-case (e.g., backgroundColor).
The complexity of your React Native application will determine how you style it. You can use StyleSheet.create to establish various styles for your application as it becomes more complicated.
The more complicated your program is, the more you should divide down your styles into smaller, reusable code chunks. To obtain a more modular code structure in complex applications, create a theme with your desired font sizes, padding, margins, and graphics.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Style attributes

Some attributes for Styling the element are mentioned below:

  • Color Values:
    In React Native you can specify color in multiple ways.
    Predefined color values:  e.g. red, gold, coral.
    Hexadecimal: #f0f(#rgb), #ff00ff(#rrggbb), f0ff(#rgba), #ff00ff00(rrggbbaa).
    RGB: 'rbga' and rgb(255, 0, 255) (255, 0, 255, 1). Red, blue, green and alpha are represented by the letters r, g, b, and a, respectively. 
  • Flex Direction:
    The flow of components in a flex container is determined by the flexDirection attribute. We're changing the default setting for flexDirection from column to row here.
  • Flex:
    The flex attribute specifies how much space the child component will take up in the container in the flex-direction direction. We're using flex value 1 for both child components in this example. This will split the container in half and give each part one portion. 

Example Application

Now let’s look at an example of styling in React Native. We have created a view and styled it with different colors and have made 4 different rows and labeled them too.

App.js


import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class App extends Component<Props> {
  render() {
    return (
      <View
        style={{
          flex: 4,
        
          justifyContent: 'center',
          backgroundColor: '#fff',
          alignItems: 'fit',
        }}>
        <View style={{ flex: 1, backgroundColor: 'grey' }}>
          <Text
            style={{
              fontSize: 20,
              color: '#fff',
              textAlign: 'center',
              textAlignVertical: 'top',
            }}>
            Row number 1
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: 'orange' }}>
          <Text
            style={{
              fontSize: 20,
              color: '#fff',
              textAlign: 'center',
              textAlignVertical: 'top',
            }}>
            Row number 2
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: 'black' }}>
          <Text
            style={{
              fontSize: 20,
              color: '#fff',
              textAlign: 'center',
              textAlignVertical: 'top',
            }}>
            Row number 3
          </Text>
        </View>
        <View style={{ flex: 1, backgroundColor: 'skyblue' }}>
          <Text
            style={{
              fontSize: 20,
              color: '#fff',
              textAlign: 'center',
              textAlignVertical: 'top',
            }}>
            Row number 4
          </Text>
        </View>
      </View>
    );
  }
}


Output:

Also see,  React Native Reanimated

Check this out, React Native Paper

Frequently Asked Questions

Which styling is best for React?

The simplest and most basic approach to style any React application is to use inline styles. You don't need to build a separate CSS if you style elements inline. In comparison to styles in a stylesheet, styles applied directly to elements have a higher priority.

 

What does React Native use for styling?

JavaScript is basically used to style your application with React Native. A prop named style is accepted by all of the main components. The style names and values are usually similar to how CSS works on the web, with the exception that the names are written in camel case, e.g. backgroundColor instead of background-color.

 

Is it really worth investing in React Native in 2022?

Because of its intuitive architecture, live reloading, and short development timelines, as well as outstanding performance and code reusability across platforms, React Native is the best choice for cross-platform app development in 2022. (iOS, Android, and web).

Conclusion

In this article, we learned about Styling in React Native and its working implementation by showcasing a working example.
We hope this article has helped you in enhancing your knowledge as a Dart beginner. If you wish to learn more, check out our articles on environment setup and Competitive Programming. Do upvote this article for helping other ninjas grow.
Happy Coding!

Previous article
React Native View Component
Next article
React Native Colour Reference
Live masterclass