Source: https://docs.expo.dev/versions/v54.0.0/sdk/mesh-gradient

Hide navigation

Search

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 54

Archive Expo Snack Discord and Forums Newsletter

Expo MeshGradient

GitHub Changelog npm

A module that exposes MeshGradient view from SwiftUI to React Native.

GitHub Changelog npm

iOS

tvOS

Bundled version:

~0.4.7

Copy page

---

Installation

---

Terminal

Copy

- 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], ]} /> ); }

Show More

Component

---

MeshGradientView

Type: React.[Element](https://www.typescriptlang.org/docs/handbook/jsx.html#function-component) <[MeshGradientViewProps](https://docs.expo.dev/versions/v54.0.0/sdk/mesh-gradient#meshgradientviewprops) >

MeshGradientViewProps

colors

Optional • Type: [ColorValue[]](https://reactnative.dev/docs/colors)  • Default: []

An array of colors. Must contain columns * rows elements.

columns

Optional • Type: number • Default: 0

Width of the mesh, i.e. the number of vertices per row.

ignoresSafeArea

Only for: 

iOS

Optional • Type: boolean • Default: true

Whether to ignore safe areas when positioning the view.

mask

Only for: 

iOS

Optional • Type: 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.

points

Optional • Type: number[][] • Default: []

An array of two-dimensional points on the mesh. Must contain columns * rows elements.

resolution

Only for: 

Android

Optional • Type: { x: number, y: number }

Specifies how many points to sample on the path between points.

rows

Optional • Type: number • Default: 0

Height of the mesh, i.e. the number of vertices per column.

smoothsColors

Optional • Type: 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.

Inherited Props

• [ViewProps](https://reactnative.dev/docs/view#props)