Linear Gradient

• Works on native and web.
• Accepts Hanzo GUI style props and theme colors.
• Bundles easily with webpack.

Installation

LinearGradient is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/linear-gradient

Native Setup

On native, LinearGradient uses expo-linear-gradient for rendering. This works with vanilla React Native or Expo.

Step 1: Install expo-linear-gradient

npm install expo-linear-gradient

Step 2: Import the setup module

In your app's entry file (index.js or App.tsx), before any Hanzo GUI imports:

import '@hanzogui/native/setup-expo-linear-gradient'

That's it! LinearGradient will automatically detect and use expo-linear-gradient when available.

Without expo-linear-gradient

If you don't set up expo-linear-gradient, LinearGradient will log a warning on native. On web, LinearGradient uses CSS gradients and doesn't require any additional setup.

Usage

Because LinearGradient requires a native package, it is not included in the main @hanzo/gui export. Import it either separately or using the path /linear-gradient:

import { LinearGradient } from '@hanzogui/linear-gradient'
import { LinearGradient } from 'gui/linear-gradient'

LinearGradient is a YStack that accepts all Hanzo GUI style props as well as theme colors. It places expo-linear-gradient inside set to absoluteFill.

API Reference

LinearGradient

See the expo docs for more complete information.

Alternative: backgroundImage style prop

For most gradients, use the backgroundImage style prop:

<View backgroundImage="linear-gradient(to bottom, $background, $color)" />

Use <LinearGradient> for precise color stop control.

LinearGradient extends YStack, inheriting Stack props and therefore the Gui standard props, plus: