Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

Usage in Expo project

This is an illustration of a Themed LinearGradient component with default configuration using Expo's LinearGradient component.


Import

To use this component in your project, include the following import statement in your file.
import { LinearGradient } from "@gluestack-ui/themed"

Anatomy

The structure provided below can help you identify and understand a LinearGradient component's various parts.
export default () => <LinearGradient as={} />

Usage in React Native project

This is an illustration of a Themed LinearGradient component with default configuration using React-Native's LinearGradient component.
import React from "react"
import { SafeAreaView } from "react-native"
import { GluestackUIProvider, LinearGradient } from "@gluestack-ui/themed"
import { config } from "@gluestack-ui/config"
import { LinearGradient as RNLinearGradient } from "react-native-linear-gradient"
export default function App() {
return (
<GluestackUIProvider config={config}>
<Example />
</GluestackUIProvider>
)
}
const Example = () => {
return (
<SafeAreaView>
<LinearGradient
p="$16"
colors={["$purple400", "$blue400", "$pink300"]}
borderRadius="$md"
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
as={RNLinearGradient}
></LinearGradient>
</SafeAreaView>
)
}