@wilmxre/react-native-mesh-gradient is a React Native component for creating smooth, animated mesh gradients, by exposing the native MeshGradient API to React Native.
This library is iOS only.
Description (copied from Apple Docs)
Each vertex has a position, a color and four surrounding Bezier control points (leading, top, trailing, bottom) that define the tangents connecting the vertex with its four neighboring vertices. (Vertices on the corners or edges of the mesh have less than four neighbors, they ignore their extra control points.) Control points may either be specified explicitly or implicitly.
When rendering, a tessellated sequence of Bezier patches are created, and vertex colors are interpolated across each patch, either linearly, or via another set of cubic curves derived from how the colors change between neighbors – the latter typically gives smoother color transitions.
Prerequisite
The native API is still in beta and it only supports iOS 18.0+ so far. Be aware of this, if you want to use this component.
You can read more on the Apple Official Documentation: https://developer.apple.com/documentation/swiftui/meshgradient
Installation
You can install the package using npm or yarn:
npm install @wilmxre/react-native-mesh-gradient && cd ios && pod installor
yarn add @wilmxre/react-native-mesh-gradient && cd ios && pod installExpo support
To use this library with Expo, you will need to create a development build. Expo Go does not support custom native modules. For information on how to create and run a development build, visit: Create a development build - Expo Documentation.
Usage
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { MeshGradient } from 'react-native-mesh-gradient';
const MATRIX_DIMENSION = 3;
const points = [
[0.0, 0.0], [0.2, 0.0], [1.0, 0.0],
[0.0, 0.3], [0.4, 0.9], [1.0, 0.1],
[0.0, 1.0], [0.3, 1.0], [1.0, 1.0],
];
const primaryColors = [
"#E68369", "#E68369", "#B692C2",
"#B692C2", "#FBF6E2", "#FBF6E2",
"#E68369", "#E68369", "#E68369",
];
const secondaryColors = [
"#000000", "#000000", "#000000",
"#FF9F0A", "#FF453A", "#FF9F0A",
"#5E5CE6", "#000000", "#30D158",
];
const App = () => {
return (
<View style={styles.container}>
<MeshGradient
meshWidth={MATRIX_DIMENSION}
meshHeight={MATRIX_DIMENSION}
style={styles.meshContainer}
points={points}
primaryColors={primaryColors}
secondaryColors={secondaryColors}
background="#ffffff"
smoothsColors={true}
colorSpace="perceptual"
borderRadius={24}
isAnimated={true}
borderRadius={10}
animationDuration={2000}
animationType="easeInOut"
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
meshContainer: {
justifyContent: "center",
alignItems: "center",
width: 350,
height: 350,
},
});Demo
ScreenRecording_07-29-2024.19-10-15_1.3.mp4
ScreenRecording_07-29-2024.19-12-28_1.1.mp4
Props
The width of the mesh, i.e. the number of vertices per row. Default is 3.
The height of the mesh, i.e. the number of vertices per column. Default is 3.
An array of points defining the mesh. Each point is an array of two numbers representing the x and y coordinates.
An array of primary colors containing width x height elements. The colors should be in 6 digit hex format (ex.: #FF9F0A).
An array of secondary colors containing width x height elements. The colors should be in 6 digit hex format (ex.: #FF9F0A). Only required, if isAnimated is true.
The background color fills any points outside the defined vertex mesh. Default is .clear (a color object with grayscale and alpha values that are both 0.0`).
Determines whether cubic (smooth) interpolation should be used for the colors in the mesh (rather than only for the shape of the mesh). Default is true.
The color space in which to interpolate vertex colors. Can be device or perceptual. Default is device.
Specifies if the gradient should be animated. Default is false.
The border radius of the MeshGradient view. Default is 0.
The length of time, expressed in seconds, that the animation takes to complete. Default is 5. Specify only if isAnimated prop is true.
The type of animation to use. Can be "sine" or "easeInOut". Default is "sine". Specify only if isAnimated prop is true.
Contributing
Contributions are welcome! Please open an issue or submit a pull request if you have any improvements or bug fixes.
Made with create-react-native-library