Gradients storybook

src/view/screens/Storybook/Gradients.tsx

@@ -0,0 +1,40 @@
+import {View} from 'react-native'
+
+import {atoms as a, tokens} from '#/alf'
+import {GradientFill} from '#/components/GradientFill'
+import {H1} from '#/components/Typography'
+
+export function Gradients() {
+  return (
+    <View style={[a.gap_md]}>
+      <H1>Gradients</H1>
+
+      <View style={[a.gap_md]}>
+        {(
+          [
+            '0deg',
+            '45deg',
+            '90deg',
+            '135deg',
+            '180deg',
+            '225deg',
+            '270deg',
+            '315deg',
+          ] as const
+        ).map(rotate => (
+          <View
+            key={rotate}
+            style={[
+              a.relative,
+              a.w_full,
+              {
+                height: 600,
+              },
+            ]}>
+            <GradientFill gradient={tokens.gradients.bonfire} rotate={rotate} />
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

src/view/screens/Storybook/index.tsx

@@ -15,6 +15,7 @@ import {Breakpoints} from './Breakpoints'
 import {Buttons} from './Buttons'
 import {Dialogs} from './Dialogs'
 import {Forms} from './Forms'
+import {Gradients} from './Gradients'
 import {Icons} from './Icons'
 import {Links} from './Links'
 import {Menus} from './Menus'
@@ -127,6 +128,8 @@ function StorybookInner() {
             <Breakpoints />
             <Dialogs />
 
+            <Gradients />
+
             <Button
               variant="solid"
               color="primary"