React Native Linear Gradient

2.8.3 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: (0, _reactNativelinearGradient.LinearGradient) is not a function
```
cause Attempting to use `LinearGradient` as a named export when it is a default export.

fix Change your import statement from `import { LinearGradient } from 'react-native-linear-gradient';` to `import LinearGradient from 'react-native-linear-gradient';`
```
Could not compile settings file 'build.gradle'.
```
cause Related to `compileOptions` added in v2.8.1 that caused issues with some Android build environments (e.g., specific Java versions).

fix Update `react-native-linear-gradient` to version 2.8.2 or higher to resolve the `build.gradle` compilation problem.
```
java.lang.NoSuchMethodError: No static method create()Lorg/json/JSONObject; in class Lorg/json/JSONObject;
```
cause Often seen when React Native native modules are linked incorrectly, or when there's a mismatch in React Native versions or dependencies.

fix Ensure you have properly linked the native module (if not using autolinking), clean your Android/iOS build caches (`cd android && ./gradlew clean` or `cd ios && pod cache clean --all && pod install`), and check for compatibility between your `react-native` version and the `react-native-linear-gradient` version.

Warnings

breaking The Windows platform implementation has been removed in version 3.0.0-beta.2. Projects targeting Windows will no longer be supported by this package.
Fix: Users targeting React Native for Windows will need to find an alternative gradient solution or remain on a version prior to 3.0.0-beta.2. Consider `react-native-windows` specific gradient components if available.
gotcha Incorrect `compileOptions` in `build.gradle` introduced in v2.8.1 caused compilation failures for some Android environments, particularly around Java 7 compatibility.
Fix: Upgrade to v2.8.2 or newer, which removes the problematic `compileOptions` and resolves the Android compilation issues.
breaking Version 3.0.0 introduces support for React Native's New Architecture. While this brings performance benefits, it may require changes for projects still on the old architecture or using specific native module configurations.
Fix: Review the official React Native New Architecture migration guide. For existing projects, consider upgrading incrementally or remaining on the `2.x.x` series until full New Architecture migration is feasible.
gotcha A change to Android native code for receiving `start` and `end` coordinates as `{x, y}` objects was reverted in v2.7.3 due to reported issues.
Fix: Ensure you are using v2.7.3 or later to avoid potential runtime errors or unexpected gradient behavior on Android related to coordinate parsing. The expected format for `start` and `end` is `{{ x: number, y: number }}`.

Install

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

Imports

LinearGradient
wrong:
```
import { LinearGradient } from 'react-native-linear-gradient';
```
correct:
```
import LinearGradient from 'react-native-linear-gradient';
```
The `LinearGradient` component is a default export, not a named export. Incorrectly using named import will result in a runtime error.

LinearGradient

wrong:

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

correct:

const LinearGradient = require('react-native-linear-gradient').default;

For CommonJS environments, you must explicitly access the `default` export when using `require`.

Quickstart

Demonstrates a basic usage of LinearGradient component with multiple colors, custom start/end points, and embedded text, styled within a React Native view.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

const App = () => {
  return (
    <View style={styles.container}>
      <LinearGradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.linearGradient}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >
        <Text style={styles.buttonText}>
          Sign in with Facebook
        </Text>
      </LinearGradient>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  linearGradient: {
    flex: 1,
    paddingLeft: 15,
    paddingRight: 15,
    borderRadius: 5,
    width: '80%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    fontSize: 18,
    fontFamily: 'Gill Sans',
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

export default App;

view raw JSON →