JSPM – react-native-linear-gradient@0.1.3

Package Exports

react-native-linear-gradient

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-linear-gradient) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-linear-gradient

A <LinearGradient> component for react-native, as seen in react-native-login.

Add it to your project

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 to Build Phases -> Link Binary With Libraries (Screenshot).
Click on BVLinearGradient.xcodeproj in Libraries and go the Build Phases tab. Double click the text to the right of Header 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 the BVLinearGradient source files are referring to by pointing to the header files installed within the react-native node_modules directory. (Screenshot).
Whenever you want to use it within React code now you can: var LinearGradient = require('react-native-linear-gradient');

Example

The following code will produce something like this:

Example code result

// 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>

Example with extra props

An example app

You can see this component in action in brentvatne/react-native-login.