Expo MeshGradient

GitHub

Changelog

npm

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

iOS

tvOS

Bundled version:

~0.3.4

Installation

Terminal

- 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

`MeshGradientView`

Type: React.Element<ComponentType<MeshGradientViewProps>>

MeshGradientViewProps

`colors`

Optional • Type: string[] • 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`

Optional • Type: boolean • Default: true

Whether to ignore safe areas when positioning the view.

`mask`

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.

`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