React Native View Component

In this article, We are going to see how to create a view component in react-native. For this, we are going to use React Native View component. It’s basically a small container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

This component is designed to be nested inside other views and can have 0 to many children of any type.

Syntax:

<view props="value"/>

Props for View Component:

• onStartShouldSetResponder: This prop is a function type it is used to start the view when the user touches the component.
• accessible: This prop is used to indicate that the view is an accessibility element and the default value is true.
• accessibilityLabel: This prop used to override the text that’s read by the screen reader when the user interacts with the element.
• accessibilityHint: This prop helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
• accessibilityRole: This prop is used for communicates the purpose of a component to the user of assistive technology.
• accessibilityState: It is used to describe the current state of a component to the user of assistive technology.
• accessibilityValue: This prop is used to represent the current value of a component
• accessibilityActions: This prop allows assistive technology to programmatically invoke the actions of a component.
• onAccessibilityAction: This prop is used to invoke when the user performs the accessibility actions.
• onAccessibilityTap: This prop is used if the system will invoke this function when the user performs the accessibility tap gesture, the accessible prop should be the true.
• onMagicTap: This prop is used if the system will invoke this function when the user performs the magic tap gesture, the accessible prop should be the true.
• onAccessibilityEscape: This prop is used if the system will invoke this function when the user performs the escape gesture, the accessible prop should be the true.
• accessibilityViewIsModal: This prop indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver.
• accessibilityElementsHidden: This prop indicating whether the accessibility elements contained within this accessibility element are hidden.
• accessibilityIgnoresInvertColors: This prop indicating this view should or should not be inverted when color inversion is turned on.
• accessibilityLiveRegion: This prop indicates to accessibility services whether the user should be notified when this view changes.
• importantForAccessibility: This prop controls how the view is important for accessibility, if it fires accessibility events and if it is reported to accessibility services that query the screen, it works only on Android.
• hitSlop: This prop defines how far a touch event can start away from the view
• nativeID: This prop is used to locate this view from native classes.
• onLayout: This prop is used to activate a View on the mount and on layout changes.
• onMoveShouldSetResponder: This prop is called for every touch move on the View when it is not the responder.
• onMoveShouldSetResponderCapture: If a parent View wants to prevent a child View from becoming a responder on a move, then it should have this handler which returns true.
• onResponderGrant: The prop makes the View responding for touch events.
• onResponderMove: This prop is to activate the user’s finger moved responder View.
• onResponderReject: If a responder is already active then this property will block the other one’s request.
• onResponderRelease: This prop is used to fire the View at the end of the touch.
• onResponderTerminate: This prop is used to take the responder from the View.
• onResponderTerminationRequest: If any View wants to be a responder and that time any other View is the responder then this prop will be asking this active View to release its responder.
• onStartShouldSetResponderCapture: If a parent View wants to prevent a child View from becoming responder on a touch start only then this prop will be used.
• pointerEvents: This prop is used to control whether the View can be the target of touch events.
• removeClippedSubviews: This prop is for scrolling content when there are many subviews, most of which are offscreen.
• style: This prop is used to style the view components.
• testID: This prop is used to locate this view in end-to-end tests.
• collapsible: This prop used in Views, which are only used to layout their children or otherwise don’t draw anything may be automatically removed from the native hierarchy as an optimization.
• needsOffscreenAlphaCompositing: This prop defines that the view needs to rendered off-screen and composited with the alpha in order to preserve correct colors and blending behavior.
• renderToHardwareTextureAndroid:
• shouldRasterizeIOS: This prop defines that the View should be rendered as a bitmap before compositing, it is useful on ios devices.
• nextFocusDown: This prop is to set that the next view to receive focus when the user navigates down.
• nextFocusForward: This prop is to set that the next view to receive focus when the user navigates forward.
• nextFocusLeft: This prop is to set that the next view to receive focus when the user navigates left.
• nextFocusRight: This prop is to set that the next view to receive focus when the user navigates right.
• nextFocusUp: This prop is to set that the next view to receive focus when the user navigates up.
• focusable: This prop is used to define the View as should be focusable with a non-touch input device.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init myapp

Step 3: Now go into your project folder i.e. myapp

cd myapp

Project Structure:

Example: Now let’s implement the view component. Here we created a view component inside that component we can put any API but here we will put an alert button and when someone clicks on that button an alert will pop up.

Filename: App.js

javascript

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

export default function App() {

// Alert function
const alert = ()=>{
    Alert.alert(
    "GeeksforGeeks",
    "A Computer Science Portal",
    [
        {
        text: "Cancel",
        },
        {
        text: "Agree",
        }
    ]
    );
}

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

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
},
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again. 

Reference: https://reactnative.dev/docs/view