05.1 View

Details

 

 

The most fundamental component for building a UI, View is a 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.

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

 

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

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

const ViewBoxesWithColorAndText = () => {
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 100,
        padding: 20,
      }}>

      <View style={{backgroundColor: 'blue', flex: 0.3}} />

      <View style={{backgroundColor: 'red', flex: 0.5}} />

      <Text>Hello World!</Text>
    </View>
  );
};

export default ViewBoxesWithColorAndText;

 

Note: Styles

Views are designed to be used with StyleSheet for clarity and performance, although inline styles are also supported.

 

Synthetic Touch Events​

For View responder props (e.g., onResponderMove), the synthetic touch event passed to them are in form of PressEvent.