GitHub

Linear Gradient

Linear gradients that work with Tamagui style props

Features

  • Works on native and web.

  • Accepts Tamagui style props and theme colors.

  • Bundles easily with webpack.

Installation

LinearGradient is already installed in tamagui, or you can install it independently:

yarn add @tamagui/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

yarn add expo-linear-gradient

Step 2: Import the setup module

In your app’s entry file (index.js or App.tsx), before any Tamagui imports:

import '@tamagui/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 tamagui export. Import it either separately or using the path /linear-gradient:

import { LinearGradient } from '@tamagui/linear-gradient'

import { LinearGradient } from 'tamagui/linear-gradient'

LinearGradient is a YStack that accepts all Tamagui 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.

wwwwwwwwwwwwwwwwwww

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

Props

  • colors (required)

    string[]

    Two or more colors.

  • locations

    number[] | null

    Default: 

    [0.0, 1.0]

    An array that contains numbers ranging from 0 to 1, inclusive, and is the same length as the colors property. Each number indicates a color-stop location where each respective color should be located.

  • start

    LinearGradientPoint | null

    Default: 

    { x: 0.5, y: 0.0 }

    For example, { x: 0.1, y: 0.2 } means that the gradient will start 10% from the left and 20% from the top.

  • end

    LinearGradientPoint | null

    Default: 

    { x: 0.5, y: 1.0 }

    For example, { x: 0.1, y: 0.2 } means that the gradient will end 10% from the left and 20% from the bottom.

    • Previous

    VisuallyHidden

    Next

    Lucide Icons

    Edit this page on GitHub.