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

Question

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 ?

Eliseoelish

Seems like no support: github.com/styled-components/styled-components/issues/1170 – Sideward

Unfortunately you are right. Than you then I will use it as a background image instead. – Eliseoelish

Answer 1

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

Eliseoelish

Answer 2

Use the attribute property

import LinearGradient from 'react-native-linear-gradient'

export const Container = styled(LinearGradient).attrs({
 colors: ['#000','#fff'],
 start: { x: 0, y: 0 },
 end: { x: 1, y: 0 },
})`
 /* your css here */
`;

Christianna

how to change the colors of lineargradient when using Container – Cachinnate

Answer 3

I tricked by created a div named overlay and set it over the wrapper and manipulated its opacity

export const Wrapper = styled.div`
    width: 100vw;
    height: 100vh;
    background-image:url(${BKHero}); 
    background-position:top;
    background-size:cover;
    .overlay  {
        width:100vw;
        height:100vh;
        background:rgba(333, 444, 331, 0.4);
    }
`

Mana

The question is asking for React Native, not ReactJS – Gorgonzola

Answer 4

You are missing the direction at start:

Try:

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

It will probably work.

Urena