Linear Gradient

Linear Gradient that works with Tamagui style props.

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

export function LinearGradientDemo() {
  return (
    <XStack space>
      {/* tokens */}
      <LinearGradient
        width="$6"
        height="$6"
        borderRadius="$4"
        colors={['$red10', '$yellow10']}
        start={[0, 1]}
        end={[0, 0]}
      />

      {/* theme values */}
      <LinearGradient
        width="$6"
        height="$6"
        borderRadius="$4"
        colors={['$background', '$color']}
        start={[1, 1]}
        end={[0, 0]}
      />
    </XStack>
  )
}

Installation

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

yarn
npm
bun
pnpm
yarn add @tamagui/linear-gradient

To use this package you'll need to add expo-linear-gradient to your app. This works with vanilla React Native  or Expo.

Usage

Because LinearGradient requires a more complex to install native package, we've left it out of the tamagui export until Metro supports async import. 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, that places expo-linear-gradient inside it set to absoluteFill.

API Reference

See the expo docs  for more complete information.

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