id |
title |
view-style-props |
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;
Type |
enum('visible' , 'hidden' ) |
On iOS 13+, it is possible to change the corner curve of borders.
Type |
enum('circular' , 'continuous' ) |
If the rounded border is not visible, try applying overflow: 'hidden'
as well.
Type |
enum('solid' , 'dotted' , 'dashed' ) |
On iOS 17+, Setting to pointer
allows hover effects when a pointer (such as a trackpad or stylus on iOS, or the users' gaze on visionOS) is over the view.
Type |
enum('auto' , 'pointer' ) |
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.
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' ) |