Skip to content

retyui/react-native-linear-gradient-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.


⚠️ Warning ⚠️

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} />;
}

Installation

Install the package using either npm or yarn:

yarn add react-native-linear-gradient-web

Usage

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',
    },
  },
};

Examples

Comparison

flickering when a component mount Offest & Angle
demo.mp4
well-well.mov

Known Issues

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

About

Ultra-fast web version of `react-native-linear-gradient` package

Resources

Stars

Watchers

Forks