question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

linear-gradient support for React Native

See original GitHub issue

Hey,

There seems to be no support for gradients.

Example:

const Front = styled.View`
   background: linear-gradient(45deg, #1D3475, #060D1F);
`;

returns Failed to parse declaration "background...

I see this is a feature React Native itself lacks, and have found some libraries that provide this functionality, but it would be cool to have access to it via styled-components.

Any ideas on how it could be implemented?

Anth

PS loving styled-components

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:14 (7 by maintainers)

github_iconTop GitHub Comments

40reactions
dengwanccommented, Jan 26, 2018

config react-native-linear-gradient is UNFRIENDLY.

const Front = styled.View`
   background: linear-gradient(45deg, #1D3475, #060D1F);
`;

this will be cool, please

8reactions
mxstbrcommented, Dec 15, 2017

I don’t think there’s anything we can do here, I don’t really want to support react-art. I’d recommend using https://github.com/react-native-community/react-native-linear-gradient!

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native Linear Gradient - GitHub
Open your project in Xcode · Right click on Libraries and click Add Files to "Your Project Name" . · Look under node_modules/react-native-linear-gradient/ios...
Read more >
LinearGradient - Expo Documentation
expo-linear-gradient provides a native React view that transitions between multiple colors in a linear direction. Platform Compatibility. Android Device ...
Read more >
Does React Native styles support gradients? - Stack Overflow
Yes React Native Support Gradient Use react-native-linear-gradient library.
Read more >
Creating complex gradients with react-native-linear-gradient
The LinearGradient component takes in a few props that determine how the gradient will be displayed, including colors, where it starts, and ...
Read more >
Linear Gradient Component in React Native
To Make a Linear Gradient in React Native we will use the LinearGradient component from @react-native-community/react-native-linear-gradient provided by react- ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found