Scribd
Upload
71 views3 pages

React Native

The View component is fundamental to building user interfaces in React Native. It renders components for the native platform and supports layout, styles, touch handling and accessibility. Views can be nested and contain other views as children. An example creates a View with two colored boxes and text in a row with defined height, width and flex properties for layout.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views3 pages

React Native

The View component is fundamental to building user interfaces in React Native. It renders components for the native platform and supports layout, styles, touch handling and accessibility. Views can be nested and contain other views as children. An example creates a View with two colored boxes and text in a row with defined height, width and flex properties for layout.

Uploaded by

Aizel Almonte
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

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, <div>,
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

nativeID onAccessibilityTap onLayout

onMoveShouldSetResponder onMoveShouldSetResponderCapture onResponderGrant

onResponderReject onResponderRelease onResponderTerminate

accessible onStartShouldSetResponderCapture pointerEvents

style testID accessibilityComponentType

collapsable importantForAccessibility needsOffscreenAlphaComposi

accessibilityRole accessibilityStates accessibilityTraits

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 {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:

You might also like