https://github.com/phamfoo/react-native-easing-gradient

Create smooth gradients in React Native
https://github.com/phamfoo/react-native-easing-gradient

easing expo gradients react react-native smooth

Last synced: about 2 months ago
JSON representation

Create smooth gradients in React Native

• Host: GitHub
• URL: https://github.com/phamfoo/react-native-easing-gradient
• Owner: phamfoo
• License: mit
• Created: 2021-04-30T12:26:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-27T09:35:37.000Z (7 months ago)
• Last Synced: 2024-07-23T08:42:44.227Z (about 2 months ago)
• Topics: easing, expo, gradients, react, react-native, smooth
• Language: TypeScript
• Homepage:
• Size: 715 KB
• Stars: 198
• Watchers: 4
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Native Easing Gradient

[![Stable Release](https://img.shields.io/npm/v/react-native-easing-gradient.svg)](https://npm.im/react-native-easing-gradient) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)

Create smooth gradients in React Native

![](demo.png)

## The problem

From https://larsenwork.com/easing-gradients/

> Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.

## Usage

```js

import { LinearGradient } from 'expo-linear-gradient'

import { easeGradient } from 'react-native-easing-gradient'

const { colors, locations } = easeGradient({

  colorStops: {

    0: {

      color: 'transparent',

    },

    1: {

      color: '#18181B',

    },

  },

})

function App() {

  return (

    

      

    

  )

}

```

You can also change the [easing functions](https://reactnative.dev/docs/easing) between the color stops

```js

const { colors, locations } = easeGradient({

  colorStops: {

    0: {

      color: 'transparent',

      // The transition from `0` to `1` will now use `Easing.linear` instead of `Easing.ease`

      easing: Easing.linear,

    },

    1: {

      color: '#18181B',

    },

  },

  // The easing function used on all transitions, defaults to `ease-in-out` (Easing.bezier(0.42, 0, 0.58, 1))

  easing: Easing.ease,

})

```

Or the amount of extra color stops added to each transition

```js

const { colors, locations } = easeGradient({

  colorStops: {

    0: {

      color: 'transparent',

    },

    1: {

      color: '#18181B',

    },

  },

  // The more color stops added, the smoother the transition is

  // Defaults to 12

  extraColorStopsPerTransition: 16

})

```

## Credits

- [Easing Linear Gradients](https://css-tricks.com/easing-linear-gradients/)

- [figma-easing-gradient](https://github.com/matchai/figma-easing-gradient)

## Example

To run the example project, follow these steps:

- Clone the repo

- Run these commands

```sh

yarn

cd example

yarn && yarn start

```