Registry / web-framework / react-native-web-linear-gradient

react-native-web-linear-gradient

library1.1.2jsnpmunverified

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.

web-framework

npm install react-native-web-linear-gradient

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-WEB-L

react-native-web-linear-gradient

web-frameworkjavascriptv1.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

LinearGradient

✓ import LinearGradient from 'react-native-web-linear-gradient';

✗ const LinearGradient = require('react-native-web-linear-gradient');

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.

Demonstrates installation, the required webpack alias configuration, and basic usage of the LinearGradient component to display a simple gradient on the web.

import React from 'react'; import { View, Text } from 'react-native'; import LinearGradient from 'react-native-linear-gradient'; // Alias will redirect to react-native-web-linear-gradient // Webpack configuration (in webpack.config.js or similar) // module.exports = { // resolve: { // alias: { // 'react-native': 'react-native-web', // 'react-native-linear-gradient': 'react-native-web-linear-gradient', // } // }, // // other webpack config // }; const App = () => { return ( <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style={{ width: 200, height: 150, borderRadius: 10, justifyContent: 'center', alignItems: 'center', }} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} > <Text style={{ color: 'white', fontSize: 20 }}> Gradient Text </Text> </LinearGradient> </View> ); }; export default App;

Debug

Known issues

gotchaThe `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.

fix

Avoid using the `angleCenter` prop. For controlling gradient direction, rely on `start` and `end` props.

affects: >=1.0.0

breakingPrior to v1.1.2, the `onLayout` prop was potentially overwritten by the component's internal logic, preventing custom `onLayout` handlers from functioning correctly.

fix

Upgrade to version 1.1.2 or higher to ensure `onLayout` prop is passed through and functions as expected.

affects: <1.1.2

gotchaCorrect 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.

fix

Ensure your `webpack.config.js` or equivalent build configuration includes the specified alias under `resolve.alias`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'react-native-linear-gradient'

The webpack alias for `react-native-linear-gradient` pointing to `react-native-web-linear-gradient` is missing or incorrect.

fix

Add or correct the alias in your webpack configuration: `resolve: { alias: { 'react-native-linear-gradient': 'react-native-web-linear-gradient' } }`.

Error: A `LinearGradient` component must have at least two colors.

The `colors` prop passed to `LinearGradient` contains fewer than two color values.

fix

Ensure the `colors` array passed to the `LinearGradient` component has at least two hexadecimal or named color strings.

TypeError: Cannot read properties of undefined (reading 'style')

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.

fix

Verify that your webpack alias for `react-native-linear-gradient` is correctly set up to redirect to `react-native-web-linear-gradient`.

Upgrade

Version history

1.1.2latest on npm

Audit

Dependencies

react-native-webrequiredRequired as a peer dependency for rendering React Native components in a web environment.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-native-web-community/react-native-web-linear-gradient ↗

packagehttps://www.npmjs.com/package/react-native-web-linear-gradient ↗