A <LinearGradient>
component for react-native, as seen in
react-native-login.
- Run
npm install react-native-linear-gradient --save
- Open your project in XCode, right click on
Libraries
and click `Add Files to "Your Project Name" (Screenshot). - Add
libBVLinearGradient.a
toBuild Phases -> Link Binary With Libraries
(Screenshot). - Click on
BVLinearGradient.xcodeproj
inLibraries
and go theBuild Phases
tab. Double click the text to the right ofHeader Search Paths
and verify that it has$(SRCROOT)/../react-native/React
- if it isn't, then add it. This is so XCode is able to find the headers that theBVLinearGradient
source files are referring to by pointing to the header files installed within thereact-native
node_modules
directory. (Screenshot). - Whenever you want to use it within React code now you can:
var LinearGradient = require('react-native-linear-gradient');
The following code will produce something like this:
// 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',
},
});
You can also use start and end points, as well as specify the locations
for the gradient color changes with the start
, end
and locations
props:
<LinearGradient
start={[0,0.25]} end={[0.5,1]}
locations={[0,0.5,0.6]}
colors={['#4c669f', '#3b5998', '#192f6a']}
style={styles.linearGradient}>
<Text style={styles.buttonText}>
Sign in with Facebook
</Text>
</LinearGradient>
Check out [Examples/AnimatedGradient] (git clone
this project, cd into it, npm install, open in XCode and run) to see how this is done:
This gif was created using licecap - a great piece of free OSS
You can see this component in action in brentvatne/react-native-login.