Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
React Native View
3.
Props of View Component
4.
Use Cases of React Native View
5.
Example Application
6.
Frequently Asked Questions
6.1.
Is React Native the same as Reactjs?
6.2.
Is it MVVM or MV in React?
6.3.
Is React Native a good option in 2022?
7.
Conclusion
Last Updated: Mar 27, 2024

React Native View Component

Author Vivek Goswami
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

The View is the most important component of React Native when it comes to creating a user interface and in this article, we will learn how to make our own view using the view component in React Native.

Let us believe that you have a basic understanding of programming languages and are familiar with basic React Native Introduction. In this blog, we will be covering React Native View, its components, and its implementation in our code.

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

React Native View

It's a container that supports flexbox, has a style, can handle touch input, and has accessibility controls. It corresponds to the platform's native view on which the React Native app is running. It displays the components regardless of whether they are UIView, <div>, or android.view, etc.

Other views can be nested within the view component. It can have any number of different types of children.

Syntax:

<view props="value"/>
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

Props of View Component

Let’s look at the some important props of View Component in React Native

  • accessible: This prop is used to indicate that the view is an accessibility element and the default value is true.
  • accessibilityLabel: This prop is used for overriding the text that is read by the screen reader when the user is interacting with the element.
  • accessibilityHint: This prop is helpful in allowing  users to understand what will happen when they will perform an action on the accessibility element if that result is not clear from the accessibility label.
  • accessibilityRole: This prop is commonly used for communicating the purpose of a component to the user of assistive technology.
  • accessibilityState: It is best used to describe the current state of a component to the user of assisting technology.
  • accessibilityValue: This prop is commonly used to represent the current value of a component
  • accessibilityActions: This prop allows assisting technology to programmatically invoke the actions of a component.
  • onAccessibilityAction: This prop is used to invoke when the user performs the accessibility actions.

Also see,  React Native Reanimated

Use Cases of React Native View

The view is the most common component in React Native. Now let's have a look at some typical use-case scenarios.

  • You can use View as a container element when you need to enclose your elements inside a container.
  • Both parent and child elements can be viewed when nesting multiple items inside the parent element. It is allowed to have as many offspring as it desires.
  • Because View provides style property, flexbox, and other features, you can use it to style distinct elements.
  • Synthetic touch events are also supported by View, which can be beneficial for a variety of purposes.

Example Application

Let's get started with the view component. We constructed a view component in which we can place any API, but we will place an alert button, which will display an alert when someone clicks on it.

App.js

import React from 'react';
import{StyleSheet,
       Text,
       View,
       Button,
       Alert} from 'react-native';
export default function App()
{
    const styles = StyleSheet.create({
        container : {
            flex : 4,
            overlayColor : 'black',
            backgroundColor : '#FFA500',
            color : 'black',
            alignItems : 'center',
            textShadowColor : 'black',
            justifyContent : 'center',
        },
    });
    // Alert function
    const alert = () = >
    {
        Alert.alert(
            "Coding Ninjas",
            "Learn ,Code and Upskill",
            [
                {
                    text : "Cancel",
                },
                {
                    text : "Agree",
                }
            ]);
    }


   return (
        <View style = {styles.container}>
        <Button
             title = {"Register"} onPress = {alert} />
        </ View>);
}

Output:

Check this out, React Native Paper, React devtools

Frequently Asked Questions

Is React Native the same as Reactjs?

While Reactjs is essentially a JavaScript library and React Native is the whole framework, the former is at the heart of the latter and the two operate well together. If Reactjs is best for generating high-functioning apps with complicated computations, then React Native is best for giving your mobile apps a native feel.

Is it MVVM or MV in React?

React is basically the VVM of MVVM. You are in charge of the model and it is usually determined by the type of state management employed.

Is React Native a good option in 2022?

React Native is the greatest choice for cross-platform app development in 2022, thanks to its intuitive architecture, live reloading, and quick development timeframes, as well as good performance and code reusability across platforms (iOS, Android, and web).

Conclusion

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

Live masterclass