Merge branch 'main' of https://github.com/bluesky-social/social-app

package.json

···
     "react-native-ios-context-menu": "^1.15.3",
     "react-native-keyboard-controller": "^1.17.5",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "^6.7.1",
+    "react-native-pager-view": "6.8.0",
     "react-native-progress": "bluesky-social/react-native-progress",
     "react-native-qrcode-styled": "^0.3.3",
     "react-native-reanimated": "~3.17.5",

src/components/WhoCanReply.tsx

···
-import React from 'react'
+import {Fragment, useMemo} from 'react'
 import {
   Keyboard,
   Platform,
···
   type ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
-import {atoms as a, useTheme} from '#/alf'
-import {Button} from '#/components/Button'
+import {atoms as a, useTheme, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {
···
     ) && post.record.reply?.root
       ? post.record.reply.root.uri
       : post.uri
-  const settings = React.useMemo(() => {
+  const settings = useMemo(() => {
     return threadgateViewToAllowUISetting(post.threadgate)
   }, [post.threadgate])
 
···
   embeddingDisabled: boolean
 }) {
   const {_} = useLingui()
+
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Dialog: adjust who can interact with this post`)}
-        style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
+        style={web({maxWidth: 400})}>
         <View style={[a.gap_sm]}>
           <Text style={[a.font_bold, a.text_xl, a.pb_sm]}>
             <Trans>Who can interact with this post?</Trans>
···
             embeddingDisabled={embeddingDisabled}
           />
         </View>
+        {isNative && (
+          <Button
+            label={_(msg`Close`)}
+            onPress={() => control.close()}
+            size="small"
+            variant="solid"
+            color="secondary"
+            style={[a.mt_5xl]}>
+            <ButtonText>
+              <Trans>Close</Trans>
+            </ButtonText>
+          </Button>
+        )}
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
···
           <Trans>
             Only{' '}
             {settings.map((rule, i) => (
-              <React.Fragment key={`rule-${i}`}>
+              <Fragment key={`rule-${i}`}>
                 <Rule rule={rule} post={post} lists={post.threadgate!.lists} />
                 <Separator i={i} length={settings.length} />
-              </React.Fragment>
+              </Fragment>
             ))}{' '}
             can reply.
           </Trans>

src/components/forms/TextField.tsx

···
         minWidth: 0,
       },
       ios({paddingTop: 12, paddingBottom: 13}),
-      android(a.py_md),
+      // Needs to be sm on Paper, md on Fabric for some godforsaken reason -sfn
+      android(a.py_sm),
       // fix for autofill styles covering border
       web({
         paddingTop: 10,

src/lib/api/index.ts

···
           return {lang: caption.lang, file: data.blob}
         }),
     )
+
+    // lexicon numbers must be floats
+    const width = Math.round(videoDraft.asset.width)
+    const height = Math.round(videoDraft.asset.height)
+
+    // aspect ratio values must be >0 - better to leave as unset otherwise
+    // posting will fail if aspect ratio is set to 0
+    const aspectRatio = width > 0 && height > 0 ? {width, height} : undefined
+
+    if (!aspectRatio) {
+      logger.error(
+        `Invalid aspect ratio - got { width: ${videoDraft.asset.width}, height: ${videoDraft.asset.height} }`,
+      )
+    }
+
     return {
       $type: 'app.bsky.embed.video',
       video: videoDraft.pendingPublish.blobRef,
       alt: videoDraft.altText || undefined,
       captions: captions.length === 0 ? undefined : captions,
-      aspectRatio: {
-        width: videoDraft.asset.width,
-        height: videoDraft.asset.height,
-      },
+      aspectRatio,
     }
   }
   if (embedDraft.media?.type === 'gif') {

src/lib/constants.ts

···
     },
   },
 }
+
+export const PUBLIC_APPVIEW_DID = 'did:web:api.bsky.app'
+export const PUBLIC_STAGING_APPVIEW_DID = 'did:web:api.staging.bsky.dev'

src/lib/hooks/useEmail.ts

···
+import {STALE} from '#/state/queries'
 import {useServiceConfigQuery} from '#/state/queries/email-verification-required'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
···
   const {currentAccount} = useSession()
 
   const {data: serviceConfig} = useServiceConfigQuery()
-  const {data: profile} = useProfileQuery({did: currentAccount?.did})
+  const {data: profile} = useProfileQuery({
+    did: currentAccount?.did,
+    staleTime: STALE.INFINITY,
+  })
 
   const checkEmailConfirmed = !!serviceConfig?.checkEmailConfirmed
 

src/lib/notifications/notifications.ts

···
-import React from 'react'
+import {useCallback, useEffect} from 'react'
+import {Platform} from 'react-native'
 import * as Notifications from 'expo-notifications'
 import {getBadgeCountAsync, setBadgeCountAsync} from 'expo-notifications'
-import {type BskyAgent} from '@atproto/api'
+import {type AtpAgent} from '@atproto/api'
+import debounce from 'lodash.debounce'
 
-import {logEvent} from '#/lib/statsig/statsig'
+import {PUBLIC_APPVIEW_DID, PUBLIC_STAGING_APPVIEW_DID} from '#/lib/constants'
 import {Logger} from '#/logger'
-import {devicePlatform, isAndroid, isNative} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
 import {type SessionAccount, useAgent, useSession} from '#/state/session'
-import BackgroundNotificationHandler from '../../../modules/expo-background-notification-handler'
-
-const SERVICE_DID = (serviceUrl?: string) =>
-  serviceUrl?.includes('staging')
-    ? 'did:web:api.staging.bsky.dev'
-    : 'did:web:api.bsky.app'
+import BackgroundNotificationHandler from '#/../modules/expo-background-notification-handler'
 
 const logger = Logger.create(Logger.Context.Notifications)
 
-async function registerPushToken(
-  agent: BskyAgent,
-  account: SessionAccount,
-  token: Notifications.DevicePushToken,
-) {
+/**
+ * @private
+ * Registers the device's push notification token with the Bluesky server.
+ */
+async function _registerPushToken({
+  agent,
+  currentAccount,
+  token,
+}: {
+  agent: AtpAgent
+  currentAccount: SessionAccount
+  token: Notifications.DevicePushToken
+}) {
   try {
-    await agent.api.app.bsky.notification.registerPush({
-      serviceDid: SERVICE_DID(account.service),
-      platform: devicePlatform,
+    await agent.app.bsky.notification.registerPush({
+      serviceDid: currentAccount.service?.includes('staging')
+        ? PUBLIC_STAGING_APPVIEW_DID
+        : PUBLIC_APPVIEW_DID,
+      platform: Platform.OS,
       token: token.data,
       appId: 'social.deer',
     })
-    logger.debug('Notifications: Sent push token (init)', {
+
+    logger.debug(`registerPushToken: success`, {
       tokenType: token.type,
       token: token.data,
     })
   } catch (error) {
-    logger.error('Notifications: Failed to set push token', {message: error})
+    logger.error(`registerPushToken: failed`, {safeMessage: error})
   }
 }
 
-async function getPushToken(skipPermissionCheck = false) {
-  const granted =
-    skipPermissionCheck || (await Notifications.getPermissionsAsync()).granted
+/**
+ * @private
+ * Debounced version of `_registerPushToken` to prevent multiple calls.
+ */
+const _registerPushTokenDebounced = debounce(_registerPushToken, 100)
+
+/**
+ * Hook to register the device's push notification token with the Bluesky. If
+ * the user is not logged in, this will do nothing.
+ *
+ * Use this instead of using `_registerPushToken` or
+ * `_registerPushTokenDebounced` directly.
+ */
+export function useRegisterPushToken() {
+  const agent = useAgent()
+  const {currentAccount} = useSession()
+
+  return useCallback(
+    ({token}: {token: Notifications.DevicePushToken}) => {
+      if (!currentAccount) return
+      return _registerPushTokenDebounced({
+        agent,
+        currentAccount,
+        token,
+      })
+    },
+    [agent, currentAccount],
+  )
+}
+
+/**
+ * Retreive the device's push notification token, if permissions are granted.
+ */
+async function getPushToken() {
+  const granted = (await Notifications.getPermissionsAsync()).granted
+  logger.debug(`getPushToken`, {granted})
   if (granted) {
     return Notifications.getDevicePushTokenAsync()
   }
 }
 
+/**
+ * Hook to get the device push token and register it with the Bluesky server.
+ * Should only be called after a user has logged-in, since registration is an
+ * authed endpoint.
+ *
+ * N.B. A previous regression in `expo-notifications` caused
+ * `addPushTokenListener` to not fire on Android after calling
+ * `getPushToken()`. Therefore, as insurance, we also call
+ * `registerPushToken` here.
+ *
+ * Because `registerPushToken` is debounced, even if the the listener _does_
+ * fire, it's OK to also call `registerPushToken` below since only a single
+ * call will be made to the server (ideally). This does race the listener (if
+ * it fires), so there's a possibility that multiple calls will be made, but
+ * that is acceptable.
+ *
+ * @see https://github.com/bluesky-social/social-app/pull/4467
+ * @see https://github.com/expo/expo/issues/28656
+ * @see https://github.com/expo/expo/issues/29909
+ */
+export function useGetAndRegisterPushToken() {
+  const registerPushToken = useRegisterPushToken()
+  return useCallback(async () => {
+    /**
+     * This will also fire the listener added via `addPushTokenListener`. That
+     * listener also handles registration.
+     */
+    const token = await getPushToken()
+
+    logger.debug(`useGetAndRegisterPushToken`, {token: token ?? 'undefined'})
+
+    if (token) {
+      /**
+       * The listener should have registered the token already, but just in
+       * case, call the debounced function again.
+       */
+      registerPushToken({token})
+    }
+
+    return token
+  }, [registerPushToken])
+}
+
+/**
+ * Hook to register the device's push notification token with the Bluesky
+ * server, as well as listen for push token updates, should they occurr.
+ *
+ * Registered via the shell, which wraps the navigation stack, meaning if we
+ * have a current account, this handling will be registered and ready to go.
+ */
 export function useNotificationsRegistration() {
-  const agent = useAgent()
   const {currentAccount} = useSession()
+  const registerPushToken = useRegisterPushToken()
+  const getAndRegisterPushToken = useGetAndRegisterPushToken()
 
-  React.useEffect(() => {
-    if (!currentAccount) {
-      return
-    }
+  useEffect(() => {
+    /**
+     * We want this to init right away _after_ we have a logged in user.
+     */
+    if (!currentAccount) return
 
-    // HACK - see https://github.com/bluesky-social/social-app/pull/4467
-    // An apparent regression in expo-notifications causes `addPushTokenListener` to not fire on Android whenever the
-    // token changes by calling `getPushToken()`. This is a workaround to ensure we register the token once it is
-    // generated on Android.
-    if (isAndroid) {
-      ;(async () => {
-        const token = await getPushToken()
+    logger.debug(`useNotificationsRegistration`)
 
-        // Token will be undefined if we don't have notifications permission
-        if (token) {
-          registerPushToken(agent, currentAccount, token)
-        }
-      })()
-    } else {
-      getPushToken()
-    }
+    /**
+     * Init push token, if permissions are granted already. If they weren't,
+     * they'll be requested by the `useRequestNotificationsPermission` hook
+     * below.
+     */
+    getAndRegisterPushToken()
 
-    // According to the Expo docs, there is a chance that the token will change while the app is open in some rare
-    // cases. This will fire `registerPushToken` whenever that happens.
-    const subscription = Notifications.addPushTokenListener(async newToken => {
-      registerPushToken(agent, currentAccount, newToken)
+    /**
+     * Register the push token with the Bluesky server, whenever it changes.
+     * This is also fired any time `getDevicePushTokenAsync` is called.
+     *
+     * According to the Expo docs, there is a chance that the token will change
+     * while the app is open in some rare cases. This will fire
+     * `registerPushToken` whenever that happens.
+     *
+     * @see https://docs.expo.dev/versions/latest/sdk/notifications/#addpushtokenlistenerlistener
+     */
+    const subscription = Notifications.addPushTokenListener(async token => {
+      registerPushToken({token})
+      logger.debug(`addPushTokenListener callback`, {token})
     })
 
     return () => {
       subscription.remove()
     }
-  }, [currentAccount, agent])
+  }, [currentAccount, getAndRegisterPushToken, registerPushToken])
 }
 
 export function useRequestNotificationsPermission() {
   const {currentAccount} = useSession()
-  const agent = useAgent()
+  const getAndRegisterPushToken = useGetAndRegisterPushToken()
 
   return async (
     context: 'StartOnboarding' | 'AfterOnboarding' | 'Login' | 'Home',
···
     }
 
     const res = await Notifications.requestPermissionsAsync()
-    logEvent('notifications:request', {
+
+    logger.metric(`notifications:request`, {
       context: context,
       status: res.status,
     })
 
     if (res.granted) {
-      // This will fire a pushTokenEvent, which will handle registration of the token
-      const token = await getPushToken(true)
-
-      // Same hack as above. We cannot rely on the `addPushTokenListener` to fire on Android due to an Expo bug, so we
-      // will manually register it here. Note that this will occur only:
-      // 1. right after the user signs in, leading to no `currentAccount` account being available - this will be instead
-      // picked up from the useEffect above on `currentAccount` change
-      // 2. right after onboarding. In this case, we _need_ this registration, since `currentAccount` will not change
-      // and we need to ensure the token is registered right after permission is granted. `currentAccount` will already
-      // be available in this case, so the registration will succeed.
-      // We should remove this once expo-notifications (and possibly FCMv1) is fixed and the `addPushTokenListener` is
-      // working again. See https://github.com/expo/expo/issues/28656
-      if (isAndroid && currentAccount && token) {
-        registerPushToken(agent, currentAccount, token)
+      if (currentAccount) {
+        /**
+         * If we have an account in scope, we can safely call
+         * `getAndRegisterPushToken`.
+         */
+        getAndRegisterPushToken()
+      } else {
+        /**
+         * Right after login, `currentAccount` in this scope will be undefined,
+         * but calling `getPushToken` will result in `addPushTokenListener`
+         * listeners being called, which will handle the registration with the
+         * Bluesky server.
+         */
+        getPushToken()
       }
     }
   }

src/locale/locales/en/messages.po

···
 msgid "<0>{0}</0> is included in your starter pack"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:302
+#: src/components/WhoCanReply.tsx:317
 msgid "<0>{0}</0> members"
 msgstr ""
 
···
 msgid "an unknown labeler"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:323
+#: src/components/WhoCanReply.tsx:338
 msgid "and"
 msgstr ""
 
···
 msgid "Blocked post."
 msgstr ""
 
-#: src/screens/Profile/Sections/Labels.tsx:170
+#: src/screens/Profile/Sections/Labels.tsx:203
 msgid "Blocking does not prevent this labeler from placing labels on your account."
 msgstr ""
 
···
 #: src/components/StarterPack/Wizard/WizardEditListDialog.tsx:123
 #: src/components/verification/VerificationsDialog.tsx:144
 #: src/components/verification/VerifierDialog.tsx:144
+#: src/components/WhoCanReply.tsx:200
+#: src/components/WhoCanReply.tsx:207
 #: src/view/com/modals/ChangePassword.tsx:279
 #: src/view/com/modals/ChangePassword.tsx:282
 msgid "Close"
···
 msgid "Developer options"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:185
+#: src/components/WhoCanReply.tsx:186
 msgid "Dialog: adjust who can interact with this post"
 msgstr ""
 
···
 msgid "Everybody can reply"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:228
+#: src/components/WhoCanReply.tsx:243
 msgid "Everybody can reply to this post."
 msgstr ""
 
···
 msgid "Expands or collapses post text"
 msgstr ""
 
-#: src/lib/api/index.ts:406
+#: src/lib/api/index.ts:418
 msgid "Expected uri to resolve to a record"
 msgstr ""
 
···
 msgid "Labels added"
 msgstr ""
 
-#: src/screens/Profile/Sections/Labels.tsx:160
+#: src/screens/Profile/Sections/Labels.tsx:194
 msgid "Labels are annotations on users and content. They can be used to hide, warn, and categorize the network."
 msgstr ""
 
···
 msgstr ""
 
 #: src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx:84
-msgid "Leave them all unchecked to see any language."
+msgid "Leave them all unselected to see any language."
 msgstr ""
 
 #: src/components/dialogs/LinkWarning.tsx:67
···
 msgid "Mention notifications"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:269
+#: src/components/WhoCanReply.tsx:284
 msgid "mentioned users"
 msgstr ""
 
···
 msgid "No one"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:252
+#: src/components/WhoCanReply.tsx:267
 msgid "No one but the author can quote this post."
 msgstr ""
 
···
 msgid "Only .jpg and .png files are supported"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:232
+#: src/components/WhoCanReply.tsx:247
 msgid "Only {0} can reply."
 msgstr ""
 
···
 msgid "Replies disabled"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:230
+#: src/components/WhoCanReply.tsx:245
 msgid "Replies to this post are disabled."
 msgstr ""
 
···
 
 #: src/components/ReportDialog/index.tsx:54
 #: src/screens/Moderation/index.tsx:101
-#: src/screens/Profile/Sections/Labels.tsx:121
+#: src/screens/Profile/Sections/Labels.tsx:184
 msgid "Something went wrong, please try again."
 msgstr ""
 
···
 msgid "Something wrong? Let us know."
 msgstr ""
 
-#: src/App.native.tsx:122
+#: src/App.native.tsx:123
 #: src/App.web.tsx:99
 msgid "Sorry! Your session expired. Please sign in again."
 msgstr ""
···
 msgid "Subscribe"
 msgstr ""
 
-#: src/screens/Profile/Sections/Labels.tsx:198
+#: src/screens/Profile/Sections/Labels.tsx:231
 msgid "Subscribe to @{0} to use these labels:"
 msgstr ""
 
···
 msgid "This label was applied by you."
 msgstr ""
 
-#: src/screens/Profile/Sections/Labels.tsx:185
+#: src/screens/Profile/Sections/Labels.tsx:218
 msgid "This labeler hasn't declared what labels it publishes, and may not be active."
 msgstr ""
 
···
 msgid "This post claims to have been created on <0>{0}</0>, but was first seen by Bluesky on <1>{1}</1>."
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:223
+#: src/components/WhoCanReply.tsx:238
 msgid "This post has an unknown type of threadgate on it. Your app may be out of date."
 msgstr ""
 
···
 msgid "Uploading images..."
 msgstr ""
 
-#: src/lib/api/index.ts:356
-#: src/lib/api/index.ts:380
+#: src/lib/api/index.ts:368
+#: src/lib/api/index.ts:392
 msgid "Uploading link thumbnail..."
 msgstr ""
 
···
 msgid "Username or email address"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:286
+#: src/components/WhoCanReply.tsx:301
 msgid "users followed by <0>@{0}</0>"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:273
+#: src/components/WhoCanReply.tsx:288
 msgid "users following <0>@{0}</0>"
 msgstr ""
 
···
 msgid "Which languages would you like to see in your algorithmic feeds?"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:189
+#: src/components/WhoCanReply.tsx:190
 msgid "Who can interact with this post?"
 msgstr ""
 

src/platform/detection.ts

···
 export const isIOS = Platform.OS === 'ios'
 export const isAndroid = Platform.OS === 'android'
 export const isNative = isIOS || isAndroid
-export const devicePlatform = isIOS ? 'ios' : isAndroid ? 'android' : 'web'
 export const isWeb = !isNative
 export const isMobileWebMediaQuery = 'only screen and (max-width: 1300px)'
 export const isMobileWeb =

src/screens/PostThread/index.tsx

···
 export function PostThread({uri}: {uri: string}) {
   const {gtMobile} = useBreakpoints()
   const {hasSession} = useSession()
-  const initialNumToRender = useInitialNumToRender() // TODO
+  const initialNumToRender = useInitialNumToRender()
   const {height: windowHeight} = useWindowDimensions()
   const anchorPostSource = useUnstablePostSource(uri)
   const feedFeedback = useFeedFeedback(anchorPostSource?.feed, hasSession)
···
           })}
           onStartReached={onStartReached}
           onEndReached={onEndReached}
-          onEndReachedThreshold={2}
+          onEndReachedThreshold={4}
           onStartReachedThreshold={1}
           /**
            * NATIVE ONLY
···
            */
           maintainVisibleContentPosition={{minIndexForVisible: 0}}
           desktopFixedHeight
+          sideBorders={false}
           ListFooterComponent={
             <ListFooter
               /*
···
             />
           }
           initialNumToRender={initialNumToRender}
-          windowSize={11}
-          sideBorders={false}
+          /**
+           * Default: 21
+           */
+          windowSize={7}
+          /**
+           * Default: 10
+           */
+          maxToRenderPerBatch={5}
+          /**
+           * Default: 50
+           */
+          updateCellsBatchingPeriod={100}
         />
       )}
 

src/screens/Profile/Sections/Labels.tsx

···
-import React from 'react'
-import {findNodeHandle, View} from 'react-native'
-import type Animated from 'react-native-reanimated'
-import {useSafeAreaFrame} from 'react-native-safe-area-context'
+import {useCallback, useEffect, useImperativeHandle, useMemo} from 'react'
+import {findNodeHandle, type ListRenderItemInfo, View} from 'react-native'
 import {
   type AppBskyLabelerDefs,
   type InterpretedLabelValueDefinition,
···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {isLabelerSubscribed, lookupLabelValueDefinition} from '#/lib/moderation'
-import {useScrollHandlers} from '#/lib/ScrollContext'
 import {isIOS, isNative} from '#/platform/detection'
-import {type ListRef} from '#/view/com/util/List'
-import {atoms as a, useTheme} from '#/alf'
+import {List, type ListRef} from '#/view/com/util/List'
+import {atoms as a, ios, tokens, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import * as Layout from '#/components/Layout'
+import {ListFooter} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
 import {LabelerLabelPreference} from '#/components/moderation/LabelPreference'
 import {Text} from '#/components/Typography'
···
 import {type SectionRef} from './types'
 
 interface LabelsSectionProps {
+  ref: React.Ref<SectionRef>
   isLabelerLoading: boolean
   labelerInfo: AppBskyLabelerDefs.LabelerViewDetailed | undefined
   labelerError: Error | null
···
   isFocused: boolean
   setScrollViewTag: (tag: number | null) => void
 }
-export const ProfileLabelsSection = React.forwardRef<
-  SectionRef,
-  LabelsSectionProps
->(function LabelsSectionImpl(
-  {
-    isLabelerLoading,
-    labelerInfo,
-    labelerError,
-    moderationOpts,
-    scrollElRef,
-    headerHeight,
-    isFocused,
-    setScrollViewTag,
-  },
+export function ProfileLabelsSection({
   ref,
-) {
-  const {_} = useLingui()
-  const {height: minHeight} = useSafeAreaFrame()
-
-  // Intentionally destructured outside the main thread closure.
-  // See https://github.com/bluesky-social/social-app/pull/4108.
-  const {
-    onBeginDrag: onBeginDragFromContext,
-    onEndDrag: onEndDragFromContext,
-    onScroll: onScrollFromContext,
-    onMomentumEnd: onMomentumEndFromContext,
-  } = useScrollHandlers()
-  const scrollHandler = useAnimatedScrollHandler({
-    onBeginDrag(e, ctx) {
-      onBeginDragFromContext?.(e, ctx)
-    },
-    onEndDrag(e, ctx) {
-      onEndDragFromContext?.(e, ctx)
-    },
-    onScroll(e, ctx) {
-      onScrollFromContext?.(e, ctx)
-    },
-    onMomentumEnd(e, ctx) {
-      onMomentumEndFromContext?.(e, ctx)
-    },
-  })
+  isLabelerLoading,
+  labelerInfo,
+  labelerError,
+  moderationOpts,
+  scrollElRef,
+  headerHeight,
+  isFocused,
+  setScrollViewTag,
+}: LabelsSectionProps) {
+  const t = useTheme()
 
-  const onScrollToTop = React.useCallback(() => {
-    // @ts-ignore TODO fix this
+  const onScrollToTop = useCallback(() => {
+    // @ts-expect-error TODO fix this
     scrollElRef.current?.scrollTo({
       animated: isNative,
       x: 0,
···
     })
   }, [scrollElRef, headerHeight])
 
-  React.useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({
     scrollToTop: onScrollToTop,
   }))
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isIOS && isFocused && scrollElRef.current) {
       const nativeTag = findNodeHandle(scrollElRef.current)
       setScrollViewTag(nativeTag)
     }
   }, [isFocused, scrollElRef, setScrollViewTag])
 
+  const isSubscribed = labelerInfo
+    ? !!isLabelerSubscribed(labelerInfo, moderationOpts)
+    : false
+
+  const labelValues = useMemo(() => {
+    if (isLabelerLoading || !labelerInfo || labelerError) return []
+    const customDefs = interpretLabelValueDefinitions(labelerInfo)
+    return labelerInfo.policies.labelValues
+      .filter((val, i, arr) => arr.indexOf(val) === i) // dedupe
+      .map(val => lookupLabelValueDefinition(val, customDefs))
+      .filter(
+        def => def && def?.configurable,
+      ) as InterpretedLabelValueDefinition[]
+  }, [labelerInfo, labelerError, isLabelerLoading])
+
+  const numItems = labelValues.length
+
+  const renderItem = useCallback(
+    ({item, index}: ListRenderItemInfo<InterpretedLabelValueDefinition>) => {
+      if (!labelerInfo) return null
+      return (
+        <View
+          style={[
+            t.atoms.bg_contrast_25,
+            index === 0 && [
+              a.overflow_hidden,
+              {
+                borderTopLeftRadius: tokens.borderRadius.md,
+                borderTopRightRadius: tokens.borderRadius.md,
+              },
+            ],
+            index === numItems - 1 && [
+              a.overflow_hidden,
+              {
+                borderBottomLeftRadius: tokens.borderRadius.md,
+                borderBottomRightRadius: tokens.borderRadius.md,
+              },
+            ],
+          ]}>
+          {index !== 0 && <Divider />}
+          <LabelerLabelPreference
+            disabled={isSubscribed ? undefined : true}
+            labelDefinition={item}
+            labelerDid={labelerInfo.creator.did}
+          />
+        </View>
+      )
+    },
+    [labelerInfo, isSubscribed, numItems, t],
+  )
+
   return (
-    <Layout.Center style={{minHeight}}>
-      <Layout.Content
-        ref={scrollElRef as React.Ref<Animated.ScrollView>}
-        scrollEventThrottle={1}
-        contentContainerStyle={{
-          paddingTop: headerHeight,
-          borderWidth: 0,
-        }}
-        contentOffset={{x: 0, y: headerHeight * -1}}
-        onScroll={scrollHandler}>
-        {isLabelerLoading ? (
-          <View style={[a.w_full, a.align_center, a.py_4xl]}>
-            <Loader size="xl" />
-          </View>
-        ) : labelerError || !labelerInfo ? (
-          <View style={[a.w_full, a.align_center, a.py_4xl]}>
-            <ErrorState
-              error={
-                labelerError?.toString() ||
-                _(msg`Something went wrong, please try again.`)
-              }
-            />
-          </View>
-        ) : (
-          <ProfileLabelsSectionInner
-            moderationOpts={moderationOpts}
+    <View>
+      <List
+        ref={scrollElRef}
+        data={labelValues}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        contentContainerStyle={a.px_xl}
+        headerOffset={headerHeight}
+        progressViewOffset={ios(0)}
+        ListHeaderComponent={
+          <LabelerListHeader
+            isLabelerLoading={isLabelerLoading}
             labelerInfo={labelerInfo}
+            labelerError={labelerError}
+            hasValues={labelValues.length !== 0}
+            isSubscribed={isSubscribed}
           />
-        )}
-      </Layout.Content>
-    </Layout.Center>
+        }
+        ListFooterComponent={
+          <ListFooter
+            height={headerHeight + 180}
+            style={a.border_transparent}
+          />
+        }
+      />
+    </View>
   )
-})
+}
 
-export function ProfileLabelsSectionInner({
-  moderationOpts,
+function keyExtractor(item: InterpretedLabelValueDefinition) {
+  return item.identifier
+}
+
+export function LabelerListHeader({
+  isLabelerLoading,
+  labelerError,
   labelerInfo,
+  hasValues,
+  isSubscribed,
 }: {
-  moderationOpts: ModerationOpts
-  labelerInfo: AppBskyLabelerDefs.LabelerViewDetailed
+  isLabelerLoading: boolean
+  labelerError?: Error | null
+  labelerInfo?: AppBskyLabelerDefs.LabelerViewDetailed
+  hasValues: boolean
+  isSubscribed: boolean
 }) {
   const t = useTheme()
+  const {_} = useLingui()
 
-  const {labelValues} = labelerInfo.policies
-  const isSubscribed = isLabelerSubscribed(labelerInfo, moderationOpts)
-  const labelDefs = React.useMemo(() => {
-    const customDefs = interpretLabelValueDefinitions(labelerInfo)
-    return labelValues
-      .map(val => lookupLabelValueDefinition(val, customDefs))
-      .filter(
-        def => def && def?.configurable,
-      ) as InterpretedLabelValueDefinition[]
-  }, [labelerInfo, labelValues])
+  if (isLabelerLoading) {
+    return (
+      <View style={[a.w_full, a.align_center, a.py_4xl]}>
+        <Loader size="xl" />
+      </View>
+    )
+  }
+
+  if (labelerError || !labelerInfo) {
+    return (
+      <View style={[a.w_full, a.align_center, a.py_4xl]}>
+        <ErrorState
+          error={
+            labelerError?.toString() ||
+            _(msg`Something went wrong, please try again.`)
+          }
+        />
+      </View>
+    )
+  }
 
   return (
-    <View style={[a.pt_xl, a.px_lg, a.border_t, t.atoms.border_contrast_low]}>
-      <View>
-        <Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
-          <Trans>
-            Labels are annotations on users and content. They can be used to
-            hide, warn, and categorize the network.
-          </Trans>
-        </Text>
-        {labelerInfo.creator.viewer?.blocking ? (
-          <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
-            <CircleInfo size="sm" fill={t.atoms.text_contrast_medium.color} />
-            <Text
-              style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
-              <Trans>
-                Blocking does not prevent this labeler from placing labels on
-                your account.
-              </Trans>
-            </Text>
-          </View>
-        ) : null}
-        {labelValues.length === 0 ? (
-          <Text
-            style={[
-              a.pt_xl,
-              t.atoms.text_contrast_high,
-              a.leading_snug,
-              a.text_sm,
-            ]}>
+    <View style={[a.py_xl]}>
+      <Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
+        <Trans>
+          Labels are annotations on users and content. They can be used to hide,
+          warn, and categorize the network.
+        </Trans>
+      </Text>
+      {labelerInfo?.creator.viewer?.blocking ? (
+        <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
+          <CircleInfo size="sm" fill={t.atoms.text_contrast_medium.color} />
+          <Text style={[t.atoms.text_contrast_high, a.leading_snug, a.text_sm]}>
             <Trans>
-              This labeler hasn't declared what labels it publishes, and may not
-              be active.
+              Blocking does not prevent this labeler from placing labels on your
+              account.
             </Trans>
           </Text>
-        ) : !isSubscribed ? (
-          <Text
-            style={[
-              a.pt_xl,
-              t.atoms.text_contrast_high,
-              a.leading_snug,
-              a.text_sm,
-            ]}>
-            <Trans>
-              Subscribe to @{labelerInfo.creator.handle} to use these labels:
-            </Trans>
-          </Text>
-        ) : null}
-      </View>
-      {labelDefs.length > 0 && (
-        <View
+        </View>
+      ) : null}
+      {!hasValues ? (
+        <Text
+          style={[
+            a.pt_xl,
+            t.atoms.text_contrast_high,
+            a.leading_snug,
+            a.text_sm,
+          ]}>
+          <Trans>
+            This labeler hasn't declared what labels it publishes, and may not
+            be active.
+          </Trans>
+        </Text>
+      ) : !isSubscribed ? (
+        <Text
           style={[
-            a.mt_xl,
-            a.w_full,
-            a.rounded_md,
-            a.overflow_hidden,
-            t.atoms.bg_contrast_25,
+            a.pt_xl,
+            t.atoms.text_contrast_high,
+            a.leading_snug,
+            a.text_sm,
           ]}>
-          {labelDefs.map((labelDef, i) => {
-            return (
-              <React.Fragment key={labelDef.identifier}>
-                {i !== 0 && <Divider />}
-                <LabelerLabelPreference
-                  disabled={isSubscribed ? undefined : true}
-                  labelDefinition={labelDef}
-                  labelerDid={labelerInfo.creator.did}
-                />
-              </React.Fragment>
-            )
-          })}
-        </View>
-      )}
+          <Trans>
+            Subscribe to @{labelerInfo.creator.handle} to use these labels:
+          </Trans>
+        </Text>
+      ) : null}
     </View>
   )
 }

src/state/queries/labeler.ts

···
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 import {z} from 'zod'
 
···
     queryKey: labelerInfoQueryKey(did as string),
     queryFn: async () => {
       const res = await agent.app.bsky.labeler.getServices({
-        dids: [did as string],
+        dids: [did!],
         detailed: true,
       })
       return res.data.views[0] as AppBskyLabelerDefs.LabelerViewDetailed

src/view/com/composer/videos/pickVideo.ts

···
 import {
-  ImagePickerAsset,
+  type ImagePickerAsset,
   launchImageLibraryAsync,
   UIImagePickerPreferredAssetRepresentationMode,
 } from 'expo-image-picker'

src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx

···
         </Trans>
       </Text>
       <Text style={[pal.textLight, styles.description]}>
-        <Trans>Leave them all unchecked to see any language.</Trans>
+        <Trans>Leave them all unselected to see any language.</Trans>
       </Text>
       <ScrollView style={styles.scrollContainer}>
         {languages.map(lang => (

yarn.lock

···
   resolved "https://registry.yarnpkg.com/react-native-mmkv/-/react-native-mmkv-2.12.2.tgz#4bba0f5f04e2cf222494cce3a9794ba6a4894dee"
   integrity sha512-6058Aq0p57chPrUutLGe9fYoiDVDNMU2PKV+lLFUJ3GhoHvUrLdsS1PDSCLr00yqzL4WJQ7TTzH+V8cpyrNcfg==
 
-react-native-pager-view@^6.7.1:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.8.1.tgz#fa0ec09ea7c44190c7c013d75dd09fdc17b96100"
-  integrity sha512-XIyVEMhwq7sZqM7GobOJZXxFCfdFgVNq/CFB2rZIRNRSVPJqE1k1fsc8xfQKfdzsp6Rpt6I7VOIvhmP7/YHdVg==
+react-native-pager-view@6.8.0:
+  version "6.8.0"
+  resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.8.0.tgz#5bac05203d911bf9bf039d47db41b1313dbd1a7a"
+  integrity sha512-/wgFV8nB4TLnQ6j9e3TvNrHbPF5TINMZHaXt86GOV0NSJNMVGkWguniJVKrYLm85LL8KVhRkgdh43Rdu7PvW1A==
 
 react-native-progress@bluesky-social/react-native-progress:
   version "5.0.0"