This package offers fast linear gradient implementation specifically for React 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 like react-native-web-linear-gradient and expo-linear-gradient.
Plus, this component supports the React Compiler out of the box.

Also, You don't need any third-party libraries to use linear gradients in React Native.
You can use the experimental_backgroundImage
style property, which is available in React Native 0.76.x and later.
import { Platform, StyleSheet, View } from "react-native";
const styles = StyleSheet.create({
gradient: Platform.select({
web: { backgroundImage: "linear-gradient(...)" }, // works in `react-native-web` by default
default: { experimental_backgroundImage: "linear-gradient(...)" }, // 0.76.x +
}),
});
function App() {
return <View style={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 the react-native-linear-gradient-web
package instead of react-native-linear-gradient
:
// ./my-linear-gradient.web.js
import LinearGradientWeb from "react-native-linear-gradient-web";
export default LinearGradientWeb;
// ./my-linear-gradient.js
import LinearGradient from "react-native-linear-gradient";
export default LinearGradient;
Then you can import ./my-linear-gradient.js
in your codebase, and it will work seamlessly with both web and native platforms.
import React from "react";
import { View } from "react-native";
import LinearGradient from "./my-linear-gradient";
function App() {
return <LinearGradient colors={["red", "gold"]} />;
}
or if you use a Webpack bundler you can use simply adjust your webpack.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 example https://snack.expo.dev/linear-gradient, or use local example in
example/expo
folder. - More examples in the original library: react-native-linear-gradient
flickering when a component mount | Offest & Angle |
---|---|
demo.mp4 |
well-well.mov |
- This package is not compatible with the Tizen runtime (SVG gradient as a background image won't work).