{"id":11810,"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.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/react-native-web-community/react-native-web-linear-gradient","tags":["javascript","react-native","react-native-web","react-native-linear-gradient","linear-gradient"],"install":[{"cmd":"npm install react-native-web-linear-gradient","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-web-linear-gradient","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-web-linear-gradient","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for rendering React Native components in a web environment.","package":"react-native-web","optional":false}],"imports":[{"note":"While CommonJS `require` might work in some build setups, modern React Native for Web projects typically use ESM imports. Note that due to webpack aliasing, you might actually `import LinearGradient from 'react-native-linear-gradient';` and the alias redirects it.","wrong":"const LinearGradient = require('react-native-web-linear-gradient');","symbol":"LinearGradient","correct":"import LinearGradient from 'react-native-web-linear-gradient';"}],"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."},"warnings":[{"fix":"Avoid using the `angleCenter` prop. For controlling gradient direction, rely on `start` and `end` props.","message":"The `angleCenter` prop, available in the native `react-native-linear-gradient` package, is not supported by `react-native-web-linear-gradient`. Using this prop will have no effect or might lead to unexpected behavior.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to version 1.1.2 or higher to ensure `onLayout` prop is passed through and functions as expected.","message":"Prior to v1.1.2, the `onLayout` prop was potentially overwritten by the component's internal logic, preventing custom `onLayout` handlers from functioning correctly.","severity":"breaking","affected_versions":"<1.1.2"},{"fix":"Ensure your `webpack.config.js` or equivalent build configuration includes the specified alias under `resolve.alias`.","message":"Correct webpack aliasing is crucial. If `'react-native-linear-gradient': 'react-native-web-linear-gradient'` is not configured correctly in your webpack `resolve.alias` settings, your web build will attempt to bundle the native `react-native-linear-gradient` package, leading to build failures or runtime errors on the web.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add or correct the alias in your webpack configuration: `resolve: { alias: { 'react-native-linear-gradient': 'react-native-web-linear-gradient' } }`.","cause":"The webpack alias for `react-native-linear-gradient` pointing to `react-native-web-linear-gradient` is missing or incorrect.","error":"Module not found: Error: Can't resolve 'react-native-linear-gradient'"},{"fix":"Ensure the `colors` array passed to the `LinearGradient` component has at least two hexadecimal or named color strings.","cause":"The `colors` prop passed to `LinearGradient` contains fewer than two color values.","error":"Error: A `LinearGradient` component must have at least two colors."},{"fix":"Verify that your webpack alias for `react-native-linear-gradient` is correctly set up to redirect to `react-native-web-linear-gradient`.","cause":"This can occur if the native `react-native-linear-gradient` package is incorrectly bundled for the web due to missing or incorrect aliasing, leading to native-specific code being executed in a web environment.","error":"TypeError: Cannot read properties of undefined (reading 'style')"}],"ecosystem":"npm"}