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>
   )
 })

src/lib/routes/links.ts

@@ -46,7 +46,7 @@ export function makeStarterPackLink(
   rkey?: string,
 ) {
   if (typeof starterPackOrName === 'string') {
-    return `/starter-pack/${starterPackOrName}/${rkey}`
+    return `/start/${starterPackOrName}/${rkey}`
   } else {
     const rkey = new AtUri(starterPackOrName.uri).rkey
     return makeProfileLink(starterPackOrName.creator, 'starter-pack', rkey)

src/screens/StarterPack/Landing/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import {ScrollView, View} from 'react-native'
-import {LinearGradient} from 'expo-linear-gradient'
 import {
   AppBskyActorDefs,
   AppBskyGraphDefs,
@@ -25,6 +24,7 @@ import {Logo} from 'view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Divider} from '#/components/Divider'
+import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Text} from '#/components/Typography'
 
@@ -78,11 +78,6 @@ function LandingScreenInner({
   const setUsedStarterPack = useSetUsedStarterPack()
   const {isTabletOrDesktop} = useWebMediaQueries()
 
-  const gradient =
-    t.name === 'light'
-      ? [t.palette.primary_500, t.palette.primary_300]
-      : [t.palette.primary_600, t.palette.primary_400]
-
   const sampleProfiles = listItemsSample?.map(item => item.subject)
   const userSets = {
     first: sampleProfiles?.slice(0, 4),
@@ -98,8 +93,7 @@ function LandingScreenInner({
       <ScrollView
         style={[a.flex_1]}
         contentContainerStyle={{paddingBottom: 100}}>
-        <LinearGradient
-          colors={gradient}
+        <LinearGradientBackground
           style={[
             a.align_center,
             a.gap_sm,
@@ -126,7 +120,7 @@ function LandingScreenInner({
               Starter pack by {creator.displayName || `@${creator.handle}`}
             </Text>
           </View>
-        </LinearGradient>
+        </LinearGradientBackground>
         <View style={[a.gap_2xl, a.mt_lg, a.mx_lg]}>
           {record.description ? (
             <Text style={[a.text_md, t.atoms.text_contrast_medium]}>