{"library":"react-native-web-linear-gradient","title":"React Native Web Linear Gradient","description":"react-native-web-linear-gradient provides a web-compatible implementation of `react-native-linear-gradient` for use in React Native for Web projects. It allows developers to render linear gradients on the web using standard CSS gradients, effectively bridging the gap for a common UI component across native and web platforms. The current stable version is 1.1.2. The package follows an active maintenance release cadence, addressing compatibility issues and adding prop support as needed. Its key differentiator is providing a drop-in replacement via webpack aliasing, allowing a single codebase to use `react-native-linear-gradient` and automatically resolve to the web-specific implementation when bundled for the web. It maintains API compatibility with its native counterpart, simplifying cross-platform development.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-web-linear-gradient"],"cli":null},"imports":["import LinearGradient from 'react-native-web-linear-gradient';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { View, Text } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient'; // Alias will redirect to react-native-web-linear-gradient\n\n// Webpack configuration (in webpack.config.js or similar)\n// module.exports = {\n//   resolve: {\n//     alias: {\n//       'react-native': 'react-native-web',\n//       'react-native-linear-gradient': 'react-native-web-linear-gradient',\n//     }\n//   },\n//   // other webpack config\n// };\n\nconst App = () => {\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <LinearGradient\n        colors={['#4c669f', '#3b5998', '#192f6a']}\n        style={{\n          width: 200,\n          height: 150,\n          borderRadius: 10,\n          justifyContent: 'center',\n          alignItems: 'center',\n        }}\n        start={{ x: 0, y: 0 }}\n        end={{ x: 1, y: 1 }}\n      >\n        <Text style={{ color: 'white', fontSize: 20 }}>\n          Gradient Text\n        </Text>\n      </LinearGradient>\n    </View>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Demonstrates installation, the required webpack alias configuration, and basic usage of the LinearGradient component to display a simple gradient on the web.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}