Repository files navigation

This package offers fast linear gradient implementation specifically forReact Native Web.

Its exceptional speed comes from being fully stateless, meaning it avoids setState during layout events. This key difference sets it apart from similar packages likereact-native-web-linear-gradient andexpo-linear-gradient.

Plus, this component supports theReact Compiler out of the box.

Also, You don't need any third-party libraries to use linear gradients in React Native.You can use theexperimental_backgroundImage style property, which is available inReact Native 0.76.x and later.

import{Platform,StyleSheet,View}from"react-native";conststyles=StyleSheet.create({gradient:Platform.select({web:{backgroundImage:"linear-gradient(...)"},// works in `react-native-web` by defaultdefault:{experimental_backgroundImage:"linear-gradient(...)"},// 0.76.x +}),});functionApp(){return<Viewstyle={styles.gradient}/>;}

Install the package using either npm or yarn:

yarn add react-native-linear-gradient-web

You can create a wrapper component that uses thereact-native-linear-gradient-web package instead ofreact-native-linear-gradient:

// ./my-linear-gradient.web.jsimportLinearGradientWebfrom"react-native-linear-gradient-web";exportdefaultLinearGradientWeb;// ./my-linear-gradient.jsimportLinearGradientfrom"react-native-linear-gradient";exportdefaultLinearGradient;

Then you can import./my-linear-gradient.js in your codebase, and it will work seamlessly with both web and native platforms.

importReactfrom"react";import{View}from"react-native";importLinearGradientfrom"./my-linear-gradient";functionApp(){return<LinearGradientcolors={["red","gold"]}/>;}

or if you use a Webpack bundler you can use simply adjust yourwebpack.config.js to include the following alias:

module.exports = {  resolve: {    alias: {      'react-native': 'react-native-web',      // ...+     'react-native-linear-gradient': 'react-native-linear-gradient-web',    },  },};

• Live examplehttps://snack.expo.dev/linear-gradient, or use local example inexample/expo folder.
• More examples in the original library:react-native-linear-gradient

• This package is not compatible with the Tizen runtime (SVG gradient as a background image won't work).