LinearGradient

This is a recipe for using LinearGradients with gluestack-ui

Usage in Expo project

Usage in React Native project

LinearGradient

A LinearGradient component is a reusable graphical element that helps create linear gradients as background or styling effects within UI elements. A linear gradient is a gradual transition between two or more colors, creating a smooth progression of color changes along a straight line.

Usage in Expo project

import { LinearGradient } from "expo-linear-gradient"
import { styled } from "@gluestack-ui/themed"

const MyLinearGradient = styled(
  LinearGradient,
  {},

  {
    resolveProps: ["colors"],
  },
  {
    propertyTokenMap: {
      colors: "colors",
    },
    propertyResolver: {
      colors: (rawValue: any, resolver: any) => {
        rawValue.forEach((color: any, index: number) => {
          rawValue[index] = resolver(color)
        })
        return rawValue
      },
    },
  }
)

Usage in React Native project

Create a LinearGradient styled component using react-native-linear-gradient from react-native-linear-gradient and styled from @gluestack-ui/themed and use it in your application.

import LinearGradient from "react-native-linear-gradient"
import { styled } from "@gluestack-ui/themed"

const MyLinearGradient = styled(
  LinearGradient,
  {},

  {
    resolveProps: ["colors"],
  },
  {
    propertyTokenMap: {
      colors: "colors",
    },
    propertyResolver: {
      colors: (rawValue: any, resolver: any) => {
        rawValue.forEach((color: any, index: number) => {
          rawValue[index] = resolver(color)
        })
        return rawValue
      },
    },
  }
)

Edit this page on GitHub