A simple gradient library for React Native.
npm install react-native-gradients> 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
Note: This library supports only React Native 0.60+ versions
Install react-native-gradients using your package manager
sh
npm install --save react-native-gradients react-native-svg
`$3
`sh
yarn add react-native-gradients react-native-svg
`$3
As it uses React Native SVG, you need to install the pod dependencies using following command
`sh
cd ios
pod install
`✌️Usage
$3
`js
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'}
]
``jsx
`$3
`js
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'}
]
``jsx
`$3
This library uses
components. An option for other formats of "images" is using the React Native component but for svgs that is not possible (at least for now).A good option is wrap your Gradient component into a
component and make that component has position: absolute style such as`jsx
import { RadialGradient } from 'react-native-gradients';const BackgroundGradient = ({ style, children }) => (
);
const styles = StyleSheet.create({
gradientBg: {
position: absolute,
width: "100%",
height: "100%",
},
});
``