{"library":"react-native-linear-gradient","title":"React Native Linear Gradient","description":"react-native-linear-gradient provides a highly performant `<LinearGradient>` component for React Native applications, allowing developers to easily render linear color gradients. It leverages native modules for both iOS and Android to ensure smooth performance and integration, making it a staple for UI enhancements. The current stable version is 2.8.3, with version 3.0.0 actively under development (currently in beta), which introduces support for React Native's New Architecture. The project maintains a steady release cadence, addressing bugs and adding features, with major versions typically focusing on compatibility with newer React Native architectures and platforms. Its primary differentiation is its native implementation, offering better performance compared to JavaScript-only solutions for gradients.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-linear-gradient"],"cli":null},"imports":["import LinearGradient from 'react-native-linear-gradient';","const LinearGradient = require('react-native-linear-gradient').default;"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\nconst App = () => {\n  return (\n    <View style={styles.container}>\n      <LinearGradient\n        colors={['#4c669f', '#3b5998', '#192f6a']}\n        style={styles.linearGradient}\n        start={{ x: 0, y: 0 }}\n        end={{ x: 1, y: 1 }}\n      >\n        <Text style={styles.buttonText}>\n          Sign in with Facebook\n        </Text>\n      </LinearGradient>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    alignItems: 'center',\n    justifyContent: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n  linearGradient: {\n    flex: 1,\n    paddingLeft: 15,\n    paddingRight: 15,\n    borderRadius: 5,\n    width: '80%',\n    justifyContent: 'center',\n    alignItems: 'center',\n  },\n  buttonText: {\n    fontSize: 18,\n    fontFamily: 'Gill Sans',\n    textAlign: 'center',\n    margin: 10,\n    color: '#ffffff',\n    backgroundColor: 'transparent',\n  },\n});\n\nexport default App;","lang":"typescript","description":"Demonstrates a basic usage of LinearGradient component with multiple colors, custom start/end points, and embedded text, styled within a React Native view.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}