{"id":11779,"library":"react-native-linear-gradient","title":"React Native Linear Gradient","description":"react-native-linear-gradient provides a highly performant `` 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.","status":"active","version":"2.8.3","language":"javascript","source_language":"en","source_url":"https://github.com/react-native-linear-gradient/react-native-linear-gradient","tags":["javascript","typescript"],"install":[{"cmd":"npm install react-native-linear-gradient","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-linear-gradient","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-linear-gradient","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by React Native components.","package":"react","optional":false},{"reason":"Core peer dependency for any React Native module.","package":"react-native","optional":false}],"imports":[{"note":"The `LinearGradient` component is a default export, not a named export. Incorrectly using named import will result in a runtime error.","wrong":"import { LinearGradient } from 'react-native-linear-gradient';","symbol":"LinearGradient","correct":"import LinearGradient from 'react-native-linear-gradient';"},{"note":"For CommonJS environments, you must explicitly access the `default` export when using `require`.","wrong":"const LinearGradient = require('react-native-linear-gradient');","symbol":"LinearGradient","correct":"const LinearGradient = require('react-native-linear-gradient').default;"}],"quickstart":{"code":"import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\n\nconst App = () => {\n return (\n \n \n \n Sign in with Facebook\n \n \n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: '#F5FCFF',\n },\n linearGradient: {\n flex: 1,\n paddingLeft: 15,\n paddingRight: 15,\n borderRadius: 5,\n width: '80%',\n justifyContent: 'center',\n alignItems: 'center',\n },\n buttonText: {\n fontSize: 18,\n fontFamily: 'Gill Sans',\n textAlign: 'center',\n margin: 10,\n color: '#ffffff',\n backgroundColor: 'transparent',\n },\n});\n\nexport default App;","lang":"typescript","description":"Demonstrates a basic usage of LinearGradient component with multiple colors, custom start/end points, and embedded text, styled within a React Native view."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0-beta.2"},{"fix":"Upgrade to v2.8.2 or newer, which removes the problematic `compileOptions` and resolves the Android compilation issues.","message":"Incorrect `compileOptions` in `build.gradle` introduced in v2.8.1 caused compilation failures for some Android environments, particularly around Java 7 compatibility.","severity":"gotcha","affected_versions":"2.8.1"},{"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.","message":"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.","severity":"breaking","affected_versions":">=3.0.0-alpha.0"},{"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 }}`.","message":"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.","severity":"gotcha","affected_versions":"2.7.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement from `import { LinearGradient } from 'react-native-linear-gradient';` to `import LinearGradient from 'react-native-linear-gradient';`","cause":"Attempting to use `LinearGradient` as a named export when it is a default export.","error":"TypeError: (0, _reactNativelinearGradient.LinearGradient) is not a function"},{"fix":"Update `react-native-linear-gradient` to version 2.8.2 or higher to resolve the `build.gradle` compilation problem.","cause":"Related to `compileOptions` added in v2.8.1 that caused issues with some Android build environments (e.g., specific Java versions).","error":"Could not compile settings file 'build.gradle'."},{"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.","cause":"Often seen when React Native native modules are linked incorrectly, or when there's a mismatch in React Native versions or dependencies.","error":"java.lang.NoSuchMethodError: No static method create()Lorg/json/JSONObject; in class Lorg/json/JSONObject;"}],"ecosystem":"npm"}