React Native View

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

1. import React, { Component } from 'react'  
2. import {StyleSheet,View, Text} from 'react-native'  
3.   
4. export default class SwitchExample extends Component {  
5.     render() {  
6.         return (  
7.             <View style={styles.container}>  
8.                 <View style={{backgroundColor: 'blue', flex: 0.3}} />  
9.                 <View style={{backgroundColor: 'red', flex: 0.5}} />  
10.                 <Text style={{fontSize: 18}}>View Example</Text>  
11.             </View>  
12.         );  
13.     }  
14. }  
15. const styles = StyleSheet.create ({  
16.      container: {  
17.          flex: 1,  
18.          flexDirection: 'row',  
19.          height: 100,  
20.          width: "80%",  
21.          backgroundColor:"#5ead97"  
22.      }  
23. })  

Output: