View Style Props
Important: The Vega SDK supports many of the React Native version 0.72 components and APIs. You can use the supported components and APIs in the same manner as an ordinary React Native app. This page lists a specific React Native feature supported by the Vega SDK and contains React Native v72 documentation from the reactnative.dev website created by Meta and other contributors and licensed under the Attribution 4.0 International License. For more information about React Native v72, see the React Native documentation, version 0.72. For the most current feature information, see the Release Notes.
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