Search code examples
cssgradientstyled-components

Why can't I use a linear gradient with `styled-components`?

The Problem:

When I create a simple View with this style in react-native using styled-components:

const Container = styled.View`
  flex: 1;
  background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%);
`;

I get this error:

Error: Failed to parse declaration "background: linear-gradient(#006ded 0%, #1bace2 34.48%, #00e2ed 100%)"

Is this not the correct use of linear gradients? I have a design file from a friend and just copied the css code. I'm not that good with css I have to confess but I looked it up on the mozilla docs. Seems like the syntax is not correct?

How can I achieve this Gradient using 3 colors ?

Solution

  • It's not supported. You can find the confirmation here:

    https://github.com/styled-components/styled-components/issues/1170

    Workaround: Use a background image with react-native ImageBackgroundcomponent https://facebook.github.io/react-native/docs/imagebackground

    Thx for the info @mulsun