Does React Native styles support gradients

Question

I see that someone made this for it  https   github com brentvatne react-native-linear-gradient  But is there support for it in RN itself  Something like  style   StyleSheet create       backgroundGradient   vertical       backgroundGradientTop    333333       backgroundGradientBottom    666666

User · Answer

Looking for a similar solution I just came across this brand new tutorial, which lets you bridge a Swift gradient background (https://github.com/soffes/GradientView) library while walking through every step to get a working React component.

It is a step-by-step tutorial, allowing you to build your own component by bridging the swift and objective-c component into a usable React Native component, which overrides the standard View component and allows you to define a gradient like the following:

 <LinearGradient 
   style={styles.gradient} 
   locations={[0, 1.0]} 
   colors={['#5ED2A0', '#339CB1']}
 />

You can find the tutorial here: http://browniefed.com/blog/2015/11/28/react-native-how-to-bridge-a-swift-view/

User · Answer

Just export your gradient as SVG and use it using react-native-svg and when after you import your component set width and height and preserveAspectRatio  xMinYMin slice to scale an SVG gradient at your needs

User · Answer

React Native hasn t provided the gradient color yet  But still  you can do it with a nmp package called react-native-linear-gradient or you can  click here for more info    npm install react-native-linear-gradient --save use import LinearGradient from  react-native-linear-gradient   in your application file           lt LinearGradient colors     4c669f     3b5998     192f6a    gt             lt Text gt              Your Text Here            lt  Text gt           lt  LinearGradient gt

User · Answer

First  run npm install expo-linear-gradient --save   You don t need to use an animated tag  but this is what I was using in my code   inside colors    put your gradient colors     then you can use something like this    import   LinearGradient   from  expo-linear-gradient    import   Animated   from  react-native      lt AnimatedLinearGradient     colors    rgba 255 255 255  0     rgba 255 255 255  1         style    your styles go here     gt   const AnimatedLinearGradient   Animated createAnimatedComponent LinearGradient

User · Answer

Here is a good choice for gradients for both platforms iOS and Android  https   github com react-native-community react-native-linear-gradient There are others approaches like expo  however react-native-linear-gradient have worked better for me   lt LinearGradient colors     4c669f     3b5998     192f6a    style  styles linearGradient  gt     lt Text style  styles buttonText  gt      Sign in with Facebook    lt  Text gt   lt  LinearGradient gt      Later on in your styles   var styles   StyleSheet create     linearGradient        flex  1      paddingLeft  15      paddingRight  15      borderRadius  5        buttonText        fontSize  18      fontFamily   Gill Sans       textAlign   center       margin  10      color    ffffff       backgroundColor   transparent

User · Answer

U can try this JS code   https   snack expo io r1v0LwZFb  import React    Component   from  react   import   View   from  react-native    export default class App extends Component     render         const gradientHeight 500      const gradientBackground     purple           const data   Array from   length  gradientHeight             return                lt View style   flex 1   gt                   data map     i    gt                         lt View                         key  i                          style                                position   absolute                               backgroundColor  gradientBackground                              height  1                              bottom   gradientHeight - i                               right  0                              left  0                              zIndex  2                              opacity   1   gradientHeight     i   1                                                   gt                                   lt  View gt

User · Answer

Here is a production ready pure JavaScript solution    lt View styles   backgroundColor   the main color you want    gt       lt Image source   A white to transparent gradient png   gt   lt  View gt    Here is the source code of a npm package using this solution  https   github com flyskywhy react-native-smooth-slider blob 0f18a8bf02e2d436503b9a8ba241440247ef1c44 src Slider js L329  Here is the gradient palette screenshot of saturation and brightness using this npm package  https   github com flyskywhy react-native-slider-color-picker

User · Answer

Not at the moment  You should use the library you linked  they recently added Android support and it is by one of the main contributors of react-native

[react-native] Does React Native styles support gradients?

Examples related to react-native