Registry / react-native-linear-gradient

react-native-linear-gradient

library2.8.3jsnpmunverified

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.

npm install react-native-linear-gradient

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-LINEA

react-native-linear-gradient

javascriptv2.8.3

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-linear-gradient';

✗ 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

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

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

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

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;

Debug

Known issues

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

affects: >=3.0.0-beta.2

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

affects: 2.8.1

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

affects: >=3.0.0-alpha.0

gotchaA 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 }}`.

affects: 2.7.2

Errors

Common errors & fixes

TypeError: (0, _reactNativelinearGradient.LinearGradient) is not a function

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

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;

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.

Upgrade

Version history

2.8.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency required by React Native components.

react-nativerequiredCore peer dependency for any React Native module.

Agent activity

8 hits · last 30 days

node

Resources

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

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