How to properly wrap your component to use a gradient color token

Context

React Native's new architecture (0.76+) supports experimental_backgroundImage, which accepts a standard CSS linear-gradient() string. We use this directly in <LinearView /> instead of a third-party library, so react-native-linear-gradient is no longer a dependency.

<LinearView /> accepts a GradientBackground object (from @ppb/the-wall-common/types/native) and converts it to a CSS gradient string internally. The supported props are:

Prop	Type	Description
`colors`	`(string\|number)[]`	Gradient color stops
`locations`	`number[]`	Position of each color stop (0–1). Optional.
`angle`	`number`	Angle in degrees (0 = top-to-bottom). Optional.
`useAngle`	`boolean`	Whether to use `angle` instead of the default direction. Optional.

Note: angleCenter and start/end props from react-native-linear-gradient are no longer supported and will be ignored if present in a token.

Usage

Let's say we have this gradient token to apply in a PromoCard.tsx native component:

export const PromoBannerLightBackgroundColour = {
  colors: ["#0D2051", "#153F8E"],
  locations: [0, 1],
  useAngle: true,
  angle: 150,
};

As most tokens we use in our native components are directly applied in the component's stylesheet, there might be the case where this PromoBannerLightBackgroundColour could be applied there as a backgroundColor property. If this is the case, we should remove it from the PromoCard stylesheet and pass this token down as a prop to the <LinearView /> wrapper.

import { tokens } from "@ppb/the-wall-common/base-theme";

<LinearView background={tokens.PromoBannerLightBackgroundColour} style={otherStyles}>
  <ComponentView />
  <ComponentPressable />
</LinearView>;

<LinearView /> also accepts a plain ColorValue — it will render a regular <View> with backgroundColor in that case.

Context​

Usage​

Context

Usage