make linear gradient background easily reusable

src/components/LinearGradientBackground.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import {LinearGradient} from 'expo-linear-gradient'
+
+import {useTheme} from '#/alf'
+
+export function LinearGradientBackground({
+  style,
+  children,
+}: {
+  style: StyleProp<ViewStyle>
+  children: React.ReactNode
+}) {
+  const t = useTheme()
+
+  const gradient =
+    t.name === 'light'
+      ? [t.palette.primary_500, t.palette.primary_300]
+      : [t.palette.primary_600, t.palette.primary_400]
+
+  return (
+    <LinearGradient colors={gradient} style={style}>
+      {children}
+    </LinearGradient>
+  )
+}

src/components/StarterPack/ProfileStarterPacks.tsx

@@ -6,7 +6,6 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyGraphDefs, AppBskyGraphGetActorStarterPacks} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -20,6 +19,7 @@ import {List, ListRef} from 'view/com/util/List'
 import {Text} from 'view/com/util/text/Text'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
+import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 
 interface SectionRef {
@@ -134,14 +134,9 @@ function EmptyComponent() {
   const {_} = useLingui()
   const t = useTheme()
   const navigation = useNavigation<NavigationProp>()
-  const gradient =
-    t.name === 'light'
-      ? [t.palette.primary_500, t.palette.primary_400]
-      : [t.palette.primary_600, t.palette.primary_500]
 
   return (
-    <LinearGradient
-      colors={gradient}
+    <LinearGradientBackground
       style={[
         a.px_md,
         a.py_xl,
@@ -176,6 +171,6 @@ function EmptyComponent() {
           <Trans>Create</Trans>
         </ButtonText>
       </Button>
-    </LinearGradient>
+    </LinearGradientBackground>
   )
 }

src/components/StarterPack/QrCode.tsx

@@ -2,14 +2,15 @@ import React from 'react'
 import {View} from 'react-native'
 import QRCode from 'react-native-qrcode-styled'
 import ViewShot from 'react-native-view-shot'
-import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
+import {makeStarterPackLink} from 'lib/routes/links'
 import {Logo} from 'view/icons/Logo'
 import {Logotype} from 'view/icons/Logotype'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
+import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Text} from '#/components/Typography'
 
 interface Props {
@@ -20,22 +21,15 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
   {starterPack},
   ref,
 ) {
-  const t = useTheme()
   const {record} = starterPack
 
-  const gradient =
-    t.name === 'light'
-      ? [t.palette.primary_500, t.palette.primary_300]
-      : [t.palette.primary_600, t.palette.primary_400]
-
   if (!AppBskyGraphStarterpack.isRecord(record)) {
     return null
   }
 
   return (
     <ViewShot ref={ref}>
-      <LinearGradient
-        colors={gradient}
+      <LinearGradientBackground
         style={[
           {width: 300, height: 440},
           a.align_center,
@@ -56,7 +50,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
           <Trans>Join the conversation</Trans>
         </Text>
         <View style={[a.rounded_sm, a.overflow_hidden]}>
-          <QrCodeInner url="https://bsky.app" />
+          <QrCodeInner url={makeStarterPackLink(starterPack)} />
         </View>
 
         <View style={[a.flex_row, a.align_center, {gap: 5}]}>
@@ -75,7 +69,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
             style={{marginTop: 6, marginLeft: 2}}
           />
         </View>
-      </LinearGradient>
+      </LinearGradientBackground>
     </ViewShot>
   )
 })