React Native View
The View is the fundamental component of React Native for building a user interface. It is a container that supports layout with flexbox, style, touch handling, and accessibility controls. It maps directly to the native view similar to whatever platform on React Native app is running on. It displays the components regardless with UIView,
, android.view, etc.
View component can be nested, contains other views inside it. It can contain 0 to many children of any type.
Note: View(s) component used with StyleSheet makes it more clarity and well performed, however, it also supports inline styles
Props of View
| onStartShouldSetResponder | accessibilityLabel | accessibilityHint | hitSlop |
| nativeID | onAccessibilityTap | onLayout | onMagicTap |
| onMoveShouldSetResponder | onMoveShouldSetResponderCapture | onResponderGrant | onResponderMove |
| onResponderReject | onResponderRelease | onResponderTerminate | onResponderTerminationRequest |
| accessible | onStartShouldSetResponderCapture | pointerEvents | removeClippedSubviews |
| style | testID | accessibilityComponentType | accessibilityLiveRegion |
| collapsable | importantForAccessibility | needsOffscreenAlphaCompositing | renderToHardwareTextureAndroid |
| accessibilityRole | accessibilityStates | accessibilityTraits | accessibilityViewIsModal |
| accessibilityElementsHidden | accessibilityIgnoresInvertColors | shouldRasterizeIOS |
React Native View Example
In this example, we create a View component that contains two colored boxes and a text component in a row with height and width.
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
import React, { Component } from 'react'
import {StyleSheet,View, Text} from 'react-native'
export default class SwitchExample extends Component {
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<Text style={{fontSize: 18}}>View Example</Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
flexDirection: 'row',
height: 100,
width: "80%",
backgroundColor:"#5ead97"
}
})
import {Platform, StyleSheet, Text, View} from 'react-native';
type Props = {};
import React, { Component } from 'react'
import {StyleSheet,View, Text} from 'react-native'
export default class SwitchExample extends Component {
render() {
return (
<View style={styles.container}>
<View style={{backgroundColor: 'blue', flex: 0.3}} />
<View style={{backgroundColor: 'red', flex: 0.5}} />
<Text style={{fontSize: 18}}>View Example</Text>
</View>
);
}
}
const styles = StyleSheet.create ({
container: {
flex: 1,
flexDirection: 'row',
height: 100,
width: "80%",
backgroundColor:"#5ead97"
}
})
Output:
