React Native View Component

The React Native View Component is the core building block used to structure and organize UI layouts. It provides a flexible way to group elements and control how they appear on the screen.

• Acts as a container with Flexbox-based layout and styling support.
• Supports touch handling and accessibility features.
• Maps directly to native UI elements like UI View, <div>, and android.view.
• Can be nested inside other views and hold zero or multiple child components.

import React from "react";
import { View, Text } from "react-native";

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello Geek</Text>
    </View>
  );
}

• View: A container to layout UI elements (like <div>).
• Component: A reusable function/class that returns UI.
• Code: App() component returns a View with Text inside.

Syntax:

<view props="value"/>

Props for View Component

The View component provides a wide range of props to control layout, touch handling, accessibility, focus, and platform-specific behavior.

1. Touch & Responder System

These props control how a View reacts to touch events and how it becomes the active responder.

• onStartShouldSetResponder: Runs when the user touches the view
• onMoveShouldSetResponder: Runs when the user moves their finger on the view
• onResponderGrant: Called when the view starts responding to touch
• onResponderMove: Runs while the finger is moving on the view
• onResponderRelease: Runs when the user lifts the finger
• onResponderReject: Called when another view gets the touch instead
• onResponderTerminate: Runs when touch control is taken away
• onResponderTerminationRequest: Asks the view to give up touch control
• onStartShouldSetResponderCapture: Parent view can stop child from handling touch start
• onMoveShouldSetResponderCapture: Parent view can stop child from handling touch move
• pointerEvents: Controls whether the view can receive touches
• hitSlop: Makes the touch area larger around the view

2. Accessibility Props

These props make the View usable with screen readers and assistive technologies.

• accessible: Marks the view as usable by screen readers
• accessibilityLabel: Text read by the screen reader
• accessibilityHint: Explains what happens when the user taps
• accessibilityRole: Tells what the element is (button, image, etc.)
• accessibilityState: Shows state like disabled, selected, checked
• accessibilityValue: Shows the current value (for sliders, progress, etc.)
• accessibilityActions: Lists actions that can be done
• onAccessibilityAction: Runs when an accessibility action happens
• onAccessibilityTap: Runs when screen-reader tap is used
• onMagicTap: Runs when special two-finger tap is used
• onAccessibilityEscape: Runs when the escape gesture is used
• accessibilityViewIsModal: Blocks other elements for screen readers
• accessibilityElementsHidden: Hides child elements from screen readers
• accessibilityIgnoresInvertColors: Stops color inversion
• accessibilityLiveRegion: Notifies screen reader when content changes
• importantForAccessibility (Android): Controls how the view is announced

3. Layout & Styling

These props control how the View looks and how it is arranged on the screen.

• style: Used to design the view (color, size, margin, etc.)
• onLayout: Runs when the view appears or changes size
• removeClippedSubviews: Removes off-screen views to improve performance
• collapsible: Removes empty layout views to optimize performance

4. Focus & Navigation

These props control keyboard, TV remote, and non-touch navigation.

• focusable: Makes the view focusable using keyboard or remote
• nextFocusUp: Sets the next view when moving up
• nextFocusDown: Sets the next view when moving down
• nextFocusLeft: Sets the next view when moving left
• nextFocusRight: Sets the next view when moving right
• nextFocusForward: Sets the next view when moving forward

5. Performance & Platform

These props help optimize rendering on Android and iOS.

• needsOffscreenAlphaCompositing: Helps show correct transparency
• shouldRasterizeIOS: Improves performance on iOS by drawing as an image
• renderToHardwareTextureAndroid: Improves rendering on Android

6. Testing & Native Linking

These props help link the View with testing tools and native code.

• testID: Used to find the view in testing
• nativeID: Used to find the view from native code

Step-by-Step 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:

Step 4: Implementing the View Component in App.js.

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',
},
});

• Uses the View component as a container with a button inside it.
• Shows an alert message when the button is pressed, demonstrating user interaction.

Step 5: 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.