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-gradientIf 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: 0Width of the mesh, i.e. the number of vertices per row.
boolean • Default: trueWhether to ignore safe areas when positioning the view.
boolean • Default: falseMasks 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: 0Height of the mesh, i.e. the number of vertices per column.
boolean • Default: trueWhether cubic (smooth) interpolation should be used for the colors in the mesh rather than only for the shape of the mesh.