Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-easing-gradient

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-easing-gradient

Create smooth gradients in React Native

  • 0.1.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.5K
increased by6.28%
Maintainers
1
Weekly downloads
 
Created
Source

React Native Easing Gradient

Stable Release license

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',
      // This color stop will now use `Easing.linear` instead of `Easing.ease`
      easing: Easing.linear,
    },
    1: {
      color: '#18181B',
    },
  },
  // The easing function used on all color stops, defaults to `ease-in-out` (Easing.bezier(0.42, 0, 0.58, 1))
  easing: Easing.ease,
})

Credits

Example

To run the example project, follow these steps:

  • Clone the repo
  • Run these commands
yarn
cd example
yarn && yarn start

Keywords

FAQs

Package last updated on 01 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc