This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 53).
Expo MeshGradient
A module that exposes MeshGradient view from SwiftUI to React Native.
Installation
-
npx expo install expo-mesh-gradient
If you are installing this in an existing React Native app, make sure to install expo
in your project.
API
import { MeshGradientView } from 'expo-mesh-gradient'; function App() { return ( <MeshGradientView style={{ flex: 1 }} columns={3} rows={3} colors={['red', 'purple', 'indigo', 'orange', 'white', 'blue', 'yellow', 'green', 'cyan']} points={[ [0.0, 0.0], [0.5, 0.0], [1.0, 0.0], [0.0, 0.5], [0.5, 0.5], [1.0, 0.5], [0.0, 1.0], [0.5, 1.0], [1.0, 1.0], ]} /> ); }
Component
Type: React.Element<ComponentType<MeshGradientViewProps>>
string[]
• Default: []
An array of colors. Must contain columns * rows
elements.
number
• Default: 0
Width of the mesh, i.e. the number of vertices per row.
boolean
• Default: true
Whether to ignore safe areas when positioning the view.
boolean
• Default: false
Masks the gradient using the alpha channel of the given children views.
Note: When this option is enabled, all user interactions (gestures) on children views are ignored.
number[][]
• Default: []
An array of two-dimensional points on the mesh. Must contain columns * rows
elements.
number
• Default: 0
Height of the mesh, i.e. the number of vertices per column.
boolean
• Default: true
Whether cubic (smooth) interpolation should be used for the colors in the mesh rather than only for the shape of the mesh.