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
