| id |
view-style-props |
| title |
View Style Props |
import React from 'react';
import {View, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
const App = () => (
<SafeAreaProvider>
<SafeAreaView style={styles.container}>
<View style={styles.top} />
<View style={styles.middle} />
<View style={styles.bottom} />
</SafeAreaView>
</SafeAreaProvider>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
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 App;
| 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' ) |