react-native-mesh-gradient

MeshGradient for React Native.

example.mp4

You can download the example apk in releases.

Installation

Only supports Android for now.

# npm install @kuss/react-native-mesh-gradient
yarn add @kuss/react-native-mesh-gradient

Usage

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

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

More at example/App.tsx

Interface

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.
• Timeless's Api - Bing Random, for getting the random bing wallpaper.

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