View Style Props
Example
import React from 'react';
import {View, StyleSheet} from 'react-native';
const ViewStyleProps = () => {
return (
<View style={styles.container}>
<View style={styles.top} />
<View style={styles.middle} />
<View style={styles.bottom} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
backgroundColor: '#fff',
padding: 20,
margin: 10,
},
top: {
flex: 0.3,
backgroundColor: 'grey',
borderWidth: 5,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
middle: {
flex: 0.3,
backgroundColor: 'beige',
borderWidth: 5,
},
bottom: {
flex: 0.3,
backgroundColor: 'pink',
borderWidth: 5,
borderBottomLeftRadius: 20,
borderBottomRightRadius: 20,
},
});
export default ViewStyleProps;
Reference
Props
backfaceVisibility
The property defines whether or not the back face of a rotated image should be visible.
Type | Default |
---|---|
enum('visible', 'hidden') | 'visible' |
backgroundColor
Type |
---|
color |
backgroundColor
Type |
---|
color |
borderBottomColor
Type |
---|
color |
borderBottomEndRadius
Type |
---|
number |
borderBottomLeftRadius
Type |
---|
number |
borderBottomRightRadius
Type |
---|
number |
borderBottomStartRadius
Type |
---|
number |
borderBottomWidth
Type |
---|
number |
borderColor
Type |
---|
color |
borderEndColor
Type |
---|
color |
borderLeftColor
Type |
---|
color |
borderLeftWidth
Type |
---|
number |
borderRadius
If the rounded border is not visible, try applying overflow: 'hidden'
as well.
Type |
---|
number |
borderRightColor
Type |
---|
color |
borderRightWidth
Type |
---|
number |
borderStartColor
Type |
---|
color |
borderStyle
Type |
---|
enum('solid' , 'dotted' , 'dashed' ) |
borderTopColor
Type |
---|
color |
borderTopEndRadius
Type |
---|
number |
borderTopLeftRadius
Type |
---|
number |
borderTopRightRadius
Type |
---|
number |
borderTopStartRadius
Type |
---|
number |
borderTopWidth
Type |
---|
number |
borderWidth
Type |
---|
number |
opacity
Type |
---|
number |
pointerEvents
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.
Type |
---|
enum('auto', 'box-none', 'box-only', 'none' ) |
Last updated: Sep 30, 2025