react-native-gradient-layout

A lightweight and customizable gradient view component for React Native.
Easily add linear or radial gradients as backgrounds to your views with simple props.

---

✨ Features

• 🎨 Linear and radial gradient support
• 📱 Works on iOS and Android
• 🔧 Customizable colors, direction, and locations
• ⚡ Lightweight and easy to use
• 🖼 Drop-in replacement for react-native-linear-gradient

---

📦 Installation

⚠️ Note: This package requires react-native-svg as a peer dependency.
If you don’t already have it installed, run:

npm install react-native-svg
npm install react-native-gradient-layout
# or
yarn add react-native-svg
yarn add react-native-gradient-layout

🚀 Usage

Wrap your content inside GradientView just like a normal View, and pass gradient props:

import React from "react";
import { Text, StyleSheet } from "react-native";
import GradientView from "react-native-gradient-layout";

export default function App() {
  return (
    <GradientView
      colors={["#8B5CF6", "#F97316"]}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
      style={styles.generateButton}
    >
      <Text style={styles.generateButtonText}>Gradient view →</Text>
    </GradientView>
  );
}

const styles = StyleSheet.create({
  generateButton: {
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
    height: 50,
  },

  generateButtonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "600",
    textAlign: "center",
  },
});