with yarn
yarn add react-native-css-gradientor with npm
npm install --save react-native-css-gradientimport createCssGradient from "react-native-css-gradient";
import LinearGradient from "react-native-linear-gradient";
// or from expo:
// import { LinearGradient } from "expo-linear-gradient";
const Gradient = createCssGradient(LinearGradient);
render() {
const gradient = `linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%),
repeating-linear-gradient(-115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px),
repeating-linear-gradient(115deg, transparent, transparent 20px, rgba(255,255,255,0.1) 20px, rgba(255,255,255,0.1) 40px)`;
return <Gradient gradient={gradient} style={yourStyle}>
}| Prop | Details |
|---|---|
| gradient | CSS Gradient (linear and repeating) are working for the moment |
| style | default styles (Note, if you're going to use repeating gradient you have to specify the width and height) |
| children | - |
CSS background image for React-Native using LinearGradient from Expo.
Supported backgrounds:
If you have questions please don't hesitate to contact me on Twitter.
