https://github.com/catalinmiron/react-native-css-gradient

React Native css gradients - react-native-linear-gradient with css gradient support
https://github.com/catalinmiron/react-native-css-gradient

css css-gradient expo gradient gradients linear-gradient native react react-native repeating-gradients

Last synced: 2 months ago
JSON representation

React Native css gradients - react-native-linear-gradient with css gradient support

• Host: GitHub
• URL: https://github.com/catalinmiron/react-native-css-gradient
• Owner: catalinmiron
• Created: 2018-10-16T09:49:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T22:42:38.000Z (over 1 year ago)
• Last Synced: 2024-04-14T04:59:12.924Z (3 months ago)
• Topics: css, css-gradient, expo, gradient, gradients, linear-gradient, native, react, react-native, repeating-gradients
• Language: JavaScript
• Homepage: https://snack.expo.io/@catalinmiron/react-native-css-gradient
• Size: 4.62 MB
• Stars: 165
• Watchers: 5
• Forks: 20
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Lists

• awesome-reactnative-ui - react-native-css-gradient - react-native-linear-gradient with css gradient support|<ul><li>Last updated : This week</li><li>Stars : 52</li><li>Open issues : 1</li></ul>|| (Others)
• awesome-reactnative-ui - react-native-css-gradient - react-native-linear-gradient with css gradient support|<ul><li>Last updated : This week</li><li>Stars : 52</li><li>Open issues : 1</li></ul>|| (Others)
• awesome-react-native - react-native-css-gradient

README

        
# CSS Gradient for LinearGradient

CSS background image for React-Native using `LinearGradient` from [Expo](https://expo.io).

Supported backgrounds:

- [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient)

- [repeating-linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient)

![image](https://github.com/catalinmiron/react-native-css-gradient/raw/master/screenshots/gif.gif)































### Usage

```js

import Gradient from 'react-native-css-gradient';

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 

}

```

TODO: Add fallback to `react-native-linear-gradient` package in case when Expo is missing.

### Props

|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|-|

### About

If you have questions please don't hesitate to contact me on [Twitter](http://twitter.com/mironcatalin).