Fix starter pack layout (#7869)

src/screens/StarterPack/StarterPackLandingScreen.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Pressable, ScrollView, View} from 'react-native'
+import {Pressable, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {
   AppBskyGraphDefs,
@@ -25,13 +25,13 @@ import {
 } from '#/state/shell/starter-pack'
 import {LoggedOutScreenState} from '#/view/com/auth/LoggedOut'
 import {formatCount} from '#/view/com/util/numeric/format'
-import {CenteredView} from '#/view/com/util/Views'
 import {Logo} from '#/view/icons/Logo'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import * as FeedCard from '#/components/FeedCard'
 import {useRichText} from '#/components/hooks/useRichText'
+import * as Layout from '#/components/Layout'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
@@ -165,10 +165,8 @@ function LandingScreenLoaded({
   }
 
   return (
-    <CenteredView style={a.flex_1}>
+    <View style={[a.flex_1]}>
-      <ScrollView
+      <Layout.Content ignoreTabletLayoutOffset>
-        style={[a.flex_1, t.atoms.bg]}
-        contentContainerStyle={{paddingBottom: 100}}>
         <LinearGradientBackground
           style={[
             a.align_center,
@@ -313,7 +311,7 @@ function LandingScreenLoaded({
             </ButtonText>
           </Button>
         </View>
-      </ScrollView>
+      </Layout.Content>
       <AppClipOverlay
         visible={appClipOverlayVisible}
         setIsVisible={setAppClipOverlayVisible}
@@ -358,7 +356,7 @@ function LandingScreenLoaded({
           content="app-id=xyz.blueskyweb.app, app-clip-bundle-id=xyz.blueskyweb.app.AppClip, app-clip-display=card"
         />
       )}
-    </CenteredView>
+    </View>
   )
 }
 
@@ -376,11 +374,8 @@ export function AppClipOverlay({
       accessibilityRole="button"
       style={[
         a.absolute,
+        a.inset_0,
         {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
           backgroundColor: 'rgba(0, 0, 0, 0.95)',
           zIndex: 1,
         },

src/screens/StarterPack/StarterPackScreen.tsx

@@ -24,7 +24,6 @@ import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {updateProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {getAllListMembers} from '#/state/queries/list-members'
@@ -43,7 +42,6 @@ import {useSetActiveStarterPack} from '#/state/shell/starter-pack'
 import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
 import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
 import * as Toast from '#/view/com/util/Toast'
-import {CenteredView} from '#/view/com/util/Views'
 import {bulkWriteFollows} from '#/screens/Onboarding/util'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@@ -222,55 +220,53 @@ function StarterPackScreenLoaded({
   }, [onOpenShareDialog, routeParams.new, shareDialogControl])
 
   return (
-    <CenteredView style={[a.h_full_vh]}>
+    <>
-      <View style={isWeb ? {minHeight: '100%'} : {height: '100%'}}>
+      <PagerWithHeader
-        <PagerWithHeader
+        items={tabs}
-          items={tabs}
+        isHeaderReady={true}
-          isHeaderReady={true}
+        renderHeader={() => (
-          renderHeader={() => (
+          <Header
-            <Header
+            starterPack={starterPack}
-              starterPack={starterPack}
+            routeParams={routeParams}
-              routeParams={routeParams}
+            onOpenShareDialog={onOpenShareDialog}
-              onOpenShareDialog={onOpenShareDialog}
+          />
-            />
+        )}>
-          )}>
+        {showPeopleTab
-          {showPeopleTab
+          ? ({headerHeight, scrollElRef}) => (
-            ? ({headerHeight, scrollElRef}) => (
+              <ProfilesList
-                <ProfilesList
+                // Validated above
-                  // Validated above
+                listUri={starterPack!.list!.uri}
-                  listUri={starterPack!.list!.uri}
+                headerHeight={headerHeight}
-                  headerHeight={headerHeight}
+                // @ts-expect-error
-                  // @ts-expect-error
+                scrollElRef={scrollElRef}
-                  scrollElRef={scrollElRef}
+                moderationOpts={moderationOpts}
-                  moderationOpts={moderationOpts}
+              />
-                />
+            )
-              )
+          : null}
-            : null}
+        {showFeedsTab
-          {showFeedsTab
+          ? ({headerHeight, scrollElRef}) => (
-            ? ({headerHeight, scrollElRef}) => (
+              <FeedsList
-                <FeedsList
+                // @ts-expect-error ?
-                  // @ts-expect-error ?
+                feeds={starterPack?.feeds}
-                  feeds={starterPack?.feeds}
+                headerHeight={headerHeight}
-                  headerHeight={headerHeight}
+                // @ts-expect-error
-                  // @ts-expect-error
+                scrollElRef={scrollElRef}
-                  scrollElRef={scrollElRef}
+              />
-                />
+            )
-              )
+          : null}
-            : null}
+        {showPostsTab
-          {showPostsTab
+          ? ({headerHeight, scrollElRef}) => (
-            ? ({headerHeight, scrollElRef}) => (
+              <PostsList
-                <PostsList
+                // Validated above
-                  // Validated above
+                listUri={starterPack!.list!.uri}
-                  listUri={starterPack!.list!.uri}
+                headerHeight={headerHeight}
-                  headerHeight={headerHeight}
+                // @ts-expect-error
-                  // @ts-expect-error
+                scrollElRef={scrollElRef}
-                  scrollElRef={scrollElRef}
+                moderationOpts={moderationOpts}
-                  moderationOpts={moderationOpts}
+              />
-                />
+            )
-              )
+          : null}
-            : null}
+      </PagerWithHeader>
-        </PagerWithHeader>
-      </View>
 
       <QrCodeDialog
         control={qrCodeDialogControl}
@@ -284,7 +280,7 @@ function StarterPackScreenLoaded({
         link={link}
         imageLoaded={imageLoaded}
       />
-    </CenteredView>
+    </>
   )
 }
 
@@ -707,64 +703,57 @@ function InvalidStarterPack({rkey}: {rkey: string}) {
   })
 
   return (
-    <CenteredView
+    <Layout.Content centerContent>
-      style={[
+      <View style={[a.py_4xl, a.px_xl, a.align_center, a.gap_5xl]}>
-        a.flex_1,
+        <View style={[a.w_full, a.align_center, a.gap_lg]}>
-        a.align_center,
+          <Text style={[a.font_bold, a.text_3xl]}>
-        a.gap_5xl,
+            <Trans>Starter pack is invalid</Trans>
-        !gtMobile && a.justify_between,
+          </Text>
-        t.atoms.border_contrast_low,
+          <Text
-        {paddingTop: 175, paddingBottom: 110},
+            style={[
-      ]}
+              a.text_md,
-      sideBorders={true}>
+              a.text_center,
-      <View style={[a.w_full, a.align_center, a.gap_lg]}>
+              t.atoms.text_contrast_high,
-        <Text style={[a.font_bold, a.text_3xl]}>
+              {lineHeight: 1.4},
-          <Trans>Starter pack is invalid</Trans>
+              gtMobile ? {width: 450} : [a.w_full, a.px_lg],
-        </Text>
+            ]}>
-        <Text
+            <Trans>
-          style={[
+              The starter pack that you are trying to view is invalid. You may
-            a.text_md,
+              delete this starter pack instead.
-            a.text_center,
+            </Trans>
-            t.atoms.text_contrast_high,
+          </Text>
-            {lineHeight: 1.4},
+        </View>
-            gtMobile ? {width: 450} : [a.w_full, a.px_lg],
+        <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
-          ]}>
+          <Button
-          <Trans>
+            variant="solid"
-            The starter pack that you are trying to view is invalid. You may
+            color="primary"
-            delete this starter pack instead.
+            label={_(msg`Delete starter pack`)}
-          </Trans>
+            size="large"
-        </Text>
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
+            disabled={isProcessing}
+            onPress={() => {
+              setIsProcessing(true)
+              deleteStarterPack({rkey})
+            }}>
+            <ButtonText>
+              <Trans>Delete</Trans>
+            </ButtonText>
+            {isProcessing && <Loader size="xs" color="white" />}
+          </Button>
+          <Button
+            variant="solid"
+            color="secondary"
+            label={_(msg`Return to previous page`)}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
+            disabled={isProcessing}
+            onPress={goBack}>
+            <ButtonText>
+              <Trans>Go Back</Trans>
+            </ButtonText>
+          </Button>
+        </View>
       </View>
-      <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
+    </Layout.Content>
-        <Button
-          variant="solid"
-          color="primary"
-          label={_(msg`Delete starter pack`)}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
-          disabled={isProcessing}
-          onPress={() => {
-            setIsProcessing(true)
-            deleteStarterPack({rkey})
-          }}>
-          <ButtonText>
-            <Trans>Delete</Trans>
-          </ButtonText>
-          {isProcessing && <Loader size="xs" color="white" />}
-        </Button>
-        <Button
-          variant="solid"
-          color="secondary"
-          label={_(msg`Return to previous page`)}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}
-          disabled={isProcessing}
-          onPress={goBack}>
-          <ButtonText>
-            <Trans>Go Back</Trans>
-          </ButtonText>
-        </Button>
-      </View>
-    </CenteredView>
   )
 }

src/screens/StarterPack/Wizard/index.tsx

@@ -41,7 +41,6 @@ import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {CenteredView} from '#/view/com/util/Views'
 import {useWizardState, WizardStep} from '#/screens/StarterPack/Wizard/State'
 import {StepDetails} from '#/screens/StarterPack/Wizard/StepDetails'
 import {StepFeeds} from '#/screens/StarterPack/Wizard/StepFeeds'
@@ -281,7 +280,7 @@ function WizardInner({
   }
 
   return (
-    <CenteredView style={[a.flex_1]} sideBorders>
+    <Layout.Center style={[a.flex_1]}>
       <Layout.Header.Outer>
         <Layout.Header.BackButton
           label={_(msg`Back`)}
@@ -319,7 +318,7 @@ function WizardInner({
           profile={profile}
         />
       )}
-    </CenteredView>
+    </Layout.Center>
   )
 }