This is the pre-release documentation for gluestack-ui with NativeWind (alpha) version. For @gluestack-ui/themed(stable) documentation, refer to the latest release (v1).
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>
<Input
variant="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">
<InputIcon
as={Mail}
color={colorMode === "light" ? "#525252" : "#DBDBDC"}
/>
</InputSlot>
</Input>
<LinearGradient
className="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

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