src/components/GradientFill.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import {LinearGradient} from 'expo-linear-gradient'

import {atoms as a, tokens, ViewStyleProp} from '#/alf'

export function GradientFill({
  gradient,
  style,
}: ViewStyleProp & {
  gradient:
    | typeof tokens.gradients.primary
    | typeof tokens.gradients.sky
    | typeof tokens.gradients.midnight
    | typeof tokens.gradients.sunrise
    | typeof tokens.gradients.sunset
    | typeof tokens.gradients.bonfire
    | typeof tokens.gradients.summer
    | typeof tokens.gradients.nordic
}) {
  if (gradient.values.length < 2) {
    throw new Error('Gradient must have at least 2 colors')
  }

  return (
    <LinearGradient
      colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
      locations={
        gradient.values.map(c => c[0]) as [number, number, ...number[]]
      }
      start={{x: 0, y: 0}}
      end={{x: 1, y: 1}}
      style={[a.absolute, a.inset_0, style]}
    />
  )
}