Does React Native styles support gradients? - react-native

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"
});

Answer 1

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.

Answer 2

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.

Answer 3

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";
<AnimatedLinearGradient
colors={["rgba(255,255,255, 0)", "rgba(255,255,255, 1)"]}
style={{ your styles go here }}/>
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

Answer 4

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.
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
// 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',
},
});

Answer 5

EXPO? Well, use this method Linear Gradient in React Native using EXPO. (Updated Nov. 2021)
No Pod Installs, No Errors, No additional linked files.
expo install expo-linear-gradient
Then
import { LinearGradient } from 'expo-linear-gradient';
<View style={styles.container}>
<LinearGradient
// Background Linear Gradient
colors={['rgba(0,0,0,0.8)', 'transparent']}
style={styles.background}
/>
<LinearGradient
// Button Linear Gradient
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.button}>
<Text style={styles.text}>Sign in with Facebook</Text>
</LinearGradient>
</View>
Full Link here: https://docs.expo.dev/versions/latest/sdk/linear-gradient/

Answer 6

Here is a production ready pure JavaScript solution:
<View styles={{backgroundColor: `the main color you want`}}>
<Image source={`A white to transparent gradient png`}>
</View>
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

Answer 7

React Native hasn't provided the gradient color yet. But still, you can do it with a NPM 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
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']}> <Text> Your Text Here </Text> </LinearGradient>

Answer 8

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/

Answer 9

A little late to the party but the best solution IMO is using SVG gradient with react-native-svg which is included in most projects.
Here is a few lines versatile component that I use whenever I need a gradient:
Simple SVG Linear Gradient Component
import { View, StyleSheet, ViewProps } from 'react-native'
import Svg, { Defs, Rect, LinearGradient, Stop } from 'react-native-svg'
type GradientProps = { fromColor: string, toColor: string, children?: any, height?: number | string, opacityColor1?: number, opacityColor2?: number } & ViewProps
function Gradient({ children, fromColor, toColor, height = '100%', opacityColor1 = 1, opacityColor2 = 1, ...otherViewProps }: GradientProps) {
const gradientUniqueId = `grad${fromColor}+${toColor}`.replace(/[^a-zA-Z0-9 ]/g, '')
return <>
<View style={[{ ...StyleSheet.absoluteFillObject, height, zIndex: -1, top: 0, left: 0 }, otherViewProps.style]} {...otherViewProps}>
<Svg height='100%' width="100%" style={StyleSheet.absoluteFillObject}>
<Defs>
<LinearGradient id={gradientUniqueId} x1="0%" y1="0%" x2="0%" y2="100%">
<Stop offset="0" stopColor={fromColor} stopOpacity={opacityColor1} />
<Stop offset="1" stopColor={toColor} stopOpacity={opacityColor2} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#${gradientUniqueId})`} />
</Svg>
</View>
{children}
</>
};
export default Gradient
See those example usages on snack

Answer 10

Yes React Native Support Gradient Use react-native-linear-gradient library.