React Native Web Linear Gradient

1.1.2 · active · verified Sun Apr 19

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.

Common errors

```
Module not found: Error: Can't resolve 'react-native-linear-gradient'
```
cause 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.
```
cause 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')
```
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.

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

Warnings

gotcha 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.
Fix: Avoid using the `angleCenter` prop. For controlling gradient direction, rely on `start` and `end` props.
breaking Prior 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.
gotcha 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.
Fix: Ensure your `webpack.config.js` or equivalent build configuration includes the specified alias under `resolve.alias`.

Install

npm install react-native-web-linear-gradient npm
yarn add react-native-web-linear-gradient yarn
pnpm add react-native-web-linear-gradient pnpm

Imports

LinearGradient
wrong:
```
const LinearGradient = require('react-native-web-linear-gradient');
```
correct:
```
import LinearGradient from '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.

Quickstart

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;

view raw JSON →