react-native-mesh-gradient

MeshGradient for React Native.

https://github.com/KusStar/react-native-mesh-gradient/assets/21271495/35b84584-614e-4ffe-9801-1c6547b5eebc

You can download the example apk in releases.

Installation

Only supports Android for now.

``sh


npm install @kuss/react-native-mesh-gradient


yarn add @kuss/react-native-mesh-gradient
`

Usage

`js
import { MeshGradient } from "@kuss/react-native-mesh-gradient";

colors={['red', 'yellow', 'green', 'blue']}
style={{
flex: 1,
height: '100%',
pointerEvents: 'none',
position: 'absolute',
width: '100%',
}}
/>

More at example/App.tsx
`

Interface

`ts
export type MeshGradientProps = {
style?: ViewStyle;
/**
* defaults to 2, > 0
*/
speed?: number;
/*
* defaults to ['red', 'yellow', 'green', 'blue'], must be four colors
*/
colors: string[];
/**
* defaults to 1, 0 - 2
*/
brightness?: number;
/**
* defaults to 1, 0 - 2
*/
contrast?: number;
/**
* defaults to 5, > 0
*/
frequency?: number;
/**
* defaults to 30, > 0
*/
amplitude?: number;
};
``

Thanks

- The shader code is copied from https://www.shadertoy.com/view/4t2SDh by hahnzhu.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library