LinearGradient
Learn how to use LinearGradient components in React Native for stunning UI effects. Create smooth color transitions with Linear Gradient for beautiful app designs.
Installation
API Reference
This is an illustration of Linear Gradient component in App.tsx file.
import "./global.css"import React, { useState } from "react"import { Input, InputField, InputIcon, InputSlot } from "@/components/ui/input"import { SafeAreaView } from "@/components/ui/safe-area-view"import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider"import { LinearGradient } from "@/components/ui/linear-gradient"import { Heading } from "@/components/ui/heading"import { Text } from "@/components/ui/text"import { Center } from "@/components/ui/center"import { Mail } from "lucide-react-native"export default function App() {const [colorMode, setColorMode] = useState<"dark" | "light">("light")return (<SafeAreaView className="flex-1 justify-center items-center"><GluestackUIProvider mode={colorMode}><Center className="rounded-xl bg-background-0 p-8 m-6 web:max-w-[400px]"><Heading size="xl">Stay up to date</Heading><Text className="text-center leading-[22px] my-2">Subscribe to our newsletter for the latest news and product updates.</Text><Inputvariant="outline"size="md"isDisabled={false}isInvalid={false}isReadOnly={false}className="w-full rounded-full my-3"><InputField placeholder="abc@example.com" /><InputSlot className="pr-3"><InputIconas={Mail}color={colorMode === "light" ? "#525252" : "#DBDBDC"}/></InputSlot></Input><LinearGradientclassName="w-full rounded-full items-center py-2"colors={["#8637CF", "#0F55A1"]}start={[0, 1]}end={[1, 0]}><Text className="text-white font-semibold">Subscribe</Text></LinearGradient></Center></GluestackUIProvider></SafeAreaView>)}
Installation
Expo Linear Gradient
React Native Linear Gradient
Step 1: Install the following dependencies:
npx expo install expo-linear-gradient
Step 2: Copy and paste the following code into your project.
"use client"import React from "react"import { tva } from "@gluestack-ui/nativewind-utils/tva"import { LinearGradient as ExpoLinearGradient } from "expo-linear-gradient"import { cssInterop } from "nativewind"cssInterop(ExpoLinearGradient, {className: "style",})const linearGradientStyle = tva({base: "",})export const LinearGradient = React.forwardRef(({ className, ...props }: any, ref?: any) => {return (<ExpoLinearGradient{...props}className={linearGradientStyle({ class: className })}ref={ref}/>)})
Step 3: Update the import paths to match your project setup.
API Reference
To use this component in your project, include the following import statement in your file.
import { LinearGradient } from "@/components/ui/linear-gradient"
export default () => <LinearGradient />