Fix React Rules violations, enable strict lint

Make React rules violation an error
2024-11-17 20:40:51 +00:00 · 2024-11-17 19:03:42 +00:00
441 changed files with 29192 additions and 80159 deletions
@@ -1,9 +1,10 @@
+const reactCompilerConfig = require('./react-compiler.config.js')
+
 module.exports = {
  root: true,
  extends: [
-    '@react-native',
+    '@react-native-community',
    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
    'plugin:react-native-a11y/ios',
    'prettier',
  ],
@@ -17,8 +18,9 @@ module.exports = {
    'eslint-plugin-react-compiler',
  ],
  rules: {
+    // Temporary until https://github.com/facebook/react-native/pull/43756 gets into a release.
+    'prettier/prettier': 0,
    'react/no-unescaped-entities': 0,
-    'react/prop-types': 0,
    'react-native/no-inline-styles': 0,
    'bsky-internal/avoid-unwrapped-text': [
      'error',
@@ -79,7 +81,7 @@ module.exports = {
      },
    ],
    'simple-import-sort/exports': 'error',
-    'react-compiler/react-compiler': 'warn',
+    'react-compiler/react-compiler': ['error', reactCompilerConfig],
    'no-restricted-imports': [
      'error',
      {
@@ -1,6 +1,26 @@
 const pkg = require('./package.json')

-const DARK_SPLASH_ANDROID_BACKGROUND = '#0f141b'
+const SPLASH_CONFIG = {
+  backgroundColor: '#ffffff',
+  image: './assets/splash.png',
+  resizeMode: 'cover',
+}
+const DARK_SPLASH_CONFIG = {
+  backgroundColor: '#001429',
+  image: './assets/splash-dark.png',
+  resizeMode: 'cover',
+}
+
+const SPLASH_CONFIG_ANDROID = {
+  backgroundColor: '#0c7cff',
+  image: './assets/splash.png',
+  resizeMode: 'cover',
+}
+const DARK_SPLASH_CONFIG_ANDROID = {
+  backgroundColor: '#0f141b',
+  image: './assets/splash-dark.png',
+  resizeMode: 'cover',
+}

 module.exports = function (config) {
  /**
@@ -51,8 +71,10 @@ module.exports = function (config) {
        policy: 'appVersion',
      },
      orientation: 'portrait',
-      icon: './assets/app-icons/ios_icon_default_light.png',
+      icon: './assets/icon.png',
      userInterfaceStyle: 'automatic',
+      splash: SPLASH_CONFIG,
+      // hsl(211, 99%, 53%), same as palette.default.brandText
      primaryColor: '#1083fe',
      ios: {
        supportsTablet: false,
@@ -70,38 +92,12 @@ module.exports = function (config) {
            'Used to save images to your library.',
          NSPhotoLibraryUsageDescription:
            'Used for profile pictures, posts, and other kinds of content',
-          CFBundleSpokenName: 'Blue Sky',
-          CFBundleLocalizations: [
-            'en',
-            'an',
-            'ast',
-            'ca',
-            'de',
-            'es',
-            'fi',
-            'fr',
-            'ga',
-            'gl',
-            'hi',
-            'hu',
-            'id',
-            'it',
-            'ja',
-            'ko',
-            'nl',
-            'pl',
-            'pt-BR',
-            'ru',
-            'th',
-            'tr',
-            'uk',
-            'vi',
-            'yue-Hant',
-            'zh-Hans',
-            'zh-Hant',
-          ],
        },
        associatedDomains: ASSOCIATED_DOMAINS,
+        splash: {
+          ...SPLASH_CONFIG,
+          dark: DARK_SPLASH_CONFIG,
+        },
        entitlements: {
          'com.apple.developer.kernel.increased-memory-limit': true,
          'com.apple.developer.kernel.extended-virtual-addressing': true,
@@ -138,10 +134,10 @@ module.exports = function (config) {
      // Dark nav bar in light mode is better than light nav bar in dark mode
      androidNavigationBar: {
        barStyle: 'light-content',
-        backgroundColor: DARK_SPLASH_ANDROID_BACKGROUND,
+        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
      },
      android: {
-        icon: './assets/app-icons/android_icon_default_light.png',
+        icon: './assets/icon.png',
        adaptiveIcon: {
          foregroundImage: './assets/icon-android-foreground.png',
          monochromeImage: './assets/icon-android-foreground.png',
@@ -167,6 +163,10 @@ module.exports = function (config) {
            category: ['BROWSABLE', 'DEFAULT'],
          },
        ],
+        splash: {
+          ...SPLASH_CONFIG_ANDROID,
+          dark: DARK_SPLASH_CONFIG_ANDROID,
+        },
      },
      web: {
        favicon: './assets/favicon.png',
@@ -206,9 +206,10 @@ module.exports = function (config) {
              newArchEnabled: false,
            },
            android: {
-              compileSdkVersion: 35,
-              targetSdkVersion: 35,
-              buildToolsVersion: '35.0.0',
+              compileSdkVersion: 34,
+              targetSdkVersion: 34,
+              buildToolsVersion: '34.0.0',
+              kotlinVersion: '1.8.0',
              newArchEnabled: false,
            },
          },
@@ -225,6 +226,7 @@ module.exports = function (config) {
        './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
        './plugins/withAndroidManifestPlugin.js',
        './plugins/withAndroidManifestFCMIconPlugin.js',
+        './plugins/withAndroidStylesWindowBackgroundPlugin.js',
        './plugins/withAndroidStylesAccentColorPlugin.js',
        './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
        './plugins/shareExtension/withShareExtensions.js',
@@ -246,100 +248,6 @@ module.exports = function (config) {
            ],
          },
        ],
-        [
-          'expo-splash-screen',
-          {
-            ios: {
-              enableFullScreenImage_legacy: true,
-              backgroundColor: '#ffffff',
-              image: './assets/splash.png',
-              resizeMode: 'cover',
-              dark: {
-                enableFullScreenImage_legacy: true,
-                backgroundColor: '#001429',
-                image: './assets/splash-dark.png',
-                resizeMode: 'cover',
-              },
-            },
-            android: {
-              backgroundColor: '#0c7cff',
-              image: './assets/splash-android-icon.png',
-              imageWidth: 150,
-              dark: {
-                backgroundColor: '#0c2a49',
-                image: './assets/splash-android-icon-dark.png',
-                imageWidth: 150,
-              },
-            },
-          },
-        ],
-        [
-          '@mozzius/expo-dynamic-app-icon',
-          {
-            /**
-             * Default set
-             */
-            default_light: {
-              ios: './assets/app-icons/ios_icon_default_light.png',
-              android: './assets/app-icons/android_icon_default_light.png',
-              prerendered: true,
-            },
-            default_dark: {
-              ios: './assets/app-icons/ios_icon_default_dark.png',
-              android: './assets/app-icons/android_icon_default_dark.png',
-              prerendered: true,
-            },
-
-            /**
-             * Bluesky+ core set
-             */
-            core_aurora: {
-              ios: './assets/app-icons/ios_icon_core_aurora.png',
-              android: './assets/app-icons/android_icon_core_aurora.png',
-              prerendered: true,
-            },
-            core_bonfire: {
-              ios: './assets/app-icons/ios_icon_core_bonfire.png',
-              android: './assets/app-icons/android_icon_core_bonfire.png',
-              prerendered: true,
-            },
-            core_sunrise: {
-              ios: './assets/app-icons/ios_icon_core_sunrise.png',
-              android: './assets/app-icons/android_icon_core_sunrise.png',
-              prerendered: true,
-            },
-            core_sunset: {
-              ios: './assets/app-icons/ios_icon_core_sunset.png',
-              android: './assets/app-icons/android_icon_core_sunset.png',
-              prerendered: true,
-            },
-            core_midnight: {
-              ios: './assets/app-icons/ios_icon_core_midnight.png',
-              android: './assets/app-icons/android_icon_core_midnight.png',
-              prerendered: true,
-            },
-            core_flat_blue: {
-              ios: './assets/app-icons/ios_icon_core_flat_blue.png',
-              android: './assets/app-icons/android_icon_core_flat_blue.png',
-              prerendered: true,
-            },
-            core_flat_white: {
-              ios: './assets/app-icons/ios_icon_core_flat_white.png',
-              android: './assets/app-icons/android_icon_core_flat_white.png',
-              prerendered: true,
-            },
-            core_flat_black: {
-              ios: './assets/app-icons/ios_icon_core_flat_black.png',
-              android: './assets/app-icons/android_icon_core_flat_black.png',
-              prerendered: true,
-            },
-            core_classic: {
-              ios: './assets/app-icons/ios_icon_core_classic.png',
-              android: './assets/app-icons/android_icon_core_classic.png',
-              prerendered: true,
-            },
-          },
-        ],
      ].filter(Boolean),
      extra: {
        eas: {
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m15.604 2.47-.642 1.112a5 5 0 0 1 2.05 4.034H7.005c0-1.658.809-3.123 2.05-4.034L8.41 2.47a.313.313 0 0 1 .542-.313l.627 1.086a5 5 0 0 1 2.428-.63c.882 0 1.709.23 2.428.63l.627-1.085a.31.31 0 0 1 .426-.115.31.31 0 0 1 .115.428ZM9.506 5.114a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Zm3.753 0a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0ZM3.878 8.866a1.251 1.251 0 0 1 2.501 0v5.004a1.252 1.252 0 0 1-2.501 0V8.866Zm13.759 0a1.251 1.251 0 0 1 2.501 0v5.004a1.251 1.251 0 0 1-2.501 0V8.866ZM7.005 17.622h1.25v3.128a1.251 1.251 0 0 0 2.502 0v-3.128h2.502v3.128a1.251 1.251 0 0 0 2.501 0v-3.128h1.25V8.241H7.006v9.381Z" clip-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M14.57 4.348c.65-.775 1.11-1.85 1.11-2.926 0-.149-.013-.3-.04-.422-1.057.04-2.314.708-3.072 1.592-.595.68-1.15 1.756-1.15 2.846 0 .164.027.327.04.38.066.012.175.027.283.027.948 0 2.14-.638 2.83-1.497Zm4.835 3.847.052-.035c-1.407-2.03-3.546-2.084-4.14-2.084-.911 0-1.726.325-2.411.598-.497.198-.925.368-1.271.368-.383 0-.822-.178-1.311-.377-.618-.25-1.317-.534-2.087-.534C5.64 6.13 3 8.296 3 12.379c0 2.545.975 5.227 2.182 6.954C6.224 20.803 7.13 22 8.43 22c.616 0 1.068-.193 1.543-.395.526-.225 1.082-.462 1.922-.462.849 0 1.356.223 1.845.437.455.2.895.393 1.58.393 1.42 0 2.353-1.292 3.246-2.586 1.003-1.47 1.422-2.913 1.435-2.98-.081-.027-2.802-1.13-2.802-4.246 0-2.51 1.855-3.734 2.207-3.966Z" clip-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 6a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.5 2.5a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h13a1 1 0 0 1 .707.293l3 3A1 1 0 0 1 21 7v13a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm6 15h6v-5H9v5Zm8 0v-6a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v6H5V5h2v3a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5.414l2 2V19h-2ZM15 5H9v2h6V5Z" clip-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 4.667A2.667 2.667 0 0 1 8.667 2c1.34 0 2.538.608 3.333 1.564A4.32 4.32 0 0 1 15.333 2 2.667 2.667 0 0 1 18 4.667c0 .859-.25 1.66-.681 2.333H20a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-7V7h.667A2.333 2.333 0 0 0 16 4.667.667.667 0 0 0 15.333 4 2.333 2.333 0 0 0 13 6.333V7h-2v-.667A2.333 2.333 0 0 0 8.667 4 .667.667 0 0 0 8 4.667 2.333 2.333 0 0 0 10.333 7H11v4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.3 4.3 0 0 1 6 4.667ZM11 13H4v7a1 1 0 0 0 1 1h6v-8Zm9 0h-7v8h6a1 1 0 0 0 1-1v-7Z" clip-rule="evenodd"/></svg>
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#1185FE" d="M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z"/></svg>
@@ -1,3 +1,5 @@
+const reactCompilerConfig = require('./react-compiler.config.js')
+
 module.exports = function (api) {
  api.cache(true)
  const isTestEnv = process.env.NODE_ENV === 'test'
@@ -17,7 +19,7 @@ module.exports = function (api) {
    ],
    plugins: [
      'macros',
-      ['babel-plugin-react-compiler', {target: '18'}],
+      ['babel-plugin-react-compiler', reactCompilerConfig],
      [
        'module:react-native-dotenv',
        {
@@ -9,6 +9,7 @@ import {
  AppBskyGraphDefs,
  AppBskyGraphStarterpack,
  AppBskyLabelerDefs,
+  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -436,14 +437,14 @@ function StarterPackEmbed({

 // from #/lib/strings/starter-pack.ts
 function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
-  const rkey = getRkey({uri: starterPack.uri})
+  const rkey = new AtUri(starterPack.uri).rkey
  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
 }

 function getStarterPackHref(
  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = getRkey({uri: starterPack.uri})
+  const rkey = new AtUri(starterPack.uri).rkey
  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
  return `/starter-pack/${handleOrDid}/${rkey}`
 }
@@ -4209,7 +4209,12 @@ yocto-queue@^0.1.0:
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

-zod@^3.21.4, zod@^3.23.8:
+zod@^3.21.4:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
+zod@^3.23.8:
  version "3.23.8"
  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
@@ -257,7 +257,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/privacy-and-security", server.WebGeneric)
 	e.GET("/settings/content-and-media", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
-	e.GET("/settings/app-icon", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
@@ -53,8 +53,7 @@ type OEmbedResponse struct {
 	Version      string `json:"version"`
 	AuthorName   string `json:"author_name,omitempty"`
 	AuthorURL    string `json:"author_url,omitempty"`
-	ProviderName string `json:"provider_name,omitempty"`
-	ProviderURL  string `json:"provider_url,omitempty"`
+	ProviderName string `json:"provider_url,omitempty"`
 	CacheAge     int    `json:"cache_age,omitempty"`
 	Width        *int   `json:"width"`
 	Height       *int   `json:"height"`
@@ -171,7 +170,6 @@ func (srv *Server) WebOEmbed(c echo.Context) error {
 		AuthorName:   "@" + post.Author.Handle,
 		AuthorURL:    fmt.Sprintf("https://bsky.app/profile/%s", post.Author.Handle),
 		ProviderName: "Bluesky Social",
-		ProviderURL:  "https://bsky.app",
 		CacheAge:     86400,
 		Width:        &width,
 		Height:       nil,
@@ -27,21 +27,13 @@

  let player
  function onYouTubeIframeAPIReady() {
-    let videoId = url.searchParams.get('videoId')
-    videoId = decodeURIComponent(videoId)
-    videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
-    if (videoId.length !== 11) throw new Error("Invalid video ID")
-
-    let start = url.searchParams.get('start')
-    start = start.replace(/[^0-9]/g, "")
-
    player = new YT.Player('player', {
      width: "1000",
      height: "1000",
-      videoId,
+      videoId: url.searchParams.get('videoId'),
      playerVars: {
        autoplay: 1,
-        start,
+        start: url.searchParams.get('start'),
        rel: 0,
        loop: 0,
        playsinline: 1,
@@ -40,6 +40,7 @@
    }
    html {
      background-color: white;
+      scrollbar-gutter: stable both-edges;
    }
    @media (prefers-color-scheme: dark) {
      html {
@@ -75,15 +76,9 @@
      top: 50%;
      transform: translateX(-50%) translateY(-50%) translateY(-50px);
    }
-    /**
-     * We need these styles to prevent shifting due to scrollbar show/hide on
-     * OSs that have them enabled by default. This also handles cases where the
-     * screen wouldn't otherwise scroll, and therefore hide the scrollbar and
-     * shift the content, by forcing the page to show a scrollbar.
-     */
+    /* We need this style to prevent web dropdowns from shifting the display when opening */
    body {
      width: 100%;
-      overflow-y: scroll;
    }
  </style>

@@ -18,6 +18,9 @@ jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter', () => {
  }
 })

+// Silence the warning: Animated: `useNativeDriver` is not supported
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
+
 jest.mock('@fortawesome/react-native-fontawesome', () => ({
  FontAwesomeIcon: '',
 }))
@@ -48,9 +51,7 @@ jest.mock('expo-image-manipulator', () => ({
  manipulateAsync: jest.fn().mockResolvedValue({
    uri: 'file://resized-image',
  }),
-  SaveFormat: {
-    JPEG: 'jpeg',
-  },
+  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
 }))

 jest.mock('expo-camera', () => ({
@@ -2,8 +2,6 @@
 module.exports = {
  locales: [
    'en',
-    'an',
-    'ast',
    'ca',
    'de',
    'en-GB',
@@ -11,21 +9,17 @@ module.exports = {
    'fi',
    'fr',
    'ga',
-    'gl',
    'hi',
    'hu',
    'id',
    'it',
    'ja',
    'ko',
-    'nl',
-    'pl',
    'pt-BR',
    'ru',
    'th',
    'tr',
    'uk',
-    'vi',
    'zh-CN',
    'zh-HK',
    'zh-TW',
@@ -9,11 +9,6 @@ cfg.resolver.sourceExts = process.env.RN_SRC_EXT
 if (cfg.resolver.resolveRequest) {
  throw Error('Update this override because it is conflicting now.')
 }
-
-if (process.env.BSKY_PROFILE) {
-  cfg.cacheVersion += ':PROFILE'
-}
-
 cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  // HACK: manually resolve a few packages that use `exports` in `package.json`.
  // A proper solution is to enable `unstable_enablePackageExports` but this needs careful testing.
@@ -34,15 +29,6 @@ cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === '@ipld/dag-cbor') {
    return context.resolveRequest(context, '@ipld/dag-cbor/src', platform)
  }
-  if (process.env.BSKY_PROFILE) {
-    if (moduleName.endsWith('ReactNativeRenderer-prod')) {
-      return context.resolveRequest(
-        context,
-        moduleName.replace('-prod', '-profiling'),
-        platform,
-      )
-    }
-  }
  return context.resolveRequest(context, moduleName, platform)
 }

@@ -88,7 +88,7 @@ repositories {

 dependencies {
  implementation 'androidx.appcompat:appcompat:1.6.1'
-    def GLIDE_VERSION = "4.16.0"
+    def GLIDE_VERSION = "4.13.2"

  implementation project(':expo-modules-core')
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
@@ -5,7 +5,6 @@ import android.graphics.Color
 import android.graphics.drawable.Animatable
 import android.graphics.drawable.Drawable
 import com.bumptech.glide.Glide
-import com.bumptech.glide.load.DataSource
 import com.bumptech.glide.load.engine.DiskCacheStrategy
 import com.bumptech.glide.load.engine.GlideException
 import com.bumptech.glide.request.RequestListener
@@ -16,8 +15,8 @@ import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView

 class GifView(
-        context: Context,
-        appContext: AppContext,
+  context: Context,
+  appContext: AppContext,
 ) : ExpoView(context, appContext) {
  // Events
  private val onPlayerStateChange by EventDispatcher()
@@ -82,65 +81,66 @@ class GifView(
    }

    this.webpRequest =
-            glide.load(source)
-                    .diskCacheStrategy(DiskCacheStrategy.DATA)
-                    .skipMemoryCache(false)
-                    .listener(
-                            object : RequestListener<Drawable> {
-                              override fun onResourceReady(
-                                      resource: Drawable,
-                                      model: Any,
-                                      target: Target<Drawable>?,
-                                      dataSource: DataSource,
-                                      isFirstResource: Boolean
-                              ): Boolean {
-                                placeholderRequest?.let { glide.clear(it) }
-                                return false
-                              }
+      glide
+        .load(source)
+        .diskCacheStrategy(DiskCacheStrategy.DATA)
+        .skipMemoryCache(false)
+        .listener(
+          object : RequestListener<Drawable> {
+            override fun onResourceReady(
+              resource: Drawable?,
+              model: Any?,
+              target: Target<Drawable>?,
+              dataSource: com.bumptech.glide.load.DataSource?,
+              isFirstResource: Boolean,
+            ): Boolean {
+              if (placeholderRequest != null) {
+                glide.clear(placeholderRequest)
+              }
+              return false
+            }

-                              override fun onLoadFailed(
-                                      e: GlideException?,
-                                      model: Any?,
-                                      target: Target<Drawable>,
-                                      isFirstResource: Boolean
-                              ): Boolean = true
-                            }
-                    )
-                    .into(this.imageView)
+            override fun onLoadFailed(
+              e: GlideException?,
+              model: Any?,
+              target: Target<Drawable>?,
+              isFirstResource: Boolean,
+            ): Boolean = true
+          },
+        ).into(this.imageView)

    if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
      this.placeholderRequest =
-              glide.load(placeholderSource)
-                      .diskCacheStrategy(DiskCacheStrategy.DATA)
-                      // Let's not bloat the memory cache with placeholders
-                      .skipMemoryCache(true)
-                      .listener(
-                              object : RequestListener<Drawable> {
-                                override fun onResourceReady(
-                                        resource: Drawable,
-                                        model: Any,
-                                        target: Target<Drawable>?,
-                                        dataSource: DataSource,
-                                        isFirstResource: Boolean
-                                ): Boolean {
-                                  // Incase this request finishes after the webp, let's just not set
-                                  // the drawable. This shouldn't happen because the request should
-                                  // get cancelled
-                                  if (imageView.drawable == null) {
-                                    imageView.setImageDrawable(resource)
-                                  }
-                                  return true
-                                }
+        glide
+          .load(placeholderSource)
+          .diskCacheStrategy(DiskCacheStrategy.DATA)
+          // Let's not bloat the memory cache with placeholders
+          .skipMemoryCache(true)
+          .listener(
+            object : RequestListener<Drawable> {
+              override fun onResourceReady(
+                resource: Drawable?,
+                model: Any?,
+                target: Target<Drawable>?,
+                dataSource: com.bumptech.glide.load.DataSource?,
+                isFirstResource: Boolean,
+              ): Boolean {
+                // Incase this request finishes after the webp, let's just not set
+                // the drawable. This shouldn't happen because the request should get cancelled
+                if (imageView.drawable == null) {
+                  imageView.setImageDrawable(resource)
+                }
+                return true
+              }

-                                override fun onLoadFailed(
-                                        e: GlideException?,
-                                        model: Any?,
-                                        target: Target<Drawable>,
-                                        isFirstResource: Boolean
-                                ): Boolean = true
-                              },
-                      )
-                      .submit()
+              override fun onLoadFailed(
+                e: GlideException?,
+                model: Any?,
+                target: Target<Drawable>?,
+                isFirstResource: Boolean,
+              ): Boolean = true
+            },
+          ).submit()
    }
  }

@@ -174,10 +174,10 @@ class GifView(

  fun firePlayerStateChange() {
    onPlayerStateChange(
-            mapOf(
-                    "isPlaying" to this.isPlaying,
-                    "isLoaded" to this.isLoaded,
-            ),
+      mapOf(
+        "isPlaying" to this.isPlaying,
+        "isLoaded" to this.isLoaded,
+      ),
    )
  }

@@ -1,6 +1,6 @@
 {
  "name": "bsky.app",
-  "version": "1.96.0",
+  "version": "1.94.0",
  "private": true,
  "engines": {
    "node": ">=20"
@@ -11,8 +11,6 @@
    "postinstall": "patch-package && yarn intl:compile",
    "prebuild": "expo prebuild --clean",
    "android": "expo run:android",
-    "android:prod": "expo run:android --variant release",
-    "android:profile": "BSKY_PROFILE=1 expo run:android --variant release",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "use-build-number": "./scripts/useBuildNumberEnv.sh",
@@ -25,6 +23,7 @@
    "build-embed": "cd bskyembed && yarn build && yarn build-snippet && cd .. && node ./scripts/post-embed-build.js",
    "start": "expo start --dev-client",
    "start:prod": "expo start --dev-client --no-dev --minify",
+    "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
    "test": "NODE_ENV=test jest --forceExit --testTimeout=20000 --bail",
    "test-watch": "NODE_ENV=test jest --watchAll",
    "test-ci": "NODE_ENV=test jest --ci --forceExit --reporters=default --reporters=jest-junit",
@@ -54,7 +53,7 @@
    "icons:optimize": "svgo -f ./assets/icons"
  },
  "dependencies": {
-    "@atproto/api": "^0.13.18",
+    "@atproto/api": "^0.13.11",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -71,17 +70,17 @@
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@haileyok/bluesky-video": "0.2.4",
    "@ipld/dag-cbor": "^9.2.0",
-    "@lingui/react": "^4.14.1",
+    "@lingui/react": "^4.5.0",
    "@mattermost/react-native-paste-input": "^0.7.1",
    "@miblanchard/react-native-slider": "^2.3.1",
-    "@mozzius/expo-dynamic-app-icon": "^1.4.1",
    "@radix-ui/react-dismissable-layer": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "2.0.1",
    "@radix-ui/react-focus-guards": "^1.1.1",
    "@radix-ui/react-focus-scope": "^1.1.0",
    "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-native-menu/menu": "^1.1.7",
-    "@react-native-picker/picker": "2.10.2",
+    "@react-native-masked-view/masked-view": "0.3.0",
+    "@react-native-menu/menu": "^1.1.0",
+    "@react-native-picker/picker": "2.6.1",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.1.17",
@@ -90,18 +89,18 @@
    "@tanstack/query-async-storage-persister": "^5.25.0",
    "@tanstack/react-query": "^5.8.1",
    "@tanstack/react-query-persist-client": "^5.25.0",
-    "@tiptap/core": "^2.9.1",
-    "@tiptap/extension-document": "^2.9.1",
-    "@tiptap/extension-hard-break": "^2.9.1",
-    "@tiptap/extension-history": "^2.9.1",
-    "@tiptap/extension-mention": "^2.9.1",
-    "@tiptap/extension-paragraph": "^2.9.1",
-    "@tiptap/extension-placeholder": "^2.9.1",
-    "@tiptap/extension-text": "^2.9.1",
-    "@tiptap/html": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/suggestion": "^2.9.1",
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/extension-document": "^2.6.6",
+    "@tiptap/extension-hard-break": "^2.6.6",
+    "@tiptap/extension-history": "^2.6.6",
+    "@tiptap/extension-mention": "^2.6.6",
+    "@tiptap/extension-paragraph": "^2.6.6",
+    "@tiptap/extension-placeholder": "^2.6.6",
+    "@tiptap/extension-text": "^2.6.6",
+    "@tiptap/html": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/react": "^2.6.6",
+    "@tiptap/suggestion": "^2.6.6",
    "@types/invariant": "^2.2.37",
    "@types/lodash.throttle": "^4.1.9",
    "@types/node": "^20.14.3",
@@ -118,33 +117,32 @@
    "emoji-mart": "^5.5.2",
    "emoji-regex": "^10.4.0",
    "eventemitter3": "^5.0.1",
-    "expo": "~52.0.17",
-    "expo-application": "^6.0.1",
-    "expo-blur": "^14.0.1",
-    "expo-build-properties": "^0.13.1",
-    "expo-camera": "~16.0.7",
-    "expo-clipboard": "^7.0.0",
-    "expo-dev-client": "^5.0.4",
-    "expo-device": "~7.0.1",
-    "expo-file-system": "^18.0.4",
-    "expo-font": "~13.0.1",
-    "expo-haptics": "^14.0.0",
-    "expo-image": "~2.0.3",
-    "expo-image-manipulator": "^13.0.5",
-    "expo-image-picker": "~16.0.3",
-    "expo-linear-gradient": "^14.0.1",
-    "expo-linking": "^7.0.3",
-    "expo-localization": "~16.0.0",
-    "expo-media-library": "~17.0.3",
-    "expo-navigation-bar": "~4.0.4",
-    "expo-notifications": "~0.29.10",
-    "expo-sharing": "^13.0.0",
-    "expo-splash-screen": "~0.29.16",
-    "expo-status-bar": "~2.0.0",
-    "expo-system-ui": "^4.0.4",
-    "expo-task-manager": "~12.0.3",
-    "expo-updates": "~0.26.9",
-    "expo-web-browser": "~14.0.1",
+    "expo": "^51.0.8",
+    "expo-application": "^5.9.1",
+    "expo-blur": "^13.0.2",
+    "expo-build-properties": "^0.12.1",
+    "expo-camera": "~15.0.9",
+    "expo-clipboard": "^6.0.3",
+    "expo-dev-client": "^4.0.14",
+    "expo-device": "~6.0.2",
+    "expo-file-system": "^17.0.1",
+    "expo-font": "~12.0.10",
+    "expo-haptics": "^13.0.1",
+    "expo-image": "~1.12.9",
+    "expo-image-manipulator": "^12.0.5",
+    "expo-image-picker": "~15.0.5",
+    "expo-linear-gradient": "^13.0.2",
+    "expo-linking": "^6.3.1",
+    "expo-localization": "~15.0.3",
+    "expo-media-library": "~16.0.3",
+    "expo-navigation-bar": "~3.0.4",
+    "expo-notifications": "~0.28.7",
+    "expo-sharing": "^12.0.1",
+    "expo-splash-screen": "~0.27.4",
+    "expo-status-bar": "~1.12.1",
+    "expo-task-manager": "~11.8.1",
+    "expo-updates": "~0.25.14",
+    "expo-web-browser": "~13.0.3",
    "fast-text-encoding": "^1.0.6",
    "history": "^5.3.0",
    "hls.js": "^1.5.11",
@@ -154,6 +152,11 @@
    "lodash.chunk": "^4.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
+    "lodash.omit": "^4.5.0",
+    "lodash.once": "^4.1.1",
+    "lodash.random": "^3.2.0",
+    "lodash.samplesize": "^4.2.0",
+    "lodash.set": "^4.3.2",
    "lodash.shuffle": "^4.2.0",
    "lodash.throttle": "^4.1.1",
    "multiformats": "^13.1.0",
@@ -163,37 +166,36 @@
    "postinstall-postinstall": "^2.1.0",
    "psl": "^1.9.0",
    "react": "18.2.0",
-    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-compiler-runtime": "^19.0.0-beta-a7bf2bd-20241110",
    "react-dom": "^18.2.0",
    "react-image-crop": "^11.0.7",
    "react-keyed-flatten-children": "^3.0.0",
-    "react-native": "0.76.3",
-    "react-native-compressor": "1.10.3",
-    "react-native-date-picker": "^5.0.7",
-    "react-native-drawer-layout": "^4.0.4",
-    "react-native-gesture-handler": "2.20.2",
+    "react-native": "0.74.1",
+    "react-native-compressor": "^1.8.24",
+    "react-native-date-picker": "^4.4.2",
+    "react-native-drawer-layout": "^4.0.1",
+    "react-native-gesture-handler": "2.20.0",
    "react-native-get-random-values": "~1.11.0",
-    "react-native-image-crop-picker": "^0.41.6",
+    "react-native-image-crop-picker": "0.41.2",
    "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.14.5",
+    "react-native-keyboard-controller": "^1.14.0",
    "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.6.1",
-    "react-native-picker-select": "^9.3.1",
+    "react-native-pager-view": "6.2.3",
+    "react-native-picker-select": "^9.1.3",
    "react-native-progress": "bluesky-social/react-native-progress",
-    "react-native-qrcode-styled": "^0.3.3",
-    "react-native-reanimated": "^3.16.3",
+    "react-native-qrcode-styled": "^0.3.1",
+    "react-native-reanimated": "^3.16.1",
    "react-native-root-siblings": "^4.1.1",
-    "react-native-safe-area-context": "4.14.0",
-    "react-native-screens": "~4.3.0",
-    "react-native-svg": "^15.8.0",
-    "react-native-uitextview": "^1.4.0",
+    "react-native-safe-area-context": "4.10.1",
+    "react-native-screens": "~3.31.1",
+    "react-native-svg": "^15.3.0",
+    "react-native-uitextview": "^1.3.0",
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.2",
-    "react-native-view-shot": "^4.0.3",
-    "react-native-web": "~0.19.13",
+    "react-native-view-shot": "^3.8.0",
+    "react-native-web": "~0.19.11",
    "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "13.12.3",
-    "react-remove-scroll-bar": "^2.3.6",
+    "react-native-webview": "13.10.2",
    "react-responsive": "^9.0.2",
    "react-textarea-autosize": "^8.5.3",
    "rn-fetch-blob": "^0.12.0",
@@ -205,70 +207,83 @@
    "zod": "^3.20.2"
  },
  "devDependencies": {
-    "@atproto/dev-env": "^0.3.64",
-    "@babel/core": "^7.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/runtime": "^7.26.0",
+    "@atproto/dev-env": "^0.3.55",
+    "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/runtime": "^7.20.0",
    "@did-plc/server": "^0.0.1",
-    "@expo/config-plugins": "9.0.10",
-    "@expo/prebuild-config": "8.0.22",
-    "@lingui/cli": "^4.14.1",
-    "@lingui/macro": "^4.14.1",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@react-native/eslint-config": "^0.76.2",
-    "@react-native/typescript-config": "^0.76.1",
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "^12.8.1",
+    "@expo/config-plugins": "8.0.4",
+    "@expo/prebuild-config": "6.7.0",
+    "@lingui/cli": "^4.5.0",
+    "@lingui/macro": "^4.5.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native/typescript-config": "^0.74.1",
+    "@testing-library/jest-native": "^5.4.1",
+    "@testing-library/react-native": "^11.5.2",
+    "@tsconfig/react-native": "^2.0.3",
+    "@types/he": "^1.1.2",
    "@types/jest": "^29.4.0",
    "@types/lodash.chunk": "^4.2.7",
    "@types/lodash.debounce": "^4.0.7",
    "@types/lodash.isequal": "^4.5.6",
+    "@types/lodash.omit": "^4.5.7",
+    "@types/lodash.once": "^4.1.7",
+    "@types/lodash.random": "^3.2.7",
+    "@types/lodash.samplesize": "^4.2.7",
+    "@types/lodash.set": "^4.3.7",
    "@types/lodash.shuffle": "^4.2.7",
    "@types/psl": "^1.1.1",
-    "@types/react-dom": "^18.3.1",
+    "@types/react-dom": "^18.2.18",
    "@types/react-responsive": "^8.0.5",
    "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.2",
    "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-module-resolver": "^5.0.2",
-    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
-    "babel-preset-expo": "^12.0.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "babel-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
+    "babel-plugin-react-native-web": "^0.18.12",
+    "babel-preset-expo": "^10.0.0",
    "eslint": "^8.19.0",
    "eslint-plugin-bsky-internal": "link:./eslint",
    "eslint-plugin-ft-flow": "^2.0.3",
    "eslint-plugin-lingui": "^0.2.0",
    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
    "eslint-plugin-react-native-a11y": "^3.3.0",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "file-loader": "6.2.0",
+    "html-webpack-plugin": "^5.5.0",
    "husky": "^8.0.3",
    "is-ci": "^3.0.1",
    "jest": "^29.7.0",
-    "jest-expo": "^52.0.2",
-    "jest-junit": "^16.0.0",
+    "jest-expo": "^50.0.1",
+    "jest-junit": "^15.0.0",
    "lint-staged": "^13.2.3",
-    "metro-react-native-babel-preset": "^0.76.9",
+    "metro-react-native-babel-preset": "^0.74.1",
    "prettier": "^2.8.3",
-    "react-native-dotenv": "^3.4.11",
+    "react-native-dotenv": "^3.3.1",
    "react-refresh": "^0.14.0",
    "react-test-renderer": "18.2.0",
    "svgo": "^3.3.2",
    "ts-node": "^10.9.1",
-    "typescript": "^5.7.2",
-    "webpack-bundle-analyzer": "^4.10.1"
+    "typescript": "^5.5.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
  },
  "resolutions": {
-    "@expo/image-utils": "0.6.3",
-    "@react-native/babel-preset": "0.76.1",
-    "@react-native/normalize-colors": "0.76.1",
-    "@radix-ui/react-focus-scope": "1.1.0",
    "@types/react": "^18",
+    "**/zeed-dom": "0.10.9",
+    "**/zod": "3.23.8",
    "**/expo-constants": "16.0.1",
    "**/expo-device": "6.0.2",
-    "**/zod": "3.23.8"
+    "@react-native/babel-preset": "0.74.1",
+    "@radix-ui/react-focus-scope": "1.1.0"
  },
  "jest": {
    "preset": "jest-expo/ios",
@@ -0,0 +1,18 @@
+diff --git a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/exporters/RawImageExporter.kt b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/exporters/RawImageExporter.kt
+index f339e5f..fa35e82 100644
+--- a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/exporters/RawImageExporter.kt
+++ b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/exporters/RawImageExporter.kt
+@@ -16,7 +16,12 @@ class RawImageExporter : ImageExporter {
+     copyFile(source, output, contentResolver)
+     val exifInterface = ExifInterface(output.absolutePath)
+     val imageRotation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION, 0)
+-    val isRotatedLandscape = (imageRotation == ExifInterface.ORIENTATION_ROTATE_90 || imageRotation == ExifInterface.ORIENTATION_ROTATE_270)
+    val isRotatedLandscape = (
+      imageRotation == ExifInterface.ORIENTATION_ROTATE_90 ||
+      imageRotation == ExifInterface.ORIENTATION_ROTATE_270 ||
+      imageRotation == ExifInterface.ORIENTATION_TRANSPOSE ||
+      imageRotation == ExifInterface.ORIENTATION_TRANSVERSE
+    )
+     val options = BitmapFactory.Options().apply { inJustDecodeBounds = true }
+ 
+     BitmapFactory.decodeFile(output.absolutePath, options)
@@ -0,0 +1,5 @@
+## expo-modules-core Patch
+
+This patch fixes crashes seen in some Android clients when using intents to open the app. See https://github.com/expo/expo/pull/29513.
+
+Do not remove this patch until that PR lands in Expo and is released.
@@ -0,0 +1,26 @@
+diff --git a/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java b/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+index bb74e80..0aa0202 100644
+--- a/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+++ b/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+@@ -90,8 +90,8 @@ public class NativeModulesProxy extends ReactContextBaseJavaModule {
+     mModuleRegistry.ensureIsInitialized();
+ 
+     KotlinInteropModuleRegistry kotlinModuleRegistry = getKotlinInteropModuleRegistry();
+-    kotlinModuleRegistry.emitOnCreate();
+     kotlinModuleRegistry.installJSIInterop();
+    kotlinModuleRegistry.emitOnCreate();
+ 
+     Map<String, Object> constants = new HashMap<>(3);
+     constants.put(MODULES_CONSTANTS_KEY, new HashMap<>());
+diff --git a/node_modules/expo-modules-core/build/uuid/uuid.js b/node_modules/expo-modules-core/build/uuid/uuid.js
+index 109d3fe..c7fce9e 100644
+--- a/node_modules/expo-modules-core/build/uuid/uuid.js
+++ b/node_modules/expo-modules-core/build/uuid/uuid.js
+@@ -1,5 +1,7 @@
+ import bytesToUuid from './lib/bytesToUuid';
+ import { Uuidv5Namespace } from './uuid.types';
+import { ensureNativeModulesAreInstalled } from '../ensureNativeModulesAreInstalled';
+ensureNativeModulesAreInstalled();
+ const nativeUuidv4 = globalThis?.expo?.uuidv4;
+ const nativeUuidv5 = globalThis?.expo?.uuidv5;
+ function uuidv4() {
@@ -0,0 +1,216 @@
+diff --git a/node_modules/expo-notifications/android/build.gradle b/node_modules/expo-notifications/android/build.gradle
+index b863077..8b5209e 100644
+--- a/node_modules/expo-notifications/android/build.gradle
+++ b/node_modules/expo-notifications/android/build.gradle
+@@ -32,6 +32,7 @@ dependencies {
+   api 'com.google.firebase:firebase-messaging:22.0.0'
+ 
+   api 'me.leolin:ShortcutBadger:1.1.22@aar'
+  implementation project(':expo-background-notification-handler')
+ 
+   if (project.findProject(':expo-modules-test-core')) {
+     testImplementation project(':expo-modules-test-core')
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
+index 63a46c5..f911834 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
+@@ -1,5 +1,6 @@
+ package expo.modules.notifications.badge
+ 
+import android.app.NotificationManager
+ import android.content.Context
+ import android.util.Log
+ import me.leolin.shortcutbadger.ShortcutBadgeException
+@@ -12,7 +13,12 @@ object BadgeHelper {
+ 
+   fun setBadgeCount(context: Context, badgeCount: Int): Boolean {
+     return try {
+-      ShortcutBadger.applyCountOrThrow(context.applicationContext, badgeCount)
+      if (badgeCount == 0) {
+        val notificationManager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
+        notificationManager.cancelAll()
+      } else {
+        ShortcutBadger.applyCountOrThrow(context.applicationContext, badgeCount)
+      }
+       BadgeHelper.badgeCount = badgeCount
+       true
+     } catch (e: ShortcutBadgeException) {
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
+index 0af7fe0..8f2c8d8 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
+@@ -14,6 +14,7 @@ import expo.modules.notifications.notifications.enums.NotificationPriority;
+ import expo.modules.notifications.notifications.model.NotificationContent;
+ 
+ public class JSONNotificationContentBuilder extends NotificationContent.Builder {
+  private static final String CHANNEL_ID_KEY = "channelId";
+   private static final String TITLE_KEY = "title";
+   private static final String TEXT_KEY = "message";
+   private static final String SUBTITLE_KEY = "subtitle";
+@@ -36,6 +37,7 @@ public class JSONNotificationContentBuilder extends NotificationContent.Builder
+ 
+   public NotificationContent.Builder setPayload(JSONObject payload) {
+     this.setTitle(getTitle(payload))
+      .setChannelId(getChannelId(payload))
+       .setSubtitle(getSubtitle(payload))
+       .setText(getText(payload))
+       .setBody(getBody(payload))
+@@ -60,6 +62,14 @@ public class JSONNotificationContentBuilder extends NotificationContent.Builder
+     return this;
+   }
+ 
+  protected String getChannelId(JSONObject payload) {
+    try {
+      return payload.getString(CHANNEL_ID_KEY);
+    } catch (JSONException e) {
+      return null;
+    }
+  }
+
+   protected String getTitle(JSONObject payload) {
+     try {
+       return payload.getString(TITLE_KEY);
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
+index f1fed19..012757b 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
+@@ -20,6 +20,7 @@ import expo.modules.notifications.notifications.enums.NotificationPriority;
+  * should be created using {@link NotificationContent.Builder}.
+  */
+ public class NotificationContent implements Parcelable, Serializable {
+  private String mChannelId;
+   private String mTitle;
+   private String mText;
+   private String mSubtitle;
+@@ -50,6 +51,11 @@ public class NotificationContent implements Parcelable, Serializable {
+     }
+   };
+ 
+  @Nullable
+  public String getChannelId() {
+    return mChannelId;
+  }
+
+   @Nullable
+   public String getTitle() {
+     return mTitle;
+@@ -121,6 +127,7 @@ public class NotificationContent implements Parcelable, Serializable {
+   }
+ 
+   protected NotificationContent(Parcel in) {
+    mChannelId = in.readString();
+     mTitle = in.readString();
+     mText = in.readString();
+     mSubtitle = in.readString();
+@@ -146,6 +153,7 @@ public class NotificationContent implements Parcelable, Serializable {
+ 
+   @Override
+   public void writeToParcel(Parcel dest, int flags) {
+    dest.writeString(mChannelId);
+     dest.writeString(mTitle);
+     dest.writeString(mText);
+     dest.writeString(mSubtitle);
+@@ -166,6 +174,7 @@ public class NotificationContent implements Parcelable, Serializable {
+   private static final long serialVersionUID = 397666843266836802L;
+ 
+   private void writeObject(java.io.ObjectOutputStream out) throws IOException {
+    out.writeObject(mChannelId);
+     out.writeObject(mTitle);
+     out.writeObject(mText);
+     out.writeObject(mSubtitle);
+@@ -190,6 +199,7 @@ public class NotificationContent implements Parcelable, Serializable {
+   }
+ 
+   private void readObject(java.io.ObjectInputStream in) throws IOException, ClassNotFoundException {
+    mChannelId = (String) in.readObject();
+     mTitle = (String) in.readObject();
+     mText = (String) in.readObject();
+     mSubtitle = (String) in.readObject();
+@@ -240,6 +250,7 @@ public class NotificationContent implements Parcelable, Serializable {
+   }
+ 
+   public static class Builder {
+    private String mChannelId;
+     private String mTitle;
+     private String mText;
+     private String mSubtitle;
+@@ -260,6 +271,11 @@ public class NotificationContent implements Parcelable, Serializable {
+       useDefaultVibrationPattern();
+     }
+ 
+    public Builder setChannelId(String channelId) {
+      mChannelId = channelId;
+      return this;
+    }
+
+     public Builder setTitle(String title) {
+       mTitle = title;
+       return this;
+@@ -336,6 +352,7 @@ public class NotificationContent implements Parcelable, Serializable {
+ 
+     public NotificationContent build() {
+       NotificationContent content = new NotificationContent();
+      content.mChannelId = mChannelId;
+       content.mTitle = mTitle;
+       content.mSubtitle = mSubtitle;
+       content.mText = mText;
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java
+index 6bd9928..ee93d70 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java
+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java
+@@ -48,6 +48,10 @@ public class ExpoNotificationBuilder extends ChannelAwareNotificationBuilder {
+ 
+     NotificationContent content = getNotificationContent();
+ 
+    if (content.getChannelId() != null) {
+      builder.setChannelId(content.getChannelId());
+    }
+
+     builder.setAutoCancel(content.isAutoDismiss());
+     builder.setOngoing(content.isSticky());
+ 
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
+index 55b3a8d..1b99d5b 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
+@@ -12,11 +12,14 @@ import expo.modules.notifications.notifications.model.triggers.FirebaseNotificat
+ import expo.modules.notifications.service.NotificationsService
+ import expo.modules.notifications.service.interfaces.FirebaseMessagingDelegate
+ import expo.modules.notifications.tokens.interfaces.FirebaseTokenListener
+import expo.modules.backgroundnotificationhandler.BackgroundNotificationHandler
+import expo.modules.backgroundnotificationhandler.BackgroundNotificationHandlerInterface
+import expo.modules.backgroundnotificationhandler.ExpoBackgroundNotificationHandlerModule
+ import org.json.JSONObject
+ import java.lang.ref.WeakReference
+ import java.util.*
+ 
+-open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate {
+open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate, BackgroundNotificationHandlerInterface {
+   companion object {
+     // Unfortunately we cannot save state between instances of a service other way
+     // than by static properties. Fortunately, using weak references we can
+@@ -89,12 +92,21 @@ open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseM
+   fun getBackgroundTasks() = sBackgroundTaskConsumerReferences.values.mapNotNull { it.get() }
+ 
+   override fun onMessageReceived(remoteMessage: RemoteMessage) {
+-    NotificationsService.receive(context, createNotification(remoteMessage))
+-    getBackgroundTasks().forEach {
+-      it.scheduleJob(RemoteMessageSerializer.toBundle(remoteMessage))
+    if (!ExpoBackgroundNotificationHandlerModule.isForegrounded) {
+      BackgroundNotificationHandler(context, this).handleMessage(remoteMessage)
+      return
+    } else {
+      showMessage(remoteMessage)
+      getBackgroundTasks().forEach {
+        it.scheduleJob(RemoteMessageSerializer.toBundle(remoteMessage))
+      }
+     }
+   }
+ 
+  override fun showMessage(remoteMessage: RemoteMessage) {
+    NotificationsService.receive(context, createNotification(remoteMessage))
+  }
+
+   protected fun createNotification(remoteMessage: RemoteMessage): Notification {
+     val identifier = getNotificationIdentifier(remoteMessage)
+     val payload = JSONObject(remoteMessage.data as Map<*, *>)
@@ -1,169 +0,0 @@
-diff --git a/node_modules/expo-notifications/android/build.gradle b/node_modules/expo-notifications/android/build.gradle
-index 5dd0c61..bf536dd 100644
--- a/node_modules/expo-notifications/android/build.gradle
-+++ b/node_modules/expo-notifications/android/build.gradle
-@@ -46,6 +46,7 @@ dependencies {
-   implementation 'com.google.firebase:firebase-messaging:24.0.1'
- 
-   implementation 'me.leolin:ShortcutBadger:1.1.22@aar'
-+  implementation project(':expo-background-notification-handler')
- 
-   if (project.findProject(':expo-modules-test-core')) {
-     testImplementation project(':expo-modules-test-core')
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/interfaces/INotificationContent.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/interfaces/INotificationContent.kt
-index 7b99e6c..45a450d 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/interfaces/INotificationContent.kt
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/interfaces/INotificationContent.kt
-@@ -15,6 +15,7 @@ import org.json.JSONObject
-  * This interface exists to provide a common API for both classes.
-  * */
- interface INotificationContent : Parcelable {
-+  val channelId: String?
-   val title: String?
-   val text: String?
-   val subText: String?
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
-index 191b64e..fe8b3c5 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
-@@ -35,6 +35,7 @@ import kotlin.coroutines.Continuation;
-  * Refactoring this class may require a migration strategy for the data stored in SharedPreferences.
-  */
- public class NotificationContent implements Parcelable, Serializable, INotificationContent {
-+  private String mChannelId;
-   private String mTitle;
-   private String mText;
-   private String mSubtitle;
-@@ -65,6 +66,11 @@ public class NotificationContent implements Parcelable, Serializable, INotificat
-     }
-   };
- 
-+  @Nullable
-+  public String getChannelId() {
-+    return mChannelId;
-+  }
-+
-   @Nullable
-   public String getTitle() {
-     return mTitle;
-@@ -158,6 +164,7 @@ public class NotificationContent implements Parcelable, Serializable, INotificat
-   }
- 
-   protected NotificationContent(Parcel in) {
-+    mChannelId = in.readString();
-     mTitle = in.readString();
-     mText = in.readString();
-     mSubtitle = in.readString();
-@@ -183,6 +190,7 @@ public class NotificationContent implements Parcelable, Serializable, INotificat
- 
-   @Override
-   public void writeToParcel(Parcel dest, int flags) {
-+    dest.writeString(mChannelId);
-     dest.writeString(mTitle);
-     dest.writeString(mText);
-     dest.writeString(mSubtitle);
-@@ -203,6 +211,7 @@ public class NotificationContent implements Parcelable, Serializable, INotificat
-   private static final long serialVersionUID = 397666843266836802L;
- 
-   private void writeObject(java.io.ObjectOutputStream out) throws IOException {
-+    out.writeObject(mChannelId);
-     out.writeObject(mTitle);
-     out.writeObject(mText);
-     out.writeObject(mSubtitle);
-@@ -285,6 +294,11 @@ public class NotificationContent implements Parcelable, Serializable, INotificat
-       useDefaultVibrationPattern();
-     }
- 
-+    public Builder setChannelId(String channelId) {
-+      content.mChannelId = channelId;
-+      return this;
-+    }
-+
-     public Builder setTitle(String title) {
-       content.mTitle = title;
-       return this;
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationData.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationData.kt
-index 39b5aad..e50797d 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationData.kt
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationData.kt
-@@ -11,6 +11,9 @@ import org.json.JSONObject
- * */
- @JvmInline
- value class NotificationData(private val data: Map<String, String>) {
-+  val channelId: String?
-+    get() = data["channelId"]
-+
-   val title: String?
-     get() = data["title"]
- 
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/RemoteNotificationContent.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/RemoteNotificationContent.kt
-index d2cc6cf..6a48ff2 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/RemoteNotificationContent.kt
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/RemoteNotificationContent.kt
-@@ -31,6 +31,8 @@ class RemoteNotificationContent(private val remoteMessage: RemoteMessage) : INot
-     return remoteMessage.notification?.imageUrl != null
-   }
- 
-+  override val channelId = remoteMessage.notification?.channelId ?: notificationData.channelId
-+
-   override val title = remoteMessage.notification?.title ?: notificationData.title
- 
-   override val text = remoteMessage.notification?.body ?: notificationData.message
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.kt
-index 8ca6ec5..57c3599 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.kt
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.kt
-@@ -101,6 +101,9 @@ open class ExpoNotificationBuilder(
-     builder.setOngoing(content.isSticky)
- 
-     // see "Notification anatomy" https://developer.android.com/develop/ui/views/notifications#Templates
-+    content.channelId?.let {
-+      builder.setChannelId(it)
-+    }
-     builder.setContentTitle(content.title)
-     builder.setContentText(content.text)
-     builder.setSubText(content.subText)
-diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
-index 9f22441..5f92f80 100644
--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
-+++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
-@@ -2,6 +2,9 @@ package expo.modules.notifications.service.delegates
- 
- import android.content.Context
- import com.google.firebase.messaging.RemoteMessage
-+import expo.modules.backgroundnotificationhandler.BackgroundNotificationHandler
-+import expo.modules.backgroundnotificationhandler.BackgroundNotificationHandlerInterface
-+import expo.modules.backgroundnotificationhandler.ExpoBackgroundNotificationHandlerModule
- import expo.modules.interfaces.taskManager.TaskServiceProviderHelper
- import expo.modules.notifications.notifications.RemoteMessageSerializer
- import expo.modules.notifications.notifications.background.BackgroundRemoteNotificationTaskConsumer
-@@ -17,7 +20,8 @@ import expo.modules.notifications.tokens.interfaces.FirebaseTokenListener
- import java.lang.ref.WeakReference
- import java.util.*
- 
-open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate {
-+open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate,
-+  BackgroundNotificationHandlerInterface {
-   companion object {
-     // Unfortunately we cannot save state between instances of a service other way
-     // than by static properties. Fortunately, using weak references we can
-@@ -94,8 +98,17 @@ open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseM
-     DebugLogging.logRemoteMessage("FirebaseMessagingDelegate.onMessageReceived: message", remoteMessage)
-     val notification = createNotification(remoteMessage)
-     DebugLogging.logNotification("FirebaseMessagingDelegate.onMessageReceived: notification", notification)
-    NotificationsService.receive(context, notification)
-    runTaskManagerTasks(remoteMessage)
-+
-+    if (!ExpoBackgroundNotificationHandlerModule.isForegrounded) {
-+      BackgroundNotificationHandler(context, this).handleMessage(remoteMessage)
-+    } else {
-+      showMessage(remoteMessage)
-+      runTaskManagerTasks(remoteMessage)
-+    }
-+  }
-+
-+  override fun showMessage(remoteMessage: RemoteMessage) {
-+    NotificationsService.receive(context, createNotification(remoteMessage))
-   }
- 
-   private fun runTaskManagerTasks(remoteMessage: RemoteMessage) {
@@ -0,0 +1,44 @@
+diff --git a/node_modules/metro/src/ModuleGraph/worker/JsFileWrapping.js b/node_modules/metro/src/ModuleGraph/worker/JsFileWrapping.js
+index 48a1409..ef185c9 100644
+--- a/node_modules/metro/src/ModuleGraph/worker/JsFileWrapping.js
+++ b/node_modules/metro/src/ModuleGraph/worker/JsFileWrapping.js
+@@ -70,14 +70,19 @@ function wrapModule(
+   importDefaultName,
+   importAllName,
+   dependencyMapName,
+-  globalPrefix
+  globalPrefix,
+  moduleFactoryName
+ ) {
+   const params = buildParameters(
+     importDefaultName,
+     importAllName,
+     dependencyMapName
+   );
+-  const factory = functionFromProgram(fileAst.program, params);
+  const factory = functionFromProgram(
+    fileAst.program,
+    params,
+    moduleFactoryName
+  );
+   const def = t.callExpression(t.identifier(`${globalPrefix}__d`), [factory]);
+   const ast = t.file(t.program([t.expressionStatement(def)]));
+   const requireName = renameRequires(ast);
+@@ -107,7 +112,16 @@ function wrapJson(source, globalPrefix) {
+     "});",
+   ].join("\n");
+ }
+-function functionFromProgram(program, parameters) {
+const JS_INVALID_IDENT_RE = /[^a-zA-Z0-9$_]/g;
+function functionFromProgram(program, parameters, moduleFactoryName) {
+  let identifier;
+  if (typeof moduleFactoryName === "string" && moduleFactoryName !== "") {
+    // Keep the name readable so it shows up in profiler traces.
+    // Add an unlikely suffix to avoid collisions with the module code.
+    identifier = t.identifier(
+      `${moduleFactoryName.replace(JS_INVALID_IDENT_RE, "_")}__module_factory__`
+    );
+  }
+   return t.functionExpression(
+     undefined,
+     parameters.map(makeIdentifier),
@@ -0,0 +1,50 @@
+diff --git a/node_modules/metro-runtime/src/polyfills/require.js b/node_modules/metro-runtime/src/polyfills/require.js
+index ce67cb4..eeeae84 100644
+--- a/node_modules/metro-runtime/src/polyfills/require.js
+++ b/node_modules/metro-runtime/src/polyfills/require.js
+@@ -22,6 +22,13 @@ global.__c = clear;
+ global.__registerSegment = registerSegment;
+ var modules = clear();
+ 
+if (__DEV__) {
+  // Added by Dan for module init logging.
+  global.__INIT_LOGS__ = []
+  var initModuleCounter = 0
+  var initModuleStack = []
+}
+
+ // Don't use a Symbol here, it would pull in an extra polyfill with all sorts of
+ // additional stuff (e.g. Array.from).
+ const EMPTY = {};
+@@ -303,7 +310,30 @@ function loadModuleImplementation(moduleId, module) {
+     throw module.error;
+   }
+   if (__DEV__) {
+-    var Systrace = requireSystrace();
+    // Added by Dan for module init logging.
+    var Systrace = {
+      beginEvent(label) {
+        let fullLabel = initModuleCounter++ + ' ' + label
+        global.__INIT_LOGS__.push(
+          ' '.repeat(initModuleStack.length) +
+          ' ENTER ' + fullLabel
+        )
+        initModuleStack.push({
+          fullLabel,
+          startTime: nativePerformanceNow(),
+        })
+      },
+      endEvent() {
+        const res = initModuleStack.pop()
+        const fullLabel = res.fullLabel
+        const startTime = res.startTime
+        const timeElapsed = Math.round(nativePerformanceNow() - startTime)
+        global.__INIT_LOGS__.push(
+          ' '.repeat(initModuleStack.length) +
+            ' LEAVE ' + fullLabel + ' [' + timeElapsed + 'ms]',
+        )
+      }
+    };
+     var Refresh = requireRefresh();
+   }
+ 
@@ -0,0 +1,41 @@
+diff --git a/node_modules/metro-transform-worker/src/index.js b/node_modules/metro-transform-worker/src/index.js
+index 9f2e3d2..5222c8e 100644
+--- a/node_modules/metro-transform-worker/src/index.js
+++ b/node_modules/metro-transform-worker/src/index.js
+@@ -189,6 +189,10 @@ async function transformJS(file, { config, options, projectRoot }) {
+   let dependencyMapName = "";
+   let dependencies;
+   let wrappedAst;
+  const minify =
+    options.minify &&
+    options.unstable_transformProfile !== "hermes-canary" &&
+    options.unstable_transformProfile !== "hermes-stable";
+ 
+   // If the module to transform is a script (meaning that is not part of the
+   // dependency graph and it code will just be prepended to the bundle modules),
+@@ -228,19 +232,20 @@ async function transformJS(file, { config, options, projectRoot }) {
+     if (config.unstable_disableModuleWrapping === true) {
+       wrappedAst = ast;
+     } else {
+      let moduleFactoryName;
+      if (options.dev && !minify) {
+        moduleFactoryName = file.filename;
+      }
+       ({ ast: wrappedAst } = JsFileWrapping.wrapModule(
+         ast,
+         importDefault,
+         importAll,
+         dependencyMapName,
+-        config.globalPrefix
+        config.globalPrefix,
+        moduleFactoryName
+       ));
+     }
+   }
+-  const minify =
+-    options.minify &&
+-    options.unstable_transformProfile !== "hermes-canary" &&
+-    options.unstable_transformProfile !== "hermes-stable";
+   const reserved = [];
+   if (config.unstable_dependencyMapReservedName != null) {
+     reserved.push(config.unstable_dependencyMapReservedName);
@@ -0,0 +1,283 @@
+diff --git a/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm b/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
+index caa5540..c5d4e67 100644
+--- a/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
+++ b/node_modules/react-native/Libraries/Blob/RCTFileReaderModule.mm
+@@ -73,7 +73,7 @@ @implementation RCTFileReaderModule
+     } else {
+       NSString *type = [RCTConvert NSString:blob[@"type"]];
+       NSString *text = [NSString stringWithFormat:@"data:%@;base64,%@",
+-                                                  type != nil && [type length] > 0 ? type : @"application/octet-stream",
+                                                  ![type isEqual:[NSNull null]] && [type length] > 0 ? type : @"application/octet-stream",
+                                                   [data base64EncodedStringWithOptions:0]];
+ 
+       resolve(text);
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+index b0d71dc..41b9a0e 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+@@ -377,10 +377,6 @@ - (void)textInputDidBeginEditing
+     self.backedTextInputView.attributedText = [NSAttributedString new];
+   }
+ 
+-  if (_selectTextOnFocus) {
+-    [self.backedTextInputView selectAll:nil];
+-  }
+-
+   [_eventDispatcher sendTextEventWithType:RCTTextEventTypeFocus
+                                  reactTag:self.reactTag
+                                      text:[self.backedTextInputView.attributedText.string copy]
+@@ -611,6 +607,10 @@ - (UIView *)reactAccessibilityElement
+ - (void)reactFocus
+ {
+   [self.backedTextInputView reactFocus];
+
+  if (_selectTextOnFocus) {
+    [self.backedTextInputView selectAll:nil];
+  }
+ }
+ 
+ - (void)reactBlur
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
+index e9b330f..ec5f58c 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
+@@ -15,5 +15,8 @@
+ @property (nonatomic, copy) NSString *title;
+ @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
+ @property (nonatomic, weak) UIScrollView *scrollView;
+@property (nonatomic, copy) UIColor *customTintColor;
+
+- (void)forwarderBeginRefreshing;
+ 
+ @end
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+index b09e653..d2b4e05 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+@@ -22,6 +22,7 @@ @implementation RCTRefreshControl {
+   NSString *_title;
+   UIColor *_titleColor;
+   CGFloat _progressViewOffset;
+  UIColor *_customTintColor;
+ }
+ 
+ - (instancetype)init
+@@ -56,6 +57,12 @@ - (void)layoutSubviews
+   _isInitialRender = false;
+ }
+ 
+- (void)didMoveToSuperview
+{
+  [super didMoveToSuperview];
+  [self setTintColor:_customTintColor];
+}
+
+ - (void)beginRefreshingProgrammatically
+ {
+   UInt64 beginRefreshingTimestamp = _currentRefreshingStateTimestamp;
+@@ -203,4 +210,58 @@ - (void)refreshControlValueChanged
+   }
+ }
+ 
+- (void)setCustomTintColor:(UIColor *)customTintColor
+{
+  _customTintColor = customTintColor;
+  [self setTintColor:customTintColor];
+}
+
+// Fix for https://github.com/facebook/react-native/issues/43388
+// A bug in iOS 17.4 causes the haptic to not play when refreshing if the tintColor
+// is set before the refresh control gets added to the scrollview. We'll call this
+// function whenever the superview changes. We'll also call it if the value of customTintColor
+// changes.
+- (void)setTintColor:(UIColor *)tintColor
+{
+  if ([self.superview isKindOfClass:[UIScrollView class]] && self.tintColor != tintColor) {
+    [super setTintColor:tintColor];
+  }
+}
+
+/*
+ This method is used by Bluesky's ExpoScrollForwarder. This allows other React Native
+ libraries to perform a refresh of a scrollview and access the refresh control's onRefresh
+ function.
+ */
+- (void)forwarderBeginRefreshing
+{
+  _refreshingProgrammatically = NO;
+
+  [self sizeToFit];
+
+  if (!self.scrollView) {
+    return;
+  }
+
+  UIScrollView *scrollView = (UIScrollView *)self.scrollView;
+
+  [UIView animateWithDuration:0.3
+    delay:0
+    options:UIViewAnimationOptionBeginFromCurrentState
+    animations:^(void) {
+      // Whenever we call this method, the scrollview will always be at a position of
+      // -130 or less. Scrolling back to -65 simulates the default behavior of RCTRefreshControl
+      [scrollView setContentOffset:CGPointMake(0, -65)];
+    }
+    completion:^(__unused BOOL finished) {
+      [super beginRefreshing];
+      [self setCurrentRefreshingState:super.refreshing];
+
+      if (self->_onRefresh) {
+        self->_onRefresh(nil);
+      }
+    }
+  ];
+}
+
+ @end
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
+index 40aaf9c..1c60164 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
+@@ -22,11 +22,12 @@ - (UIView *)view
+ 
+ RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
+ RCT_EXPORT_VIEW_PROPERTY(refreshing, BOOL)
+-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
+ RCT_EXPORT_VIEW_PROPERTY(title, NSString)
+ RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
+ RCT_EXPORT_VIEW_PROPERTY(progressViewOffset, CGFloat)
+ 
+RCT_REMAP_VIEW_PROPERTY(tintColor, customTintColor, UIColor)
+
+ RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
+ {
+   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+diff --git a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
+index 1aead51..39e6244 100644
+--- a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
+++ b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
+@@ -159,31 +159,6 @@ - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
+   return !shouldDisableScrollInteraction;
+ }
+ 
+-/*
+- * Automatically centers the content such that if the content is smaller than the
+- * ScrollView, we force it to be centered, but when you zoom or the content otherwise
+- * becomes larger than the ScrollView, there is no padding around the content but it
+- * can still fill the whole view.
+- */
+-- (void)setContentOffset:(CGPoint)contentOffset
+-{
+-  UIView *contentView = [self contentView];
+-  if (contentView && _centerContent && !CGSizeEqualToSize(contentView.frame.size, CGSizeZero)) {
+-    CGSize subviewSize = contentView.frame.size;
+-    CGSize scrollViewSize = self.bounds.size;
+-    if (subviewSize.width <= scrollViewSize.width) {
+-      contentOffset.x = -(scrollViewSize.width - subviewSize.width) / 2.0;
+-    }
+-    if (subviewSize.height <= scrollViewSize.height) {
+-      contentOffset.y = -(scrollViewSize.height - subviewSize.height) / 2.0;
+-    }
+-  }
+-
+-  super.contentOffset = CGPointMake(
+-      RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
+-      RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
+-}
+-
+ - (void)setFrame:(CGRect)frame
+ {
+   // Preserving and revalidating `contentOffset`.
+@@ -427,6 +402,11 @@ - (void)setRemoveClippedSubviews:(__unused BOOL)removeClippedSubviews
+   // Does nothing
+ }
+ 
+- (void)setFrame:(CGRect)frame {
+  [super setFrame:frame];
+  [self centerContentIfNeeded];
+}
+
+ - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
+ {
+   [super insertReactSubview:view atIndex:atIndex];
+@@ -444,6 +424,8 @@ - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
+     RCTApplyTransformationAccordingLayoutDirection(_contentView, self.reactLayoutDirection);
+     [_scrollView addSubview:view];
+   }
+
+  [self centerContentIfNeeded];
+ }
+ 
+ - (void)removeReactSubview:(UIView *)subview
+@@ -652,9 +634,46 @@ -(void)delegateMethod : (UIScrollView *)scrollView        \
+   }
+ 
+ RCT_SCROLL_EVENT_HANDLER(scrollViewWillBeginDecelerating, onMomentumScrollBegin)
+-RCT_SCROLL_EVENT_HANDLER(scrollViewDidZoom, onScroll)
+ RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
+ 
+-(void)scrollViewDidZoom : (UIScrollView *)scrollView
+{
+  [self centerContentIfNeeded];
+
+  RCT_SEND_SCROLL_EVENT(onScroll, nil);
+  RCT_FORWARD_SCROLL_EVENT(scrollViewDidZoom : scrollView);
+}
+
+/*
+ * Automatically centers the content such that if the content is smaller than the
+ * ScrollView, we force it to be centered, but when you zoom or the content otherwise
+ * becomes larger than the ScrollView, there is no padding around the content but it
+ * can still fill the whole view.
+ *
+ * PATCHED: This deviates from the original React Native implementation to fix two issues:
+ *
+ * - The scroll view was swallowing any taps immediately after pinching
+ * - The scroll view was jittering when crossing the full screen threshold while pinching
+ *
+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
+ */
+-(void)centerContentIfNeeded
+{
+  if (_scrollView.centerContent &&
+      !CGSizeEqualToSize(self.contentSize, CGSizeZero) &&
+      !CGSizeEqualToSize(self.bounds.size, CGSizeZero)
+  ) {
+    CGFloat top = 0, left = 0;
+    if (self.contentSize.width < self.bounds.size.width) {
+      left = (self.bounds.size.width - self.contentSize.width) * 0.5f;
+    }
+    if (self.contentSize.height < self.bounds.size.height) {
+      top = (self.bounds.size.height - self.contentSize.height) * 0.5f;
+    }
+    _scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left);
+  }
+}
+
+ - (void)addScrollListener:(NSObject<UIScrollViewDelegate> *)scrollListener
+ {
+   [_scrollListeners addObject:scrollListener];
+@@ -913,6 +932,7 @@ - (void)updateContentSizeIfNeeded
+   CGSize contentSize = self.contentSize;
+   if (!CGSizeEqualToSize(_scrollView.contentSize, contentSize)) {
+     _scrollView.contentSize = contentSize;
+    [self centerContentIfNeeded];
+   }
+ }
+ 
+diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
+index 5f5e1ab..aac00b6 100644
+--- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
+++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
+@@ -99,8 +99,9 @@ public class JavaTimerManager {
+       }
+ 
+       // If the JS thread is busy for multiple frames we cancel any other pending runnable.
+-      if (mCurrentIdleCallbackRunnable != null) {
+-        mCurrentIdleCallbackRunnable.cancel();
+      IdleCallbackRunnable currentRunnable = mCurrentIdleCallbackRunnable;
+      if (currentRunnable != null) {
+        currentRunnable.cancel();
+       }
+ 
+       mCurrentIdleCallbackRunnable = new IdleCallbackRunnable(frameTimeNanos);
@@ -12,6 +12,9 @@ Patching `RCTRefreshControl.m` and `RCTRefreshControl.h` to add a new `forwarder
 This method is used by `ExpoScrollForwarder` to initiate a refresh of the underlying `UIScrollView` from inside that
 module.

-## ScrollView centerContent fix

-Includes https://github.com/facebook/react-native/pull/47591 early. Delete when it's in a release.
+## TextInput Patch - `selectTextOnFocus` fix
+
+Patching `RCTBaseTextInputView.m` to fix an issue where `selectTextOnFocus` does not work as expected on iOS 17. This
+patch _only_ fixes the Paper version of `TextInput`. If we migrate to Fabric and the fix has not been made upstream,
+we can apply the same fix. See https://github.com/facebook/react-native/pull/44307.
@@ -1,331 +0,0 @@
-diff --git a/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
-index 62f52a7..ca30165 100644
--- a/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
-+++ b/node_modules/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
-@@ -426,9 +426,10 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
-    */
-   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
-   isolation?: 'auto' | 'isolate' | undefined;
-  cursor?: CursorValue | undefined;
-+  cursor?: CursorValue | string | undefined;
-   boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
-   filter?: ReadonlyArray<FilterFunction> | string | undefined;
-+  transformOrigin?: string | (string | number)[] | undefined;
- }
- 
- export type FontVariant =
-@@ -536,7 +537,11 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
-   textShadowOffset?: {width: number; height: number} | undefined;
-   textShadowRadius?: number | undefined;
-   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
-  userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all' | undefined;
-+  userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all' | string | undefined;
-+  cursor?: CursorValue | string | undefined;
-+  boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
-+  filter?: ReadonlyArray<FilterFunction> | string | undefined;
-+  transformOrigin?: string | (string | number)[] | undefined;
- }
- 
- /**
-@@ -558,5 +563,8 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
-   tintColor?: ColorValue | undefined;
-   opacity?: AnimatableNumericValue | undefined;
-   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
-  cursor?: CursorValue | undefined;
-+  cursor?: CursorValue | string | undefined;
-+  boxShadow?: ReadonlyArray<BoxShadowValue> | string | undefined;
-+  filter?: ReadonlyArray<FilterFunction> | string | undefined;
-+  transformOrigin?: string | (string | number)[] | undefined;
- }
-diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
-index 93af874..106f8ec 100644
--- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
-+++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTEnhancedScrollView.mm
-@@ -66,28 +66,51 @@ - (void)preserveContentOffsetWithBlock:(void (^)())block
-  * ScrollView, we force it to be centered, but when you zoom or the content otherwise
-  * becomes larger than the ScrollView, there is no padding around the content but it
-  * can still fill the whole view.
-+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
-  */
-- (void)setContentOffset:(CGPoint)contentOffset
-+-(void)centerContentIfNeeded
- {
-  if (_isSetContentOffsetDisabled) {
-+  if (!_centerContent) {
-     return;
-   }
- 
-  if (_centerContent && !CGSizeEqualToSize(self.contentSize, CGSizeZero)) {
-    CGSize scrollViewSize = self.bounds.size;
-    if (self.contentSize.width <= scrollViewSize.width) {
-      contentOffset.x = -(scrollViewSize.width - self.contentSize.width) / 2.0;
-    }
-    if (self.contentSize.height <= scrollViewSize.height) {
-      contentOffset.y = -(scrollViewSize.height - self.contentSize.height) / 2.0;
-    }
-+  CGSize contentSize = self.contentSize;
-+  CGSize boundsSize = self.bounds.size;
-+  if (CGSizeEqualToSize(contentSize, CGSizeZero) ||
-+      CGSizeEqualToSize(boundsSize, CGSizeZero)) {
-+    return;
-   }
- 
-+  CGFloat top = 0, left = 0;
-+  if (contentSize.width < boundsSize.width) {
-+    left = (boundsSize.width - contentSize.width) * 0.5f;
-+  }
-+  if (contentSize.height < boundsSize.height) {
-+    top = (boundsSize.height - contentSize.height) * 0.5f;
-+  }
-+  self.contentInset = UIEdgeInsetsMake(top, left, top, left);
-+}
-+
-+- (void)setContentOffset:(CGPoint)contentOffset
-+{
-+  if (_isSetContentOffsetDisabled) {
-+    return;
-+  }
-   super.contentOffset = CGPointMake(
-       RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
-       RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
- }
- 
-+- (void)setFrame:(CGRect)frame {
-+  [super setFrame:frame];
-+  [self centerContentIfNeeded];
-+}
-+
-+- (void)didAddSubview:(UIView *)subview {
-+  [super didAddSubview:subview];
-+  [self centerContentIfNeeded];
-+}
-+
- - (BOOL)touchesShouldCancelInContentView:(UIView *)view
- {
-   if ([_overridingDelegate respondsToSelector:@selector(touchesShouldCancelInContentView:)]) {
-@@ -257,6 +280,10 @@ - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView
-   }
- }
- 
-+- (void)scrollViewDidZoom:(__unused UIScrollView *)scrollView {
-+  [self centerContentIfNeeded];
-+}
-+
- #pragma mark -
- 
- - (BOOL)isHorizontal:(UIScrollView *)scrollView
-diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
-index e9b330f..ec5f58c 100644
--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
-+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
-@@ -15,5 +15,8 @@
- @property (nonatomic, copy) NSString *title;
- @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
- @property (nonatomic, weak) UIScrollView *scrollView;
-+@property (nonatomic, copy) UIColor *customTintColor;
-+
-+- (void)forwarderBeginRefreshing;
- 
- @end
-diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-index 53bfd04..ff1b1ed 100644
--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-@@ -23,6 +23,7 @@ @implementation RCTRefreshControl {
-   UIColor *_titleColor;
-   CGFloat _progressViewOffset;
-   BOOL _hasMovedToWindow;
-+  UIColor *_customTintColor;
- }
- 
- - (instancetype)init
-@@ -58,6 +59,12 @@ - (void)layoutSubviews
-   _isInitialRender = false;
- }
- 
-+- (void)didMoveToSuperview
-+{
-+  [super didMoveToSuperview];
-+  [self setTintColor:_customTintColor];
-+}
-+
- - (void)didMoveToWindow
- {
-   [super didMoveToWindow];
-@@ -221,4 +228,50 @@ - (void)refreshControlValueChanged
-   }
- }
- 
-+// Fix for https://github.com/facebook/react-native/issues/43388
-+// A bug in iOS 17.4 causes the haptic to not play when refreshing if the tintColor
-+// is set before the refresh control gets added to the scrollview. We'll call this
-+// function whenever the superview changes. We'll also call it if the value of customTintColor
-+// changes.
-+- (void)setTintColor:(UIColor *)tintColor
-+{
-+  if ([self.superview isKindOfClass:[UIScrollView class]] && self.tintColor != tintColor) {
-+    [super setTintColor:tintColor];
-+  }
-+}
-+
-+// This method is used by Bluesky's ExpoScrollForwarder. This allows other React Native
-+// libraries to perform a refresh of a scrollview and access the refresh control's onRefresh
-+// function.
-+- (void)forwarderBeginRefreshing
-+{
-+  _refreshingProgrammatically = NO;
-+
-+  [self sizeToFit];
-+
-+  if (!self.scrollView) {
-+    return;
-+  }
-+
-+  UIScrollView *scrollView = (UIScrollView *)self.scrollView;
-+
-+  [UIView animateWithDuration:0.3
-+    delay:0
-+    options:UIViewAnimationOptionBeginFromCurrentState
-+    animations:^(void) {
-+      // Whenever we call this method, the scrollview will always be at a position of
-+      // -130 or less. Scrolling back to -65 simulates the default behavior of RCTRefreshControl
-+      [scrollView setContentOffset:CGPointMake(0, -65)];
-+    }
-+    completion:^(__unused BOOL finished) {
-+      [super beginRefreshing];
-+      [self setCurrentRefreshingState:super.refreshing];
-+
-+      if (self->_onRefresh) {
-+        self->_onRefresh(nil);
-+      }
-+    }
-+  ];
-+}
-+
- @end
-diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
-index 40aaf9c..1c60164 100644
--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
-+++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
-@@ -22,11 +22,12 @@ - (UIView *)view
- 
- RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
- RCT_EXPORT_VIEW_PROPERTY(refreshing, BOOL)
-RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
- RCT_EXPORT_VIEW_PROPERTY(title, NSString)
- RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
- RCT_EXPORT_VIEW_PROPERTY(progressViewOffset, CGFloat)
- 
-+RCT_REMAP_VIEW_PROPERTY(tintColor, customTintColor, UIColor)
-+
- RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
- {
-   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-diff --git a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-index e9ce48c..ccd9ad6 100644
--- a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-+++ b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-@@ -159,26 +159,8 @@ - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
-   return !shouldDisableScrollInteraction;
- }
- 
-/*
- * Automatically centers the content such that if the content is smaller than the
- * ScrollView, we force it to be centered, but when you zoom or the content otherwise
- * becomes larger than the ScrollView, there is no padding around the content but it
- * can still fill the whole view.
- */
- - (void)setContentOffset:(CGPoint)contentOffset
- {
-  UIView *contentView = [self contentView];
-  if (contentView && _centerContent && !CGSizeEqualToSize(contentView.frame.size, CGSizeZero)) {
-    CGSize subviewSize = contentView.frame.size;
-    CGSize scrollViewSize = self.bounds.size;
-    if (subviewSize.width <= scrollViewSize.width) {
-      contentOffset.x = -(scrollViewSize.width - subviewSize.width) / 2.0;
-    }
-    if (subviewSize.height <= scrollViewSize.height) {
-      contentOffset.y = -(scrollViewSize.height - subviewSize.height) / 2.0;
-    }
-  }
-
-   super.contentOffset = CGPointMake(
-       RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
-       RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
-@@ -427,6 +409,11 @@ - (void)setRemoveClippedSubviews:(__unused BOOL)removeClippedSubviews
-   // Does nothing
- }
- 
-+- (void)setFrame:(CGRect)frame {
-+  [super setFrame:frame];
-+  [self centerContentIfNeeded];
-+}
-+
- - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
- {
-   [super insertReactSubview:view atIndex:atIndex];
-@@ -443,6 +430,8 @@ - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
-     _contentView = view;
-     RCTApplyTransformationAccordingLayoutDirection(_contentView, self.reactLayoutDirection);
-     [_scrollView addSubview:view];
-+
-+    [self centerContentIfNeeded];
-   }
- }
- 
-@@ -652,9 +641,46 @@ -(void)delegateMethod : (UIScrollView *)scrollView        \
-   }
- 
- RCT_SCROLL_EVENT_HANDLER(scrollViewWillBeginDecelerating, onMomentumScrollBegin)
-RCT_SCROLL_EVENT_HANDLER(scrollViewDidZoom, onScroll)
- RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
- 
-+-(void)scrollViewDidZoom : (UIScrollView *)scrollView
-+{
-+  [self centerContentIfNeeded];
-+
-+  RCT_SEND_SCROLL_EVENT(onScroll, nil);
-+  RCT_FORWARD_SCROLL_EVENT(scrollViewDidZoom : scrollView);
-+}
-+
-+/*
-+ * Automatically centers the content such that if the content is smaller than the
-+ * ScrollView, we force it to be centered, but when you zoom or the content otherwise
-+ * becomes larger than the ScrollView, there is no padding around the content but it
-+ * can still fill the whole view.
-+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
-+ */
-+-(void)centerContentIfNeeded
-+{
-+  if (!_scrollView.centerContent) {
-+    return;
-+  }
-+
-+  CGSize contentSize = self.contentSize;
-+  CGSize boundsSize = self.bounds.size;
-+  if (CGSizeEqualToSize(contentSize, CGSizeZero) ||
-+      CGSizeEqualToSize(boundsSize, CGSizeZero)) {
-+    return;
-+  }
-+
-+  CGFloat top = 0, left = 0;
-+  if (contentSize.width < boundsSize.width) {
-+    left = (boundsSize.width - contentSize.width) * 0.5f;
-+  }
-+  if (contentSize.height < boundsSize.height) {
-+    top = (boundsSize.height - contentSize.height) * 0.5f;
-+  }
-+  _scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left);
-+}
-+
- - (void)addScrollListener:(NSObject<UIScrollViewDelegate> *)scrollListener
- {
-   [_scrollListeners addObject:scrollListener];
-@@ -933,6 +959,7 @@ - (void)updateContentSizeIfNeeded
-   CGSize contentSize = self.contentSize;
-   if (!CGSizeEqualToSize(_scrollView.contentSize, contentSize)) {
-     _scrollView.contentSize = contentSize;
-+    [self centerContentIfNeeded];
-   }
- }
- 
@@ -1,57 +0,0 @@
-diff --git a/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java b/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
-index 06829bd..1b15818 100644
--- a/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
-+++ b/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
-@@ -14,17 +14,33 @@ import android.graphics.Paint;
- import android.graphics.Path;
- import com.facebook.react.bridge.ReactContext;
- 
-+import java.util.ArrayList;
-+import java.util.HashMap;
-+
-+class ParsedPath {
-+  final Path path;
-+  final ArrayList<PathElement> elements;
-+
-+  ParsedPath(Path path, ArrayList<PathElement> elements) {
-+    this.path = path;
-+    this.elements = elements;
-+  }
-+}
-+
- @SuppressLint("ViewConstructor")
- class PathView extends RenderableView {
-   private Path mPath;
- 
-+  // This grows forever but for our use case (static icons) it's ok.
-+  private static final HashMap<String, ParsedPath> sPathCache = new HashMap<>();
-+
-   public PathView(ReactContext reactContext) {
-     super(reactContext);
-     PathParser.mScale = mScale;
-     mPath = new Path();
-   }
- 
-  public void setD(String d) {
-+  void setDByParsing(String d) {
-     mPath = PathParser.parse(d);
-     elements = PathParser.elements;
-     for (PathElement elem : elements) {
-@@ -33,6 +49,17 @@ class PathView extends RenderableView {
-         point.y *= mScale;
-       }
-     }
-+  }
-+
-+  public void setD(String d) {
-+    ParsedPath cached = sPathCache.get(d);
-+    if (cached != null) {
-+      mPath = cached.path;
-+      elements = cached.elements;
-+    } else {
-+      setDByParsing(d);
-+      sPathCache.put(d, new ParsedPath(mPath, elements));
-+    }
-     invalidate();
-   }
- 
@@ -0,0 +1,20 @@
+const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
+
+module.exports = function withAndroidStylesWindowBackgroundPlugin(appConfig) {
+  return withAndroidStyles(appConfig, function (decoratedAppConfig) {
+    try {
+      decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
+        decoratedAppConfig.modResults,
+        {
+          add: true,
+          parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
+          name: 'android:windowBackground',
+          value: '@drawable/splashscreen',
+        },
+      )
+    } catch (e) {
+      console.error(`withAndroidStylesWindowBackgroundPlugin failed`, e)
+    }
+    return decoratedAppConfig
+  })
+}
@@ -0,0 +1,9 @@
+'use strict'
+
+module.exports = {
+  target: '18',
+  environment: {
+    enableTreatRefLikeIdentifiersAsRefs: true,
+    validateRefAccessDuringRender: false, // TODO: Make it `true`.
+  },
+}
@@ -4,17 +4,16 @@ import '#/view/icons'

 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {
  initialWindowMetrics,
  SafeAreaProvider,
 } from 'react-native-safe-area-context'
 import * as SplashScreen from 'expo-splash-screen'
-import * as SystemUI from 'expo-system-ui'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {KeyboardControllerProvider} from '#/lib/hooks/useEnableKeyboardController'
 import {QueryProvider} from '#/lib/react-query'
 import {
  initialize,
@@ -25,7 +24,6 @@ import {s} from '#/lib/styles'
 import {ThemeProvider} from '#/lib/ThemeContext'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
 import {Provider as A11yProvider} from '#/state/a11y'
 import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
 import {Provider as DialogStateProvider} from '#/state/dialogs'
@@ -68,15 +66,11 @@ import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
-import {AppProfiler} from '#/AppProfiler'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'

 SplashScreen.preventAutoHideAsync()
-if (isIOS) {
-  SystemUI.setBackgroundColorAsync('black')
-}

 /**
 * Begin geolocation ASAP
@@ -190,42 +184,40 @@ function App() {
   * that is set up in the InnerApp component above.
   */
  return (
-    <AppProfiler>
-      <GeolocationProvider>
-        <A11yProvider>
-          <KeyboardControllerProvider>
-            <SessionProvider>
-              <PrefsStateProvider>
-                <I18nProvider>
-                  <ShellStateProvider>
-                    <InvitesStateProvider>
-                      <ModalStateProvider>
-                        <DialogStateProvider>
-                          <LightboxStateProvider>
-                            <PortalProvider>
-                              <BottomSheetProvider>
-                                <StarterPackProvider>
-                                  <SafeAreaProvider
-                                    initialMetrics={initialWindowMetrics}>
-                                    <IntentDialogProvider>
-                                      <InnerApp />
-                                    </IntentDialogProvider>
-                                  </SafeAreaProvider>
-                                </StarterPackProvider>
-                              </BottomSheetProvider>
-                            </PortalProvider>
-                          </LightboxStateProvider>
-                        </DialogStateProvider>
-                      </ModalStateProvider>
-                    </InvitesStateProvider>
-                  </ShellStateProvider>
-                </I18nProvider>
-              </PrefsStateProvider>
-            </SessionProvider>
-          </KeyboardControllerProvider>
-        </A11yProvider>
-      </GeolocationProvider>
-    </AppProfiler>
+    <GeolocationProvider>
+      <A11yProvider>
+        <KeyboardProvider enabled={false} statusBarTranslucent={true}>
+          <SessionProvider>
+            <PrefsStateProvider>
+              <I18nProvider>
+                <ShellStateProvider>
+                  <InvitesStateProvider>
+                    <ModalStateProvider>
+                      <DialogStateProvider>
+                        <LightboxStateProvider>
+                          <PortalProvider>
+                            <BottomSheetProvider>
+                              <StarterPackProvider>
+                                <SafeAreaProvider
+                                  initialMetrics={initialWindowMetrics}>
+                                  <IntentDialogProvider>
+                                    <InnerApp />
+                                  </IntentDialogProvider>
+                                </SafeAreaProvider>
+                              </StarterPackProvider>
+                            </BottomSheetProvider>
+                          </PortalProvider>
+                        </LightboxStateProvider>
+                      </DialogStateProvider>
+                    </ModalStateProvider>
+                  </InvitesStateProvider>
+                </ShellStateProvider>
+              </I18nProvider>
+            </PrefsStateProvider>
+          </SessionProvider>
+        </KeyboardProvider>
+      </A11yProvider>
+    </GeolocationProvider>
  )
 }

@@ -3,6 +3,7 @@ import '#/view/icons'
 import './style.css'

 import React, {useEffect, useState} from 'react'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
@@ -101,52 +102,54 @@ function InnerApp() {
  if (!isReady || !hasCheckedReferrer) return null

  return (
-    <Alf theme={theme}>
-      <ThemeProvider theme={theme}>
-        <RootSiblingParent>
-          <VideoVolumeProvider>
-            <ActiveVideoProvider>
-              <React.Fragment
-                // Resets the entire tree below when it changes:
-                key={currentAccount?.did}>
-                <QueryProvider currentDid={currentAccount?.did}>
-                  <ComposerProvider>
-                    <StatsigProvider>
-                      <MessagesProvider>
-                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                        <LabelDefsProvider>
-                          <ModerationOptsProvider>
-                            <LoggedOutViewProvider>
-                              <SelectedFeedProvider>
-                                <HiddenRepliesProvider>
-                                  <UnreadNotifsProvider>
-                                    <BackgroundNotificationPreferencesProvider>
-                                      <MutedThreadsProvider>
-                                        <SafeAreaProvider>
-                                          <ProgressGuideProvider>
-                                            <Shell />
-                                            <NuxDialogs />
-                                          </ProgressGuideProvider>
-                                        </SafeAreaProvider>
-                                      </MutedThreadsProvider>
-                                    </BackgroundNotificationPreferencesProvider>
-                                  </UnreadNotifsProvider>
-                                </HiddenRepliesProvider>
-                              </SelectedFeedProvider>
-                            </LoggedOutViewProvider>
-                          </ModerationOptsProvider>
-                        </LabelDefsProvider>
-                      </MessagesProvider>
-                    </StatsigProvider>
-                  </ComposerProvider>
-                </QueryProvider>
-                <ToastContainer />
-              </React.Fragment>
-            </ActiveVideoProvider>
-          </VideoVolumeProvider>
-        </RootSiblingParent>
-      </ThemeProvider>
-    </Alf>
+    <KeyboardProvider enabled={false}>
+      <Alf theme={theme}>
+        <ThemeProvider theme={theme}>
+          <RootSiblingParent>
+            <VideoVolumeProvider>
+              <ActiveVideoProvider>
+                <React.Fragment
+                  // Resets the entire tree below when it changes:
+                  key={currentAccount?.did}>
+                  <QueryProvider currentDid={currentAccount?.did}>
+                    <ComposerProvider>
+                      <StatsigProvider>
+                        <MessagesProvider>
+                          {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                          <LabelDefsProvider>
+                            <ModerationOptsProvider>
+                              <LoggedOutViewProvider>
+                                <SelectedFeedProvider>
+                                  <HiddenRepliesProvider>
+                                    <UnreadNotifsProvider>
+                                      <BackgroundNotificationPreferencesProvider>
+                                        <MutedThreadsProvider>
+                                          <SafeAreaProvider>
+                                            <ProgressGuideProvider>
+                                              <Shell />
+                                              <NuxDialogs />
+                                            </ProgressGuideProvider>
+                                          </SafeAreaProvider>
+                                        </MutedThreadsProvider>
+                                      </BackgroundNotificationPreferencesProvider>
+                                    </UnreadNotifsProvider>
+                                  </HiddenRepliesProvider>
+                                </SelectedFeedProvider>
+                              </LoggedOutViewProvider>
+                            </ModerationOptsProvider>
+                          </LabelDefsProvider>
+                        </MessagesProvider>
+                      </StatsigProvider>
+                    </ComposerProvider>
+                  </QueryProvider>
+                  <ToastContainer />
+                </React.Fragment>
+              </ActiveVideoProvider>
+            </VideoVolumeProvider>
+          </RootSiblingParent>
+        </ThemeProvider>
+      </Alf>
+    </KeyboardProvider>
  )
 }

@@ -1,29 +0,0 @@
-import React, {Profiler} from 'react'
-
-// Don't let it get stripped out in profiling builds (which apply production Babel preset).
-const log = (global as any)['con' + 'sole'].log
-
-function onRender(id: string, phase: string, actualDuration: number) {
-  if (!__DEV__) {
-    // This block of code will exist in the production build of the app.
-    // However, only profiling builds of React call `onRender` so it's dead code in actual production.
-    const message = `<Profiler> ${id}:${phase} ${
-      actualDuration > 500
-        ? '(╯°□°）╯ '
-        : actualDuration > 100
-        ? '[!!] '
-        : actualDuration > 16
-        ? '[!] '
-        : ''
-    }${Math.round(actualDuration)}ms`
-    log(message)
-  }
-}
-
-export function AppProfiler({children}: {children: React.ReactNode}) {
-  return (
-    <Profiler id="app" onRender={onRender}>
-      {children}
-    </Profiler>
-  )
-}
@@ -32,7 +32,7 @@ import {
 import {RouteParams, State} from '#/lib/routes/types'
 import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
 import {bskyTitle} from '#/lib/strings/headings'
-import {isNative, isWeb} from '#/platform/detection'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
@@ -79,7 +79,6 @@ import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
 import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
-import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
 import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
 import {
  StarterPackScreen,
@@ -363,14 +362,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
          requireAuth: true,
        }}
      />
-      <Stack.Screen
-        name="AppIconSettings"
-        getComponent={() => AppIconSettingsScreen}
-        options={{
-          title: title(msg`App Icon`),
-          requireAuth: true,
-        }}
-      />
      <Stack.Screen
        name="Hashtag"
        getComponent={() => HashtagScreen}
@@ -462,6 +453,7 @@ function HomeTabNavigator() {
  return (
    <HomeTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -480,6 +472,7 @@ function SearchTabNavigator() {
  return (
    <SearchTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -497,6 +490,7 @@ function NotificationsTabNavigator() {
  return (
    <NotificationsTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -518,6 +512,7 @@ function MyProfileTabNavigator() {
  return (
    <MyProfileTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -543,6 +538,7 @@ function MessagesTabNavigator() {
  return (
    <MessagesTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -576,6 +572,7 @@ const FlatNavigator = () => {
    <Flat.Navigator
      screenListeners={screenListeners}
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -1,17 +0,0 @@
-import {useEffect} from 'react'
-import * as SplashScreen from 'expo-splash-screen'
-
-type Props = {
-  isReady: boolean
-}
-
-export function Splash({isReady, children}: React.PropsWithChildren<Props>) {
-  useEffect(() => {
-    if (isReady) {
-      SplashScreen.hideAsync()
-    }
-  }, [isReady])
-  if (isReady) {
-    return children
-  }
-}
@@ -18,7 +18,9 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import Svg, {Path, SvgProps} from 'react-native-svg'
 import {Image} from 'expo-image'
 import * as SplashScreen from 'expo-splash-screen'
+import MaskedView from '@react-native-masked-view/masked-view'

+import {isAndroid} from '#/platform/detection'
 import {Logotype} from '#/view/icons/Logotype'
 // @ts-ignore
 import splashImagePointer from '../assets/splash.png'
@@ -51,8 +53,9 @@ type Props = {
  isReady: boolean
 }

+const AnimatedLogo = Animated.createAnimatedComponent(Logo)
+
 export function Splash(props: React.PropsWithChildren<Props>) {
-  'use no memo'
  const insets = useSafeAreaInsets()
  const intro = useSharedValue(0)
  const outroLogo = useSharedValue(0)
@@ -148,6 +151,8 @@ export function Splash(props: React.PropsWithChildren<Props>) {
              {duration: 400, easing: Easing.out(Easing.cubic)},
              async () => {
                // set these values to check animation at specific point
+                // outroLogo.set(0.1)
+                // outroApp.set(0.1)
                outroLogo.set(() =>
                  withTiming(
                    1,
@@ -215,31 +220,66 @@ export function Splash(props: React.PropsWithChildren<Props>) {
        </View>
      )}

-      {isReady && (
-        <>
-          <Animated.View style={[{flex: 1}, appAnimation]}>
-            {props.children}
-          </Animated.View>
-
-          {!isAnimationComplete && (
-            <Animated.View
-              style={[
-                StyleSheet.absoluteFillObject,
-                logoWrapperAnimation,
-                {
-                  flex: 1,
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
-                },
-              ]}>
-              <Animated.View style={[logoAnimations]}>
-                <Logo fill={logoBg} />
-              </Animated.View>
+      {isReady &&
+        (isAndroid || reduceMotion === true ? (
+          // Use a simple fade on older versions of android (work around a bug)
+          <>
+            <Animated.View style={[{flex: 1}, appAnimation]}>
+              {props.children}
            </Animated.View>
-          )}
-        </>
-      )}
+
+            {!isAnimationComplete && (
+              <Animated.View
+                style={[
+                  StyleSheet.absoluteFillObject,
+                  logoWrapperAnimation,
+                  {
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                  },
+                ]}>
+                <AnimatedLogo
+                  fill={logoBg}
+                  style={[{opacity: 0}, logoAnimations]}
+                />
+              </Animated.View>
+            )}
+          </>
+        ) : (
+          <MaskedView
+            style={[StyleSheet.absoluteFillObject]}
+            maskElement={
+              <Animated.View
+                style={[
+                  {
+                    // Transparent background because mask is based off alpha channel.
+                    backgroundColor: 'transparent',
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
+                  },
+                ]}>
+                <AnimatedLogo fill={logoBg} style={[logoAnimations]} />
+              </Animated.View>
+            }>
+            {!isAnimationComplete && (
+              <View
+                style={[
+                  StyleSheet.absoluteFillObject,
+                  {
+                    backgroundColor: logoBg,
+                  },
+                ]}
+              />
+            )}
+            <Animated.View style={[{flex: 1}, appAnimation]}>
+              {props.children}
+            </Animated.View>
+          </MaskedView>
+        ))}
    </View>
  )
 }
@@ -1,8 +1,7 @@
 import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'

 import * as tokens from '#/alf/tokens'
-import {ios, native, platform, web} from '#/alf/util/platform'
-import * as Layout from '#/components/Layout'
+import {native, web} from '#/alf/util/platform'

 export const atoms = {
  debug: {
@@ -22,9 +21,6 @@ export const atoms = {
  relative: {
    position: 'relative',
  },
-  sticky: web({
-    position: 'sticky',
-  }),
  inset_0: {
    top: 0,
    left: 0,
@@ -68,7 +64,6 @@ export const atoms = {
   * Used for the outermost components on screens, to ensure that they can fill
   * the screen and extend beyond.
   */
-  // @ts-ignore - web only minHeight string
  util_screen_outer: [
    web({
      minHeight: '100vh',
@@ -317,12 +312,6 @@ export const atoms = {
  border_r: {
    borderRightWidth: StyleSheet.hairlineWidth,
  },
-  curve_circular: ios({
-    borderCurve: 'circular',
-  }),
-  curve_continuous: ios({
-    borderCurve: 'continuous',
-  }),

  /*
   * Shadow
@@ -946,20 +935,4 @@ export const atoms = {
    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
    transitionDuration: '100ms',
  }),
-
-  /**
-   * {@link Layout.SCROLLBAR_OFFSET}
-   */
-  scrollbar_offset: platform({
-    web: {
-      transform: [
-        {
-          translateX: Layout.SCROLLBAR_OFFSET,
-        },
-      ],
-    },
-    native: {
-      transform: [],
-    },
-  }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
 } as const
@@ -20,7 +20,6 @@ export * from '#/alf/types'
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
-export * from '#/alf/util/useGutterStyles'

 export type Alf = {
  themeName: ThemeName
@@ -1,126 +0,0 @@
-import React, {Children} from 'react'
-import {TextProps as RNTextProps} from 'react-native'
-import {StyleProp, TextStyle} from 'react-native'
-import {UITextView} from 'react-native-uitextview'
-import createEmojiRegex from 'emoji-regex'
-
-import {isNative} from '#/platform/detection'
-import {isIOS} from '#/platform/detection'
-import {Alf, applyFonts, atoms, flatten} from '#/alf'
-
-/**
- * Util to calculate lineHeight from a text size atom and a leading atom
- *
- * Example:
- *   `leading(atoms.text_md, atoms.leading_normal)` // => 24
- */
-export function leading<
-  Size extends {fontSize?: number},
-  Leading extends {lineHeight?: number},
->(textSize: Size, leading: Leading) {
-  const size = textSize?.fontSize || atoms.text_md.fontSize
-  const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
-  return Math.round(size * lineHeight)
-}
-
-/**
- * Ensures that `lineHeight` defaults to a relative value of `1`, or applies
- * other relative leading atoms.
- *
- * If the `lineHeight` value is > 2, we assume it's an absolute value and
- * returns it as-is.
- */
-export function normalizeTextStyles(
-  styles: StyleProp<TextStyle>,
-  {
-    fontScale,
-    fontFamily,
-  }: {
-    fontScale: number
-    fontFamily: Alf['fonts']['family']
-  } & Pick<Alf, 'flags'>,
-) {
-  const s = flatten(styles)
-  // should always be defined on these components
-  s.fontSize = (s.fontSize || atoms.text_md.fontSize) * fontScale
-
-  if (s?.lineHeight) {
-    if (s.lineHeight !== 0 && s.lineHeight <= 2) {
-      s.lineHeight = Math.round(s.fontSize * s.lineHeight)
-    }
-  } else if (!isNative) {
-    s.lineHeight = s.fontSize
-  }
-
-  applyFonts(s, fontFamily)
-
-  return s
-}
-
-export type StringChild = string | (string | null)[]
-export type TextProps = RNTextProps & {
-  /**
-   * Lets the user select text, to use the native copy and paste functionality.
-   */
-  selectable?: boolean
-  /**
-   * Provides `data-*` attributes to the underlying `UITextView` component on
-   * web only.
-   */
-  dataSet?: Record<string, string | number | undefined>
-  /**
-   * Appears as a small tooltip on web hover.
-   */
-  title?: string
-  /**
-   * Whether the children could possibly contain emoji.
-   */
-  emoji?: boolean
-}
-
-const EMOJI = createEmojiRegex()
-
-export function childHasEmoji(children: React.ReactNode) {
-  let hasEmoji = false
-  Children.forEach(children, child => {
-    if (typeof child === 'string' && createEmojiRegex().test(child)) {
-      hasEmoji = true
-    }
-  })
-  return hasEmoji
-}
-
-export function renderChildrenWithEmoji(
-  children: React.ReactNode,
-  props: Omit<TextProps, 'children'> = {},
-  emoji: boolean,
-) {
-  if (!isIOS || !emoji) {
-    return children
-  }
-  return Children.map(children, child => {
-    if (typeof child !== 'string') return child
-
-    const emojis = child.match(EMOJI)
-
-    if (emojis === null) {
-      return child
-    }
-
-    return child.split(EMOJI).map((stringPart, index) => [
-      stringPart,
-      emojis[index] ? (
-        <UITextView
-          {...props}
-          style={[props?.style, {color: 'black', fontFamily: 'System'}]}>
-          {emojis[index]}
-        </UITextView>
-      ) : null,
-    ])
-  })
-}
-
-const SINGLE_EMOJI_RE = /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u
-export function isOnlyEmoji(text: string) {
-  return text.length <= 15 && SINGLE_EMOJI_RE.test(text)
-}
@@ -1,18 +0,0 @@
-import * as NavigationBar from 'expo-navigation-bar'
-
-import {isAndroid} from '#/platform/detection'
-import {Theme} from '../types'
-
-export function setNavigationBar(themeType: 'theme' | 'lightbox', t: Theme) {
-  if (isAndroid) {
-    if (themeType === 'theme') {
-      NavigationBar.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setBorderColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setButtonStyleAsync(t.name !== 'light' ? 'light' : 'dark')
-    } else {
-      NavigationBar.setBackgroundColorAsync('black')
-      NavigationBar.setBorderColorAsync('black')
-      NavigationBar.setButtonStyleAsync('light')
-    }
-  }
-}
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'
-
-export function useGutterStyles({
-  top,
-  bottom,
-}: {
-  top?: boolean
-  bottom?: boolean
-} = {}) {
-  const {gtMobile} = useBreakpoints()
-  return React.useMemo<ViewStyleProp['style']>(() => {
-    return [
-      a.px_lg,
-      top && a.pt_md,
-      bottom && a.pb_md,
-      gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg],
-    ]
-  }, [gtMobile, top, bottom])
-}
@@ -34,7 +34,6 @@ export function AppLanguageDropdown(_props: ViewStyleProp) {
  return (
    <View style={a.relative}>
      <RNPickerSelect
-        darkTheme={t.scheme === 'dark'}
        placeholder={{}}
        value={sanitizedLang}
        onValueChange={onChangeAppLanguage}
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'
 import {moderateProfile} from '@atproto/api'

@@ -405,47 +405,37 @@ export const Button = React.forwardRef<View, ButtonProps>(
      }
    }, [t, variant, color, size, shape, disabled])

-    const gradientValues = React.useMemo(() => {
-      const gradient = {
-        primary: tokens.gradients.sky,
-        secondary: tokens.gradients.sky,
-        secondary_inverted: tokens.gradients.sky,
-        negative: tokens.gradients.sky,
-        gradient_primary: tokens.gradients.primary,
-        gradient_sky: tokens.gradients.sky,
-        gradient_midnight: tokens.gradients.midnight,
-        gradient_sunrise: tokens.gradients.sunrise,
-        gradient_sunset: tokens.gradients.sunset,
-        gradient_nordic: tokens.gradients.nordic,
-        gradient_bonfire: tokens.gradients.bonfire,
-      }[color || 'primary']
+    const {gradientColors, gradientHoverColors, gradientLocations} =
+      React.useMemo(() => {
+        const colors: string[] = []
+        const hoverColors: string[] = []
+        const locations: number[] = []
+        const gradient = {
+          primary: tokens.gradients.sky,
+          secondary: tokens.gradients.sky,
+          secondary_inverted: tokens.gradients.sky,
+          negative: tokens.gradients.sky,
+          gradient_primary: tokens.gradients.primary,
+          gradient_sky: tokens.gradients.sky,
+          gradient_midnight: tokens.gradients.midnight,
+          gradient_sunrise: tokens.gradients.sunrise,
+          gradient_sunset: tokens.gradients.sunset,
+          gradient_nordic: tokens.gradients.nordic,
+          gradient_bonfire: tokens.gradients.bonfire,
+        }[color || 'primary']

-      if (variant === 'gradient') {
-        if (gradient.values.length < 2) {
-          throw new Error(
-            'Gradient buttons must have at least two colors in the gradient',
-          )
+        if (variant === 'gradient') {
+          colors.push(...gradient.values.map(([_, color]) => color))
+          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          locations.push(...gradient.values.map(([location, _]) => location))
        }

        return {
-          colors: gradient.values.map(([_, color]) => color) as [
-            string,
-            string,
-            ...string[],
-          ],
-          hoverColors: gradient.values.map(_ => gradient.hover_value) as [
-            string,
-            string,
-            ...string[],
-          ],
-          locations: gradient.values.map(([location, _]) => location) as [
-            number,
-            number,
-            ...number[],
-          ],
+          gradientColors: colors,
+          gradientHoverColors: hoverColors,
+          gradientLocations: locations,
        }
-      }
-    }, [variant, color])
+      }, [variant, color])

    const context = React.useMemo<ButtonContext>(
      () => ({
@@ -489,7 +479,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
        onHoverOut={onHoverOut}
        onFocus={onFocus}
        onBlur={onBlur}>
-        {variant === 'gradient' && gradientValues && (
+        {variant === 'gradient' && (
          <View
            style={[
              a.absolute,
@@ -500,10 +490,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
            <LinearGradient
              colors={
                state.hovered || state.pressed
-                  ? gradientValues.hoverColors
-                  : gradientValues.colors
+                  ? gradientHoverColors
+                  : gradientColors
              }
-              locations={gradientValues.locations}
+              locations={gradientLocations}
              start={{x: 0, y: 0}}
              end={{x: 1, y: 1}}
              style={[a.absolute, a.inset_0]}
@@ -29,10 +29,10 @@ export function useDialogControl(): DialogOuterProps['control'] {
  const {activeDialogs} = useDialogStateContext()

  React.useEffect(() => {
-    activeDialogs.current.set(id, control)
+    const map = activeDialogs.current
+    map.set(id, control)
    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      activeDialogs.current.delete(id)
+      map.delete(id)
    }
  }, [id, activeDialogs])

@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 import {
  KeyboardAwareScrollView,
+  useKeyboardController,
  useKeyboardHandler,
 } from 'react-native-keyboard-controller'
 import {runOnJS} from 'react-native-reanimated'
@@ -19,7 +20,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {logger} from '#/logger'
 import {isAndroid, isIOS} from '#/platform/detection'
@@ -75,7 +75,7 @@ export function Outer({
      try {
        cb()
      } catch (e: any) {
-        logger.error(e || 'Error running close callback')
+        logger.error('Error running close callback', e)
      }
    }

@@ -199,20 +199,27 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
  ) {
    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
    const insets = useSafeAreaInsets()
-
-    useEnableKeyboardController(isIOS)
+    const {setEnabled} = useKeyboardController()

    const [keyboardHeight, setKeyboardHeight] = React.useState(0)

-    useKeyboardHandler(
-      {
-        onEnd: e => {
-          'worklet'
-          runOnJS(setKeyboardHeight)(e.height)
-        },
+    React.useEffect(() => {
+      if (!isIOS) {
+        return
+      }
+
+      setEnabled(true)
+      return () => {
+        setEnabled(false)
+      }
+    })
+
+    useKeyboardHandler({
+      onEnd: e => {
+        'worklet'
+        runOnJS(setKeyboardHeight)(e.height)
      },
-      [],
-    )
+    })

    const basePading =
      (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
@@ -7,12 +7,12 @@ import {
  View,
  ViewStyle,
 } from 'react-native'
+import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
 import {useFocusGuards} from '@radix-ui/react-focus-guards'
 import {FocusScope} from '@radix-ui/react-focus-scope'
-import {RemoveScrollBar} from 'react-remove-scroll-bar'

 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
@@ -42,6 +42,7 @@ export function Outer({
  onClose,
 }: React.PropsWithChildren<DialogOuterProps>) {
  const {_} = useLingui()
+  const t = useTheme()
  const {gtMobile} = useBreakpoints()
  const [isOpen, setIsOpen] = React.useState(false)
  const {setDialogIsOpen} = useDialogStateControlContext()
@@ -104,7 +105,6 @@ export function Outer({
      {isOpen && (
        <Portal>
          <Context.Provider value={context}>
-            <RemoveScrollBar />
            <TouchableWithoutFeedback
              accessibilityHint={undefined}
              accessibilityLabel={_(msg`Close active dialog`)}
@@ -118,7 +118,16 @@ export function Outer({
                  gtMobile ? a.p_lg : a.p_md,
                  {overflowY: 'auto'},
                ]}>
-                <Backdrop />
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  // exiting={FadeOut.duration(150)}
+                  style={[
+                    web(a.fixed),
+                    a.inset_0,
+                    {opacity: 0.8, backgroundColor: t.palette.black},
+                  ]}
+                />
+
                <View
                  style={[
                    a.w_full,
@@ -155,7 +164,7 @@ export function Inner({
  useFocusGuards()
  return (
    <FocusScope loop asChild trapped>
-      <View
+      <Animated.View
        role="dialog"
        aria-role="dialog"
        aria-label={label}
@@ -165,6 +174,8 @@ export function Inner({
        onClick={stopPropagation}
        onStartShouldSetResponder={_ => true}
        onTouchEnd={stopPropagation}
+        entering={FadeInDown.duration(100)}
+        // exiting={FadeOut.duration(100)}
        style={flatten([
          a.relative,
          a.rounded_md,
@@ -177,8 +188,6 @@ export function Inner({
            shadowColor: t.palette.black,
            shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
            shadowRadius: 30,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.1s',
          },
          flatten(style),
        ])}>
@@ -192,7 +201,7 @@ export function Inner({
            {children}
          </View>
        </DismissableLayer>
-      </View>
+      </Animated.View>
    </FocusScope>
  )
 }
@@ -259,25 +268,3 @@ export function Close() {
 export function Handle() {
  return null
 }
-
-function Backdrop() {
-  const t = useTheme()
-  return (
-    <View
-      style={{
-        opacity: 0.8,
-      }}>
-      <View
-        style={[
-          a.fixed,
-          a.inset_0,
-          {
-            backgroundColor: t.palette.black,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.15s',
-          },
-        ]}
-      />
-    </View>
-  )
-}
@@ -1,7 +1,7 @@
 import React from 'react'
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'

-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {Text} from '#/components/Typography'

 export function Header({
@@ -29,8 +29,10 @@ export function Header({
        a.border_b,
        t.atoms.border_contrast_medium,
        t.atoms.bg,
-        {borderTopLeftRadius: a.rounded_md.borderRadius},
-        {borderTopRightRadius: a.rounded_md.borderRadius},
+        web([
+          {borderRadiusTopLeft: a.rounded_md.borderRadius},
+          {borderRadiusTopRight: a.rounded_md.borderRadius},
+        ]),
        style,
      ]}>
      {renderLeft && (
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'

 import {atoms as a, flatten, useTheme, ViewStyleProp} from '#/alf'
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,3 +1,4 @@
+import React from 'react'
 import {LinearGradient} from 'expo-linear-gradient'

 import {atoms as a, tokens} from '#/alf'
@@ -14,16 +15,10 @@ export function GradientFill({
    | typeof tokens.gradients.summer
    | typeof tokens.gradients.nordic
 }) {
-  if (gradient.values.length < 2) {
-    throw new Error('Gradient must have at least 2 colors')
-  }
-
  return (
    <LinearGradient
-      colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
-      locations={
-        gradient.values.map(c => c[0]) as [number, number, ...number[]]
-      }
+      colors={gradient.values.map(c => c[1])}
+      locations={gradient.values.map(c => c[0])}
      start={{x: 0, y: 0}}
      end={{x: 1, y: 1}}
      style={[a.absolute, a.inset_0]}
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'

 import {
@@ -0,0 +1,100 @@
+import React, {useContext, useMemo} from 'react'
+import {View, ViewStyle} from 'react-native'
+import {StyleProp} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {ScrollView} from '#/view/com/util/Views'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
+
+// Every screen should have a Layout component wrapping it.
+// This component provides a default padding for the top of the screen.
+// This allows certain screens to avoid the top padding if they want to.
+
+const LayoutContext = React.createContext({
+  withinScreen: false,
+  topPaddingDisabled: false,
+  withinScrollView: false,
+})
+
+/**
+ * Every screen should have a Layout.Screen component wrapping it.
+ * This component provides a default padding for the top of the screen
+ * and height/minHeight
+ */
+let Screen = ({
+  disableTopPadding = false,
+  style,
+  ...props
+}: React.ComponentProps<typeof View> & {
+  disableTopPadding?: boolean
+  style?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const {top} = useSafeAreaInsets()
+  const context = useMemo(
+    () => ({
+      withinScreen: true,
+      topPaddingDisabled: disableTopPadding,
+      withinScrollView: false,
+    }),
+    [disableTopPadding],
+  )
+  return (
+    <LayoutContext.Provider value={context}>
+      <View
+        style={[
+          {paddingTop: disableTopPadding ? 0 : top},
+          a.util_screen_outer,
+          style,
+        ]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+}
+Screen = React.memo(Screen)
+export {Screen}
+
+let Header = (
+  props: React.ComponentProps<typeof ViewHeader>,
+): React.ReactNode => {
+  const {withinScrollView} = useContext(LayoutContext)
+  if (!withinScrollView) {
+    return (
+      <CenteredView topBorder={false} sideBorders>
+        <ViewHeader showOnDesktop showBorder {...props} />
+      </CenteredView>
+    )
+  } else {
+    return <ViewHeader showOnDesktop showBorder {...props} />
+  }
+}
+Header = React.memo(Header)
+export {Header}
+
+let Content = ({
+  style,
+  contentContainerStyle,
+  ...props
+}: React.ComponentProps<typeof ScrollView> & {
+  style?: StyleProp<ViewStyle>
+  contentContainerStyle?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const context = useContext(LayoutContext)
+  const newContext = useMemo(
+    () => ({...context, withinScrollView: true}),
+    [context],
+  )
+  return (
+    <LayoutContext.Provider value={newContext}>
+      <ScrollView
+        style={[a.flex_1, style]}
+        contentContainerStyle={[{paddingBottom: 100}, contentContainerStyle]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+}
+Content = React.memo(Content)
+export {Content}
@@ -1,199 +0,0 @@
-import {createContext, useCallback, useContext} from 'react'
-import {GestureResponderEvent, View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
-
-import {HITSLOP_30} from '#/lib/constants'
-import {NavigationProp} from '#/lib/routes/types'
-import {isIOS} from '#/platform/detection'
-import {useSetDrawerOpen} from '#/state/shell'
-import {
-  atoms as a,
-  platform,
-  TextStyleProp,
-  useBreakpoints,
-  useGutterStyles,
-  useTheme,
-} from '#/alf'
-import {Button, ButtonIcon, ButtonProps} from '#/components/Button'
-import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
-import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {
-  BUTTON_VISUAL_ALIGNMENT_OFFSET,
-  HEADER_SLOT_SIZE,
-} from '#/components/Layout/const'
-import {ScrollbarOffsetContext} from '#/components/Layout/context'
-import {Text} from '#/components/Typography'
-
-export function Outer({
-  children,
-  noBottomBorder,
-}: {
-  children: React.ReactNode
-  noBottomBorder?: boolean
-}) {
-  const t = useTheme()
-  const gutter = useGutterStyles()
-  const {gtMobile} = useBreakpoints()
-  const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
-
-  return (
-    <View
-      style={[
-        a.w_full,
-        !noBottomBorder && a.border_b,
-        a.flex_row,
-        a.align_center,
-        a.gap_sm,
-        gutter,
-        platform({
-          native: [a.pb_sm, a.pt_xs],
-          web: [a.py_sm],
-        }),
-        t.atoms.border_contrast_low,
-        gtMobile && [a.mx_auto, {maxWidth: 600}],
-        !isWithinOffsetView && a.scrollbar_offset,
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-const AlignmentContext = createContext<'platform' | 'left'>('platform')
-
-export function Content({
-  children,
-  align = 'platform',
-}: {
-  children?: React.ReactNode
-  align?: 'platform' | 'left'
-}) {
-  return (
-    <View
-      style={[
-        a.flex_1,
-        a.justify_center,
-        isIOS && align === 'platform' && a.align_center,
-        {minHeight: HEADER_SLOT_SIZE},
-      ]}>
-      <AlignmentContext.Provider value={align}>
-        {children}
-      </AlignmentContext.Provider>
-    </View>
-  )
-}
-
-export function Slot({children}: {children?: React.ReactNode}) {
-  return (
-    <View
-      style={[
-        a.z_50,
-        {
-          width: HEADER_SLOT_SIZE,
-        },
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
-  const {_} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-
-  const onPressBack = useCallback(
-    (evt: GestureResponderEvent) => {
-      onPress?.(evt)
-      if (evt.defaultPrevented) return
-      if (navigation.canGoBack()) {
-        navigation.goBack()
-      } else {
-        navigation.navigate('Home')
-      }
-    },
-    [onPress, navigation],
-  )
-
-  return (
-    <Slot>
-      <Button
-        label={_(msg`Go back`)}
-        size="small"
-        variant="ghost"
-        color="secondary"
-        shape="square"
-        onPress={onPressBack}
-        hitSlop={HITSLOP_30}
-        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]}
-        {...props}>
-        <ButtonIcon icon={ArrowLeft} size="lg" />
-      </Button>
-    </Slot>
-  )
-}
-
-export function MenuButton() {
-  const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
-  const {gtMobile} = useBreakpoints()
-
-  const onPress = useCallback(() => {
-    setDrawerOpen(true)
-  }, [setDrawerOpen])
-
-  return gtMobile ? null : (
-    <Slot>
-      <Button
-        label={_(msg`Open drawer menu`)}
-        size="small"
-        variant="ghost"
-        color="secondary"
-        shape="square"
-        onPress={onPress}
-        hitSlop={HITSLOP_30}
-        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
-        <ButtonIcon icon={Menu} size="lg" />
-      </Button>
-    </Slot>
-  )
-}
-
-export function TitleText({
-  children,
-  style,
-}: {children: React.ReactNode} & TextStyleProp) {
-  const {gtMobile} = useBreakpoints()
-  const align = useContext(AlignmentContext)
-  return (
-    <Text
-      style={[
-        a.text_lg,
-        a.font_heavy,
-        a.leading_tight,
-        isIOS && align === 'platform' && a.text_center,
-        gtMobile && a.text_xl,
-        style,
-      ]}
-      numberOfLines={2}>
-      {children}
-    </Text>
-  )
-}
-
-export function SubtitleText({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  const align = useContext(AlignmentContext)
-  return (
-    <Text
-      style={[
-        a.text_sm,
-        a.leading_snug,
-        isIOS && align === 'platform' && a.text_center,
-        t.atoms.text_contrast_medium,
-      ]}
-      numberOfLines={2}>
-      {children}
-    </Text>
-  )
-}
@@ -1,172 +0,0 @@
-# Layout
-
-This directory contains our core layout components. Use these when creating new
-screens, or when supplementing other components with functionality like
-centering.
-
-## Usage
-
-If we aren't talking about the `shell` components, layouts on individual screens
-look like more or less like this:
-
-```tsx
-<Outer>
-  <Header>...</Header>
-  <Content>...</Content>
-</Outer>
-```
-
-I'll map these words to real components.
-
-### `Layout.Screen`
-
-Provides the "Outer" functionality for a screen, like taking up the full height
-of the screen. **All screens should be wrapped with this component,** probably
-as the outermost component.
-
-> [!NOTE]
-> On web, `Layout.Screen` also provides the side borders on our central content
-> column. These borders are fixed position, 1px outside our center column width
-> of 600px.
->
-> What this effectively means is that _nothing inside the center content column
-> needs (or should) define left/right borders._ That is now handled in one
-> place: within `Layout.Screen`.
-
-### `Layout.Header.*`
-
-The `Layout.Header` component actually contains multiple sub-components. Use
-this to compose different versions of the header. The most basic version looks
-like this:
-
-```tsx
-<Layout.Header.Outer>
-  <Layout.Header.BackButton /> {/* or <Layout.Header.MenuButton /> */}
-
-  <Layout.Header.Content>
-    <Layout.Header.TitleText>Account</Layout.Header.TitleText>
-
-    {/* Optional subtitle */}
-    <Layout.Header.SubtitleText>Settings for @esb.lol</Layout.Header.SubtitleText>
-  </Layout.Header.Content>
-
-  <Layout.Header.Slot />
-</Layout.Header.Outer>
-```
-
-Note the additional `Slot` component. This is here to keep the header balanced
-and provide correct spacing on all platforms. The `Slot` is 34px wide, which
-matches the `BackButton` and `MenuButton`.
-
-> If anyone has better ideas, I'm all ears, but this was simple and the small
-> amount of boilerplate is only incurred when creating a new screen, which is
-> infrequent.
-
-It can also function as a "slot" for a button positioned on the right side. See
-the `Hashtag` screen for an example, abbreviated below:
-
-```tsx
-<Layout.Header.Slot>
-  <Button size='small' shape='round'>...</Button>
-</Layout.Header.Slot>
-```
-
-If you need additional customization, simply use the components that are helpful
-and create new ones as needed. A good example is the `SavedFeeds` screen, which
-looks roughly like this:
-
-```tsx
-<Layout.Header.Outer>
-  <Layout.Header.BackButton />
-
-  {/* Override to align content to the left, making room for the button */}
-  <Layout.Header.Content align='left'>
-    <Layout.Header.TitleText>Edit My Feeds</Layout.Header.TitleText>
-  </Layout.Header.Content>
-
-  {/* Custom button, wider than 34px */}
-  <Button size='small'>...</Button>
-</Layout.Header.Outer>
-```
-
-> [!TIP]
-> The `Header` should be _outside_ the `Content` component in order to be
-> fixed on scroll on native. Placing it inside will make it scroll with the rest
-> of the page.
-
-### `Layout.Content`
-
-This provides the "Content" functionality for a screen. This component is
-actually an `Animated.ScrollView`, and accepts props for that component. It
-provides a little default styling as well. On web, it also _centers the content
-inside our center content column of 600px_.
-
-> [!NOTE]
-> What about flatlists or pagers? Those components are not colocated here (yet).
-> But those components serve the same purpose of "Content".
-
-## Examples
-
-The most basic layout available to us looks like this:
-
-```tsx
-<Layout.Screen>
-  <Layout.Header.Outer>
-    <Layout.Header.BackButton /> {/* or <Layout.Header.MenuButton /> */}
-
-    <Layout.Header.Content>
-      <Layout.Header.TitleText>Account</Layout.Header.TitleText>
-
-      {/* Optional subtitle */}
-      <Layout.Header.SubtitleText>Settings for @esb.lol</Layout.Header.SubtitleText>
-    </Layout.Header.Content>
-
-    <Layout.Header.Slot />
-  </Layout.Header.Outer>
-
-  <Layout.Content>
-    ...
-  </Layout.Content>
-</Layout.Screen>
-```
-
-**For `List` views,** you'd sub in `List` for `Layout.Content` and it will
-function the same. See `Feeds` screen for an example.
-
-**For `Pager` views,** including `PagerWithHeader`, do the same. See `Hashtag`
-screen for an example.
-
-## Utilities
-
-### `Layout.Center`
-
-This component behaves like our old `CenteredView` component.
-
-### `Layout.SCROLLBAR_OFFSET` and `Layout.SCROLLBAR_OFFSET_POSITIVE`
-
-Provide a pre-configured CSS vars for use when aligning fixed position elements.
-More on this below.
-
-## Scrollbar gutter handling
-
-Operating systems allow users to configure if their browser _always_ shows
-scrollbars not. Some OSs also don't allow configuration.
-
-The presence of scrollbars affects layout, particularly fixed position elements.
-Browsers support `scrollbar-gutter`, but each behaves differently. Our approach
-is to use the default `scrollbar-gutter: auto`. Basically, we start from a clean
-slate.
-
-This handling becomes particularly thorny when we need to lock scroll, like when
-opening a dialog or dropdown. Radix uses the library `react-remove-scroll`
-internally, which in turn depends on
-[`react-remove-scroll-bar`](https://github.com/theKashey/react-remove-scroll-bar).
-We've opted to rely on this transient dependency. This library adds some utility
-classes and CSS vars to the page when scroll is locked.
-
-**It is this CSS variable that we use in `SCROLLBAR_OFFSET` values.** This
-ensures that elements do not shift relative to the screen when opening a
-dropdown or dialog.
-
-These styles are applied where needed and we should have very little need of
-adjusting them often.
@@ -1,16 +0,0 @@
-export const SCROLLBAR_OFFSET =
-  'calc(-1 * var(--removed-body-scroll-bar-size, 0px) / 2)' as any
-export const SCROLLBAR_OFFSET_POSITIVE =
-  'calc(var(--removed-body-scroll-bar-size, 0px) / 2)' as any
-
-/**
- * Useful for visually aligning icons within header buttons with the elements
- * below them on the screen. Apply positively or negatively depending on side
- * of the screen you're on.
- */
-export const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
-
-/**
- * Corresponds to the width of a small square or round button
- */
-export const HEADER_SLOT_SIZE = 34
@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const ScrollbarOffsetContext = React.createContext({
-  isWithinOffsetView: false,
-})
@@ -1,188 +0,0 @@
-import React, {useContext, useMemo} from 'react'
-import {StyleSheet, View, ViewProps, ViewStyle} from 'react-native'
-import {StyleProp} from 'react-native'
-import {
-  KeyboardAwareScrollView,
-  KeyboardAwareScrollViewProps,
-} from 'react-native-keyboard-controller'
-import Animated, {
-  AnimatedScrollViewProps,
-  useAnimatedProps,
-} from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
-
-import {isWeb} from '#/platform/detection'
-import {useShellLayout} from '#/state/shell/shell-layout'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
-import {ScrollbarOffsetContext} from '#/components/Layout/context'
-
-export * from '#/components/Layout/const'
-export * as Header from '#/components/Layout/Header'
-
-export type ScreenProps = React.ComponentProps<typeof View> & {
-  style?: StyleProp<ViewStyle>
-}
-
-/**
- * Outermost component of every screen
- */
-export const Screen = React.memo(function Screen({
-  style,
-  ...props
-}: ScreenProps) {
-  const {top} = useSafeAreaInsets()
-  return (
-    <>
-      {isWeb && <WebCenterBorders />}
-      <View
-        style={[a.util_screen_outer, {paddingTop: top}, style]}
-        {...props}
-      />
-    </>
-  )
-})
-
-export type ContentProps = AnimatedScrollViewProps & {
-  style?: StyleProp<ViewStyle>
-  contentContainerStyle?: StyleProp<ViewStyle>
-}
-
-/**
- * Default scroll view for simple pages
- */
-export const Content = React.memo(function Content({
-  children,
-  style,
-  contentContainerStyle,
-  ...props
-}: ContentProps) {
-  const {footerHeight} = useShellLayout()
-  const animatedProps = useAnimatedProps(() => {
-    return {
-      scrollIndicatorInsets: {
-        bottom: footerHeight.get(),
-        top: 0,
-        right: 1,
-      },
-    } satisfies AnimatedScrollViewProps
-  })
-
-  return (
-    <Animated.ScrollView
-      id="content"
-      automaticallyAdjustsScrollIndicatorInsets={false}
-      // sets the scroll inset to the height of the footer
-      animatedProps={animatedProps}
-      style={[scrollViewStyles.common, style]}
-      contentContainerStyle={[
-        scrollViewStyles.contentContainer,
-        contentContainerStyle,
-      ]}
-      {...props}>
-      {isWeb ? (
-        // @ts-ignore web only -esb
-        <Center>{children}</Center>
-      ) : (
-        children
-      )}
-    </Animated.ScrollView>
-  )
-})
-
-const scrollViewStyles = StyleSheet.create({
-  common: {
-    width: '100%',
-  },
-  contentContainer: {
-    paddingBottom: 100,
-  },
-})
-
-export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & {
-  children: React.ReactNode
-  contentContainerStyle?: StyleProp<ViewStyle>
-}
-
-/**
- * Default scroll view for simple pages.
- *
- * BE SURE TO TEST THIS WHEN USING, it's untested as of writing this comment.
- */
-export const KeyboardAwareContent = React.memo(function LayoutScrollView({
-  children,
-  style,
-  contentContainerStyle,
-  ...props
-}: KeyboardAwareContentProps) {
-  return (
-    <KeyboardAwareScrollView
-      style={[scrollViewStyles.common, style]}
-      contentContainerStyle={[
-        scrollViewStyles.contentContainer,
-        contentContainerStyle,
-      ]}
-      keyboardShouldPersistTaps="handled"
-      {...props}>
-      {isWeb ? <Center>{children}</Center> : children}
-    </KeyboardAwareScrollView>
-  )
-})
-
-/**
- * Utility component to center content within the screen
- */
-export const Center = React.memo(function LayoutContent({
-  children,
-  style,
-  ...props
-}: ViewProps) {
-  const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
-  const {gtMobile} = useBreakpoints()
-  const ctx = useMemo(() => ({isWithinOffsetView: true}), [])
-  return (
-    <View
-      style={[
-        a.w_full,
-        a.mx_auto,
-        gtMobile && {
-          maxWidth: 600,
-        },
-        style,
-        !isWithinOffsetView && a.scrollbar_offset,
-      ]}
-      {...props}>
-      <ScrollbarOffsetContext.Provider value={ctx}>
-        {children}
-      </ScrollbarOffsetContext.Provider>
-    </View>
-  )
-})
-
-/**
- * Only used within `Layout.Screen`, not for reuse
- */
-const WebCenterBorders = React.memo(function LayoutContent() {
-  const t = useTheme()
-  const {gtMobile} = useBreakpoints()
-  return gtMobile ? (
-    <View
-      style={[
-        a.fixed,
-        a.inset_0,
-        a.border_l,
-        a.border_r,
-        t.atoms.border_contrast_low,
-        web({
-          width: 602,
-          left: '50%',
-          transform: [
-            {
-              translateX: '-50%',
-            },
-            ...a.scrollbar_offset.transform,
-          ],
-        }),
-      ]}
-    />
-  ) : null
-})
@@ -12,14 +12,8 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {List} from '#/view/com/util/List'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'

-function renderItem({item, index}: {item: GetLikes.Like; index: number}) {
-  return (
-    <ProfileCardWithFollowBtn
-      key={item.actor.did}
-      profile={item.actor}
-      noBorder={index === 0}
-    />
-  )
+function renderItem({item}: {item: GetLikes.Like}) {
+  return <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
 }

 function keyExtractor(item: GetLikes.Like) {
@@ -87,8 +81,6 @@ export function LikedByList({uri}: {uri: string}) {
        )}
        errorMessage={cleanError(resolveError || error)}
        onRetry={isError ? refetch : undefined}
-        topBorder={false}
-        sideBorders={false}
      />
    )
  }
@@ -111,7 +103,6 @@ export function LikedByList({uri}: {uri: string}) {
      onEndReachedThreshold={3}
      initialNumToRender={initialNumToRender}
      windowSize={11}
-      sideBorders={false}
    />
  )
 }
@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -13,11 +13,7 @@ export function LinearGradientBackground({
 }) {
  const gradient = gradients.sky.values.map(([_, color]) => {
    return color
-  }) as [string, string, ...string[]]
-
-  if (gradient.length < 2) {
-    throw new Error('Gradient must have at least 2 colors')
-  }
+  })

  return (
    <LinearGradient colors={gradient} style={style}>
@@ -274,6 +274,11 @@ export function InlineLinkText({
    onOut: onHoverOut,
  } = useInteractionState()
  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
  const flattenedStyle = flatten(style) || {}

  return (
@@ -284,20 +289,19 @@ export function InlineLinkText({
      {...rest}
      style={[
        {color: t.palette.primary_500},
-        (hovered || focused) &&
+        (hovered || focused || pressed) &&
          !disableUnderline && {
-            ...web({
-              outline: 0,
-              textDecorationLine: 'underline',
-              textDecorationColor:
-                flattenedStyle.color ?? t.palette.primary_500,
-            }),
+            ...web({outline: 0}),
+            textDecorationLine: 'underline',
+            textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
          },
        flattenedStyle,
      ]}
      role="link"
      onPress={download ? undefined : onPress}
      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
      onFocus={onFocus}
      onBlur={onBlur}
      onMouseEnter={onHoverIn}
@@ -109,6 +109,38 @@ function ListFooterMaybeError({
  )
 }

+export function ListHeaderDesktop({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  const {gtTablet} = useBreakpoints()
+  const t = useTheme()
+
+  if (!gtTablet) return null
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.py_sm,
+        a.px_xl,
+        a.gap_xs,
+        a.justify_center,
+        {minHeight: 50},
+      ]}>
+      <Text style={[a.text_2xl, a.font_bold]}>{title}</Text>
+      {subtitle ? (
+        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+          {subtitle}
+        </Text>
+      ) : undefined}
+    </View>
+  )
+}
+
 let ListMaybePlaceholder = ({
  isLoading,
  noEmpty,
@@ -122,7 +154,7 @@ let ListMaybePlaceholder = ({
  onGoBack,
  hideBackButton,
  sideBorders,
-  topBorder = false,
+  topBorder = true,
 }: {
  isLoading: boolean
  noEmpty?: boolean
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dan Abramov	6e4646e1a9	Fix React Rules violations, enable strict lint	2024-11-17 20:40:51 +00:00
Dan Abramov	c2ee0ee910	Make React rules violation an error	2024-11-17 19:03:42 +00:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="m15.604 2.47-.642 1.112a5 5 0 0 1 2.05 4.034H7.005c0-1.658.809-3.123 2.05-4.034L8.41 2.47a.313.313 0 0 1 .542-.313l.627 1.086a5 5 0 0 1 2.428-.63c.882 0 1.709.23 2.428.63l.627-1.085a.31.31 0 0 1 .426-.115.31.31 0 0 1 .115.428ZM9.506 5.114a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0Zm3.753 0a.625.625 0 1 0 1.25 0 .625.625 0 0 0-1.25 0ZM3.878 8.866a1.251 1.251 0 0 1 2.501 0v5.004a1.252 1.252 0 0 1-2.501 0V8.866Zm13.759 0a1.251 1.251 0 0 1 2.501 0v5.004a1.251 1.251 0 0 1-2.501 0V8.866ZM7.005 17.622h1.25v3.128a1.251 1.251 0 0 0 2.502 0v-3.128h2.502v3.128a1.251 1.251 0 0 0 2.501 0v-3.128h1.25V8.241H7.006v9.381Z" clip-rule="evenodd"/></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm1 6a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l2.5 2.5a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/></svg>`