Light

phamfoo / react-native-easing-gradient Goto Github PK

View Code? Open in Web Editor NEW

202.0 4.0 5.0 732 KB

Create smooth gradients in React Native

License: MIT License

Shell 0.73% TypeScript 64.56% JavaScript 34.71%

react react-native easing smooth gradients expo

react-native-easing-gradient's Introduction

React Native Easing Gradient

Create smooth gradients in React Native

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

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 (
    <View style={styles.container}>
      <LinearGradient
        colors={colors}
        locations={locations}
        style={styles.overlay}
      />
    </View>
  )
}

You can also change the easing functions between the color stops

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

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

Example

To run the example project, follow these steps:

Clone the repo
Run these commands

yarn
cd example
yarn && yarn start

react-native-easing-gradient's People

Contributors

Stargazers

Watchers

Forkers

chronsyn trendingtechnology dynamicprogramr nhjuhoang nilportugues

react-native-easing-gradient's Issues

Animate Gradient

Hello. Is there a way to animate the gradient so the colors would loop?

.

Low Gradient quality on 4k TV

The LinearGradient using react-native-easing-gradient
Only tested in Android TV

I saw improvements on the quality of the gradient but not enough.
I tried with different extraColorStopsPerTransition, but the result is similar.

On the Android Emulator the result is perfect, but on the TV the result is bad.

`    const { colors: gradientColours, locations } = easeGradient({
        colorStops: {
            0.1: {
                color: colors.secondary,
            },
            0.5: {
                color: colors.primary,
            },
            0.9: {
                color: colors.secondary,
            },
        },
        easing: Easing.linear,
        extraColorStopsPerTransition: 1000,
    });`

`        <LinearGradient
            style={{
                position: 'absolute',
                width: Dimensions.get('window').width,
                height: Dimensions.get('window').height,
            }}
            colors={gradientColours}
            locations={locations}
            useAngle={true}
            angle={90}
        />`

Packages
"react-native-linear-gradient": "^2.8.3",
"react-native-easing-gradient": "^1.1.1",

Running on Emulator

On TV

TypeError: AnimatedInterpolation.__createInterpolation is not a function (it is undefined)

Thanks for the cool lib. I really want to try it out but am getting this error on the latest RN (version "0.73.4"):

TypeError: AnimatedInterpolation.__createInterpolation is not a function (it is undefined)

I think the internal function being accessed here is no longer available in RN hence it breaks. Do you know how one might get around this? I am okay patch packaging it if you could point me towards a solution. Thanks!

How to ease in both directions

For example:

Is it possible to apply an easing gradient to the right side as well to the bottom side?

Thanks!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.