Skip to main content
The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.

​
Import

import { View } from 'react-native';

​
Basic Usage

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

function BasicView() {
  return (
    <View style={styles.container}>
      <Text>Hello World</Text>
    </View>
  );
}

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

​
Props

View inherits all props from accessibility and gesture responder handlers.

​
Layout Props

​
style
ViewStyle
Styles to apply to the view. Supports all flexbox, transform, and layout properties.
​
children
React.Node
Child components to render inside the view.

​
Behavior Props

​
collapsable
boolean
default:"true"
Views that are only used to layout their children or otherwise don’t draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.
​
collapsableChildren
boolean
Setting to false prevents direct children of the view from being removed from the native view hierarchy, similar to the effect of setting collapsable={false} on each child.
​
removeClippedSubviews
boolean
This is a special performance property exposed by RCTView and is useful for scrolling content when there are many subviews, most of which are offscreen. For this property to be effective, it must be applied to a view that contains many subviews that extend outside its bound.
​
pointerEvents
enum
Controls whether the View can be the target of touch events.
  • auto - The View can be the target of touch events
  • none - The View is never the target of touch events
  • box-none - The View is never the target of touch events but its subviews can be
  • box-only - The View can be the target of touch events but its subviews cannot be

​
Identification Props

​
id
string
Used to locate this view from native classes. Has precedence over nativeID prop.
​
nativeID
string
Used to locate this view from native classes.
​
testID
string
Used to locate this view in end-to-end tests.

​
Touch Props

​
hitSlop
Insets | number
This defines how far a touch event can start away from the view. Typical interface guidelines recommend touch targets that are at least 30 - 40 points/density-independent pixels.
​
needsOffscreenAlphaCompositing
boolean
Whether this View needs to rendered offscreen and composited with an alpha in order to preserve 100% correct colors and blending behavior.

​
Event Handlers

​
onLayout
(event: LayoutEvent) => void
Invoked on mount and layout changes with {nativeEvent: { layout: {x, y, width, height}}}. This event is fired immediately once the layout has been calculated.

​
Android Props

​
renderToHardwareTextureAndroid
boolean
Whether this View should render itself (and all of its children) into a single hardware texture on the GPU.
​
focusable
boolean
Whether this View should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
​
tabIndex
0 | -1
Indicates whether this View should be focusable with a non-touch input device.
  • 0 - View is focusable
  • -1 - View is not focusable
​
nextFocusDown
number
TV next focus down.
​
nextFocusForward
number
TV next focus forward.
​
nextFocusLeft
number
TV next focus left.
​
nextFocusRight
number
TV next focus right.
​
nextFocusUp
number
TV next focus up.

​
Examples

​
Nested Views

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

function NestedViews() {
  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text>Box 1</Text>
      </View>
      <View style={styles.box}>
        <Text>Box 2</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    gap: 10,
  },
  box: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    padding: 20,
  },
});

​
With Touch Handling

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

function TouchableView() {
  return (
    <View 
      style={styles.touchable}
      onStartShouldSetResponder={() => true}
      onResponderGrant={() => console.log('View pressed')}
    >
      <Text>Press me</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  touchable: {
    padding: 20,
    backgroundColor: '#007AFF',
  },
});

Build docs developers (and LLMs) love

Get started for freeTalk to us