View Style Props
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
Type | Required |
---|
enum('visible', 'hidden') | No |
If the rounded border is not visible, try applying overflow: 'hidden'
as well.
Type | Required |
---|
enum('solid', 'dotted', 'dashed') | No |
(Android-only) Sets the elevation of a view, using Android's underlying
elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.
Type | Required | Platform |
---|
number | No | Android |