Skip to content

ridehip/react-native-gradients

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🎨React Native Gradients

npm version

A React Native alternative to Linear and Radial gradients, using SVG!

React Native Gradients Demo 1 React Native Gradients Demo 2 React Native Gradients Demo 3

⚙️Installation

Note: This library supports only React Native 0.60+ versions

Install react-native-gradients using your package manager

  • npm
npm install --save react-native-gradients react-native-svg
  • yarn
yarn add react-native-gradients react-native-svg

iOS installation

As it uses React Native SVG, you need to install the pod dependencies using following command

cd ios
pod install

✌️Usage

Linear Gradient

const colorList = [
  {offset: '0%', color: '#231557', opacity: '1'},
  {offset: '29%', color: '#44107A', opacity: '1'},
  {offset: '67%', color: '#FF1361', opacity: '1'},
  {offset: '100%', color: '#FFF800', opacity: '1'}
]
<LinearGradient colorList={colorList} angle={90}/>

Radial Gradient

const colorList = [
  {offset: '0%', color: '#231557', opacity: '1'},
  {offset: '29%', color: '#44107A', opacity: '1'},
  {offset: '67%', color: '#FF1361', opacity: '1'},
  {offset: '100%', color: '#FFF800', opacity: '1'}
]
<RadialGradient x="50%" y="50%" rx="50%" ry="50%" colorList={colorList}/>

With Content

import { RadialGradientBackground } from 'react-native-gradients';

<RadialGradientBackground
  style={{
    ...
  }}
  x="50%" y="50%" rx="50%" ry="50%" colorList={...}>
  <MyInnerComponent/>
</RadialGradientBackground>
});

Development

# build
yarn build

SonarCloud

About

A simple gradient library for React Native.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • TypeScript 100.0%