A Table of Contents
InstallationUsing Yarn yarn add react-native-linear-gradient Using npm npm install react-native-linear-gradient --save With React Native >= 0.60Run Linking (for React Native <= 0.59 only)Note: If you are using react-native version 0.60 or higher you don't need to link react-native-linear-gradient. Automaticreact-native link react-native-linear-gradient ManualiOS (with CocoaPods)Add the following line to your Podfile: pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient' Run
In include ':react-native-linear-gradient' project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android') In dependencies { ... implementation project(':react-native-linear-gradient') } In // ... import com.BV.LinearGradient.LinearGradientPackage; // <--- This! // ... @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new LinearGradientPackage() // <---- and This! ); }Windows (WPF)
public override List<IReactPackage> Packages => new List<IReactPackage> { ... new LinearGradientPackage() } Examplesreact-native-login is a legacy component which showcases the use of SimpleThe following code will produce something like this: import LinearGradient from 'react-native-linear-gradient'; // Within your render function <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', }, }); Horizontal gradientUsing the styles from
above, set <LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}> <Text style={styles.buttonText}> Sign in with Facebook </Text> </LinearGradient> Text gradient (iOS)On iOS you can use the <MaskedViewIOS maskElement={<Text style={styles.text} />}> <LinearGradient colors={['#f00', '#0f0']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}> <Text style={[styles.text, { opacity: 0 }]} /> </LinearGradient> </MaskedViewIOS> Animated GradientCheck
out Examples/AnimatedGradient ( This gif was created using licecap - a great piece of free OSS Transparent GradientThe use of // RGBA <LinearGradient colors={['rgba(255, 255, 255, 0)', 'rgba(255, 255, 255, 1)']} {...otherGradientProps} /> // Hex <LinearGradient colors={['#FFFFFF00', '#FFFFFF']} {...otherGradientProps} /> PropsIn addition to regular colorsAn array of at least two color values that represent gradient colors. Example: startAn optional object of the following type: endSame as start, but for the end of the gradient. locationsAn optional array of numbers
defining the location of each gradient color stop, mapping to the color with the same index in <LinearGradient start={{x: 0.0, y: 0.25}} end={{x: 0.5, y: 1.0}} locations={[0,0.5,0.6]} colors={['#4c669f', '#3b5998', '#192f6a']} style={styles.linearGradient}> <Text style={styles.buttonText}> Sign in with Facebook </Text> </LinearGradient> useAngle / angle / angleCenterYou may want to achieve an angled gradient effect, similar to those in image editors like Photoshop. One issue is that you have to calculate the angle based on the view's size, which only happens asynchronously and will cause unwanted flickr. In order to do that correctly you can set
An example appYou can see this component in action in brentvatne/react-native-login. TroubleshootingiOS build fails: library not found, "BVLinearGradient" was not found in the UIManager
Invariant Violation: Element type is invalidEnsure you import the // Like that: import LinearGradient from 'react-native-linear-gradient'; // Not like that: import { LinearGradient } from 'react-native-linear-gradient'; OtherClearing build caches and reinstalling dependencies sometimes solve some issues. Try next steps:
For other troubleshooting issues, go to React Native Troubleshooting Other platforms
LicenseMIT |