React-native-web: Linear gradients + background style error

Created on 23 Dec 2016 · 7Comments · Source: necolas/react-native-web

Hello, I'm trying to implement this package for web https://github.com/react-native-community/react-native-linear-gradient
In order to use linear gradients in web I have to use the "background" attribute of the div but I get this error:

Environment (include versions)

Browser: Chrome
React Native for Web (version): 0.0.60
React (version): 15.3.2

Source

VinceBT

👍2

Most helpful comment

Use background-image instead. Vendor prefixes are automatically handled

necolas on 23 Dec 2016

👍3

All 7 comments

Use background-image instead. Vendor prefixes are automatically handled

necolas on 23 Dec 2016

👍3

In case anyone else needs this, here's a working example to replace for the DOM:

import React from 'react'
import { View } from 'react-native'

const LinearGradient = ({ style, children, colors }) => (
  <View
    children={children}
    style={{ ...style,
      backgroundImage: `linear-gradient(to bottom, ${colors[0]} 0%, ${colors[1]} 100%)`,
    }}
  />
)

LinearGradient.propTypes = {
  children: React.PropTypes.arrayOf(React.PropTypes.node),
  colors: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
  style: React.PropTypes.shape({}),
}

export default LinearGradient

dsernst on 9 Apr 2017

Here the solution I've been working with:

import React, { Component, PropTypes } from 'react';
import { View } from 'react-native';

export default class LinearGradient extends Component {

  static propTypes = {
    start: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }).isRequired,
    end: PropTypes.shape({ x: PropTypes.number, y: PropTypes.number }).isRequired,
    locations: PropTypes.arrayOf(PropTypes.number),
    colors: PropTypes.arrayOf(PropTypes.string).isRequired,
    children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
  };

  render() {
    const { start, end, locations, colors, style, children, ...otherProps } = this.props;
    const vec = [end.x - start.x, -(end.y - start.y)];
    const angleRad = Math.atan(vec[1] / vec[0]);
    const angleDeg = Math.round((angleRad * 180) / Math.PI) +180;
    const realLocations = locations || colors.map((color, i) => (1 / (colors.length - 1)) * i);
    const colorStrings = colors.map((color, i) => `${color} ${Math.round(realLocations[i] * 100)}%`).join(', ');
    return (
      <View
        {...otherProps}
        style={[style, { backgroundImage: `linear-gradient(${angleDeg}deg, ${colorStrings})` }]}>
        {children}
      </View>
    );
  }
}

EDIT:
Use @leon3s 's solution which is up to date with newer RN versions

VinceBT on 9 Apr 2017

If you use expo and need component with same props, you can look a this :)
https://gist.github.com/leon3s/a53ef0965e7c24a739d7adbb4946d97a

leon3s on 10 Nov 2017

Seems nice but misses the locations prop support

VinceBT on 10 Nov 2017

This doesn't seem to be working..

passabilities on 20 Jun 2018

I found a solution, what I did, I add it in css page, then inspect the element.
For example : for * background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%); if you inspect it using inspect element, you will find : *-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff)) .
So just add this last line in the inline style of your react compenent:

<div className="card" style={{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>

for my example, I used this one above instead of :

<div className="card" style={{background: linear-gradient(to right, #000 0%,  #000 50%, #fff 50% #fff 100%)"}}/>

So in conclusion, add this to a css file, it will work, see the output in the "inspect element", and use it and edit it as you like in the inline style of your react js component.