Cleanup

Angle
Add prop to show learn more
2024-12-09 12:57:18 -06:00 · 2024-12-09 10:27:40 -06:00 · 2024-12-09 10:26:36 -06:00 · 2024-12-09 10:23:04 -06:00 · 2024-12-09 10:18:35 -06:00 · 2024-12-09 10:04:31 -06:00
475 changed files with 82586 additions and 29323 deletions
@@ -1,10 +1,9 @@
-const reactCompilerConfig = require('./react-compiler.config.js')
-
 module.exports = {
  root: true,
  extends: [
-    '@react-native-community',
+    '@react-native',
    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
    'plugin:react-native-a11y/ios',
    'prettier',
  ],
@@ -18,9 +17,8 @@ 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',
@@ -81,7 +79,7 @@ module.exports = {
      },
    ],
    'simple-import-sort/exports': 'error',
-    'react-compiler/react-compiler': ['error', reactCompilerConfig],
+    'react-compiler/react-compiler': 'warn',
    'no-restricted-imports': [
      'error',
      {
@@ -64,6 +64,9 @@ jobs:
          echo "${{ secrets.ENV_TOKEN }}" > .env
          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
+          echo "EXPO_PUBLIC_RC_GOOGLE_PUBLIC_KEY=${{ secrets.EXPO_PUBLIC_RC_GOOGLE_PUBLIC_KEY }}" >> .env
+          echo "EXPO_PUBLIC_RC_APPLE_PUBLIC_KEY=${{ secrets.EXPO_PUBLIC_RC_APPLE_PUBLIC_KEY }}" >> .env
+          echo "EXPO_PUBLIC_BSKY_PURCHASES_API=${{ secrets.EXPO_PUBLIC_BSKY_PURCHASES_API }}" >> .env
          echo "$json" > google-services.json

      - name: 🏗️ EAS Build
@@ -76,6 +76,9 @@ jobs:
          echo "${{ secrets.ENV_TOKEN }}" > .env
          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
+          echo "EXPO_PUBLIC_RC_GOOGLE_PUBLIC_KEY=${{ secrets.EXPO_PUBLIC_RC_GOOGLE_PUBLIC_KEY }}" >> .env
+          echo "EXPO_PUBLIC_RC_APPLE_PUBLIC_KEY=${{ secrets.EXPO_PUBLIC_RC_APPLE_PUBLIC_KEY }}" >> .env
+          echo "EXPO_PUBLIC_BSKY_PURCHASES_API=${{ secrets.EXPO_PUBLIC_BSKY_PURCHASES_API }}" >> .env
          echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json

      - name: 🏗️ EAS Build
@@ -1,26 +1,6 @@
 const pkg = require('./package.json')

-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',
-}
+const DARK_SPLASH_ANDROID_BACKGROUND = '#0f141b'

 module.exports = function (config) {
  /**
@@ -71,10 +51,8 @@ module.exports = function (config) {
        policy: 'appVersion',
      },
      orientation: 'portrait',
-      icon: './assets/icon.png',
+      icon: './assets/app-icons/ios_icon_default_light.png',
      userInterfaceStyle: 'automatic',
-      splash: SPLASH_CONFIG,
-      // hsl(211, 99%, 53%), same as palette.default.brandText
      primaryColor: '#1083fe',
      ios: {
        supportsTablet: false,
@@ -92,12 +70,38 @@ 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,
@@ -134,10 +138,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_CONFIG_ANDROID.backgroundColor,
+        backgroundColor: DARK_SPLASH_ANDROID_BACKGROUND,
      },
      android: {
-        icon: './assets/icon.png',
+        icon: './assets/app-icons/android_icon_default_light.png',
        adaptiveIcon: {
          foregroundImage: './assets/icon-android-foreground.png',
          monochromeImage: './assets/icon-android-foreground.png',
@@ -163,10 +167,6 @@ module.exports = function (config) {
            category: ['BROWSABLE', 'DEFAULT'],
          },
        ],
-        splash: {
-          ...SPLASH_CONFIG_ANDROID,
-          dark: DARK_SPLASH_CONFIG_ANDROID,
-        },
      },
      web: {
        favicon: './assets/favicon.png',
@@ -206,10 +206,9 @@ module.exports = function (config) {
              newArchEnabled: false,
            },
            android: {
-              compileSdkVersion: 34,
-              targetSdkVersion: 34,
-              buildToolsVersion: '34.0.0',
-              kotlinVersion: '1.8.0',
+              compileSdkVersion: 35,
+              targetSdkVersion: 35,
+              buildToolsVersion: '35.0.0',
              newArchEnabled: false,
            },
          },
@@ -226,7 +225,6 @@ 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',
@@ -248,6 +246,100 @@ 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: {
@@ -0,0 +1 @@
+<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>
@@ -0,0 +1 @@
+<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>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 448 90"><path fill="#F0F2F5" fill-rule="evenodd" d="M49.5 40.389c-4.483-9.147-16.69-26.193-28.04-34.6C13.27-.277 0-4.971 0 9.964c0 2.983 1.733 25.057 2.75 28.641 3.534 12.46 16.41 15.637 27.866 13.714C10.593 55.68 5.5 66.817 16.5 77.953c20.891 21.15 30.026-5.307 32.367-12.086.43-1.242.63-1.824.633-1.33.003-.494.204.088.633 1.33 2.34 6.78 11.476 33.235 32.367 12.086 11-11.136 5.907-22.273-14.116-25.635 11.455 1.924 24.332-1.254 27.866-13.713C97.267 35.021 99 12.947 99 9.965 99-4.972 85.73-.278 77.54 5.788c-11.35 8.407-23.557 25.453-28.04 34.6Zm107.33.725c6.787 2.477 10.39 8.198 10.39 14.602 0 10.844-7.122 17.418-20.78 17.418h-27.901V12.34h26.98c12.987 0 19.271 6.746 19.271 15.711 0 5.977-2.681 10.332-7.96 13.064Zm-12.149-19.297H129.85V37.7h14.831c5.781 0 8.881-3.074 8.881-8.197 0-4.696-3.184-7.685-8.881-7.685ZM129.85 63.571h16.004c6.368 0 9.803-2.988 9.803-8.368q0-8.453-9.803-8.453H129.85v16.821Zm53.053 9.563h-10.557V12.34h10.557v60.795Zm35.005-44.059v24.677c0 7.258-4.525 11.1-9.636 11.1-5.446 0-8.127-2.818-8.127-8.368V29.075h-10.558v29.202c0 10.246 5.949 15.882 15.082 15.882q8.673 0 13.574-7.428v6.403h10.222V29.075h-10.557Zm58.611 22.798v2.562h-32.342c.754 7.6 4.86 11.356 11.228 11.356 4.859 0 8.127-2.134 9.887-6.318h10.138c-2.262 8.965-9.803 14.686-20.109 14.686-6.452 0-11.646-2.135-15.585-6.319s-5.948-9.734-5.948-16.735c0-6.917 1.927-12.467 5.865-16.736 3.938-4.184 9.049-6.319 15.5-6.319 6.536 0 11.731 2.22 15.585 6.575s5.781 10.161 5.781 17.248ZM255.07 36.418c-5.782 0-9.804 3.416-10.809 10.503h21.701c-.922-6.404-4.776-10.503-10.892-10.503Zm25.075 22.713c.586 10.161 7.205 15.199 19.773 15.199 12.15 0 19.188-4.953 19.188-13.833 0-7.514-4.525-11.442-14.998-13.405l-5.446-.854c-5.028-.94-7.206-2.306-7.206-5.38q0-5.123 7.541-5.123c5.781 0 8.881 1.879 9.133 7.258h9.97c-.419-9.99-6.787-14.943-19.103-14.943-11.479 0-17.931 5.038-17.931 13.32 0 7.259 4.692 11.699 14.16 13.321l4.944.854c6.451 1.11 8.462 2.647 8.462 5.806 0 3.5-2.849 5.294-8.546 5.294-6.368 0-9.049-2.05-9.636-7.514h-10.305Zm85.298 14.003h-12.066l-12.568-20.492-6.536 6.66v13.832h-10.389V12.34h10.389v35.009l17.596-18.273h23.801l3.519 11.015a419 419 0 0 1 6.871 24.591c1.843-7.002 4.189-15.199 6.954-24.506l3.519-11.1h11.06l-16.674 47.646c-1.759 4.867-3.938 8.367-6.703 10.331s-6.703 2.904-11.898 2.904c-1.759 0-3.267-.086-4.608-.257v-8.453h4.022c4.776 0 7.122-2.988 7.122-7.087 0-2.05-.67-5.038-2.011-8.88l-12.526-36.082-16.219 16.528 17.345 27.41ZM424.5 29h10v13.5H448v10h-13.5V66h-10V52.5H411v-10h13.5V29Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 330 78"><path fill="#F0F2F5" fill-rule="evenodd" d="M48.68 43.716c0-6.404-3.602-12.125-10.389-14.602 5.279-2.732 7.96-7.087 7.96-13.064C46.251 7.085 39.967.34 26.98.34H0v60.794h27.901c13.658 0 20.78-6.574 20.78-17.418ZM11.313 9.817h14.83c5.697 0 8.881 2.989 8.881 7.685 0 5.123-3.1 8.197-8.881 8.197h-14.83V9.817Zm16.003 41.754H11.312V34.75h16.003q9.803 0 9.803 8.453c0 5.38-3.435 8.368-9.803 8.368Zm26.492 9.564h10.557V.339H53.807v60.796ZM99.37 41.752V17.075h10.557v44.06H99.704V54.73q-4.901 7.428-13.574 7.428c-9.133 0-15.082-5.635-15.082-15.882V17.075h10.558v27.41c0 5.55 2.68 8.367 8.127 8.367 5.111 0 9.636-3.842 9.636-11.1Zm58.611.683v-2.562c0-7.087-1.927-12.893-5.781-17.248s-9.049-6.575-15.585-6.575c-6.451 0-11.562 2.135-15.5 6.319-3.938 4.27-5.865 9.82-5.865 16.736 0 7.001 2.01 12.552 5.948 16.736 3.938 4.183 9.133 6.318 15.585 6.318 10.306 0 17.847-5.72 20.109-14.686h-10.138c-1.76 4.184-5.027 6.318-9.887 6.318-6.368 0-10.474-3.757-11.228-11.356h32.342Zm-32.258-7.514c1.006-7.087 5.027-10.503 10.809-10.503 6.116 0 9.97 4.099 10.892 10.503h-21.701ZM181.38 62.33c-12.568 0-19.187-5.038-19.774-15.199h10.306c.587 5.465 3.268 7.514 9.636 7.514 5.698 0 8.546-1.793 8.546-5.294 0-3.16-2.01-4.696-8.462-5.806l-4.944-.854c-9.468-1.622-14.16-6.063-14.16-13.32 0-8.283 6.452-13.32 17.931-13.32 12.316 0 18.685 4.952 19.104 14.942h-9.972c-.251-5.38-3.351-7.258-9.132-7.258q-7.541 0-7.541 5.123c0 3.074 2.178 4.44 7.206 5.38l5.446.854c10.473 1.963 14.998 5.891 14.998 13.405 0 8.88-7.038 13.833-19.188 13.833Zm53.459-1.195h12.065l-17.343-27.41 16.218-16.528 12.526 36.082c1.341 3.842 2.011 6.83 2.011 8.88 0 4.099-2.346 7.087-7.122 7.087h-4.022V77.7c1.341.17 2.849.256 4.608.256 5.195 0 9.133-.94 11.898-2.904s4.944-5.464 6.703-10.331l16.674-47.646h-11.06l-3.519 11.1c-2.765 9.307-5.111 17.504-6.954 24.506a419 419 0 0 0-6.871-24.591l-3.519-11.015H233.33l-17.596 18.273V.339h-10.389v60.796h10.389V47.302l6.536-6.66 12.568 20.492ZM305.961 17h10v13.5h13.5v10h-13.5V54h-10V40.5h-13.5v-10h13.5V17Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<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>
@@ -0,0 +1 @@
+<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>
@@ -0,0 +1 @@
+<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>
@@ -0,0 +1 @@
+<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 1v4a1 1 0 0 1-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-7a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h2.681A4.3 4.3 0 0 1 6 4.667ZM10.333 7H11v-.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 7ZM13 6.333V7h.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.333ZM11 9H5v2h6V9Zm2 2V9h6v2h-6Zm-2 2H6v6h5v-6Zm2 6v-6h5v6h-5Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<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,5 +1,3 @@
-const reactCompilerConfig = require('./react-compiler.config.js')
-
 module.exports = function (api) {
  api.cache(true)
  const isTestEnv = process.env.NODE_ENV === 'test'
@@ -19,7 +17,7 @@ module.exports = function (api) {
    ],
    plugins: [
      'macros',
-      ['babel-plugin-react-compiler', reactCompilerConfig],
+      ['babel-plugin-react-compiler', {target: '18'}],
      [
        'module:react-native-dotenv',
        {
@@ -9,7 +9,6 @@ import {
  AppBskyGraphDefs,
  AppBskyGraphStarterpack,
  AppBskyLabelerDefs,
-  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -437,14 +436,14 @@ function StarterPackEmbed({

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

 function getStarterPackHref(
  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = new AtUri(starterPack.uri).rkey
+  const rkey = getRkey({uri: starterPack.uri})
  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
  return `/starter-pack/${handleOrDid}/${rkey}`
 }
@@ -4209,12 +4209,7 @@ 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:
-  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:
+zod@^3.21.4, 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,6 +257,7 @@ 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)
@@ -294,6 +295,9 @@ func serve(cctx *cli.Context) error {
 	e.GET("/starter-pack-short/:code", server.WebGeneric)
 	e.GET("/start/:handleOrDID/:rkey", server.WebStarterPack)

+	// subscription
+	e.GET("/subscriptions", server.WebGeneric)
+
 	// ipcc
 	e.GET("/ipcc", server.WebIpCC)

@@ -53,7 +53,8 @@ type OEmbedResponse struct {
 	Version      string `json:"version"`
 	AuthorName   string `json:"author_name,omitempty"`
 	AuthorURL    string `json:"author_url,omitempty"`
-	ProviderName string `json:"provider_url,omitempty"`
+	ProviderName string `json:"provider_name,omitempty"`
+	ProviderURL  string `json:"provider_url,omitempty"`
 	CacheAge     int    `json:"cache_age,omitempty"`
 	Width        *int   `json:"width"`
 	Height       *int   `json:"height"`
@@ -170,6 +171,7 @@ 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,13 +27,21 @@

  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: url.searchParams.get('videoId'),
+      videoId,
      playerVars: {
        autoplay: 1,
-        start: url.searchParams.get('start'),
+        start,
        rel: 0,
        loop: 0,
        playsinline: 1,
@@ -40,7 +40,6 @@
    }
    html {
      background-color: white;
-      scrollbar-gutter: stable both-edges;
    }
    @media (prefers-color-scheme: dark) {
      html {
@@ -76,9 +75,15 @@
      top: 50%;
      transform: translateX(-50%) translateY(-50%) translateY(-50px);
    }
-    /* We need this style to prevent web dropdowns from shifting the display when opening */
+    /**
+     * 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.
+     */
    body {
      width: 100%;
+      overflow-y: scroll;
    }
  </style>

@@ -18,9 +18,6 @@ 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: '',
 }))
@@ -51,7 +48,9 @@ jest.mock('expo-image-manipulator', () => ({
  manipulateAsync: jest.fn().mockResolvedValue({
    uri: 'file://resized-image',
  }),
-  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
+  SaveFormat: {
+    JPEG: 'jpeg',
+  },
 }))

 jest.mock('expo-camera', () => ({
@@ -2,6 +2,8 @@
 module.exports = {
  locales: [
    'en',
+    'an',
+    'ast',
    'ca',
    'de',
    'en-GB',
@@ -9,17 +11,21 @@ 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,6 +9,11 @@ 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.
@@ -29,6 +34,15 @@ 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.13.2"
+    def GLIDE_VERSION = "4.16.0"

  implementation project(':expo-modules-core')
  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
@@ -5,6 +5,7 @@ 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
@@ -15,8 +16,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()
@@ -81,66 +82,65 @@ 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: com.bumptech.glide.load.DataSource?,
-              isFirstResource: Boolean,
-            ): Boolean {
-              if (placeholderRequest != null) {
-                glide.clear(placeholderRequest)
-              }
-              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: DataSource,
+                                      isFirstResource: Boolean
+                              ): Boolean {
+                                placeholderRequest?.let { glide.clear(it) }
+                                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: 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
-              }
+              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
+                                }

-              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.94.0",
+  "version": "1.96.0",
  "private": true,
  "engines": {
    "node": ">=20"
@@ -11,6 +11,8 @@
    "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",
@@ -23,7 +25,6 @@
    "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",
@@ -53,7 +54,7 @@
    "icons:optimize": "svgo -f ./assets/icons"
  },
  "dependencies": {
-    "@atproto/api": "^0.13.11",
+    "@atproto/api": "^0.13.18",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -70,17 +71,17 @@
    "@fortawesome/react-native-fontawesome": "^0.3.2",
    "@haileyok/bluesky-video": "0.2.4",
    "@ipld/dag-cbor": "^9.2.0",
-    "@lingui/react": "^4.5.0",
+    "@lingui/react": "^4.14.1",
    "@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-masked-view/masked-view": "0.3.0",
-    "@react-native-menu/menu": "^1.1.0",
-    "@react-native-picker/picker": "2.6.1",
+    "@react-native-menu/menu": "^1.1.7",
+    "@react-native-picker/picker": "2.10.2",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.1.17",
@@ -89,18 +90,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.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",
+    "@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",
    "@types/invariant": "^2.2.37",
    "@types/lodash.throttle": "^4.1.9",
    "@types/node": "^20.14.3",
@@ -117,33 +118,35 @@
    "emoji-mart": "^5.5.2",
    "emoji-regex": "^10.4.0",
    "eventemitter3": "^5.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",
+    "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",
    "fast-text-encoding": "^1.0.6",
+    "gretchen": "^1.5.1",
    "history": "^5.3.0",
    "hls.js": "^1.5.11",
    "js-sha256": "^0.9.0",
@@ -152,11 +155,6 @@
    "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",
@@ -166,36 +164,38 @@
    "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.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": "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-get-random-values": "~1.11.0",
-    "react-native-image-crop-picker": "0.41.2",
+    "react-native-image-crop-picker": "^0.41.6",
    "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.14.0",
+    "react-native-keyboard-controller": "^1.14.5",
    "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.2.3",
-    "react-native-picker-select": "^9.1.3",
+    "react-native-pager-view": "6.6.1",
+    "react-native-picker-select": "^9.3.1",
    "react-native-progress": "bluesky-social/react-native-progress",
-    "react-native-qrcode-styled": "^0.3.1",
-    "react-native-reanimated": "^3.16.1",
+    "react-native-purchases": "^8.4.0",
+    "react-native-qrcode-styled": "^0.3.3",
+    "react-native-reanimated": "^3.16.3",
    "react-native-root-siblings": "^4.1.1",
-    "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-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-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.2",
-    "react-native-view-shot": "^3.8.0",
-    "react-native-web": "~0.19.11",
+    "react-native-view-shot": "^4.0.3",
+    "react-native-web": "~0.19.13",
    "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "13.10.2",
+    "react-native-webview": "13.12.3",
+    "react-remove-scroll-bar": "^2.3.6",
    "react-responsive": "^9.0.2",
    "react-textarea-autosize": "^8.5.3",
    "rn-fetch-blob": "^0.12.0",
@@ -207,83 +207,70 @@
    "zod": "^3.20.2"
  },
  "devDependencies": {
-    "@atproto/dev-env": "^0.3.55",
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.20.0",
-    "@babel/runtime": "^7.20.0",
+    "@atproto/dev-env": "^0.3.64",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/runtime": "^7.26.0",
    "@did-plc/server": "^0.0.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",
+    "@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",
    "@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.2.18",
+    "@types/react-dom": "^18.3.1",
    "@types/react-responsive": "^8.0.5",
    "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.2",
    "babel-plugin-macros": "^3.1.0",
-    "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",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
+    "babel-preset-expo": "^12.0.2",
    "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": "^50.0.1",
-    "jest-junit": "^15.0.0",
+    "jest-expo": "^52.0.2",
+    "jest-junit": "^16.0.0",
    "lint-staged": "^13.2.3",
-    "metro-react-native-babel-preset": "^0.74.1",
+    "metro-react-native-babel-preset": "^0.76.9",
    "prettier": "^2.8.3",
-    "react-native-dotenv": "^3.3.1",
+    "react-native-dotenv": "^3.4.11",
    "react-refresh": "^0.14.0",
    "react-test-renderer": "18.2.0",
    "svgo": "^3.3.2",
    "ts-node": "^10.9.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"
+    "typescript": "^5.7.2",
+    "webpack-bundle-analyzer": "^4.10.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",
-    "@react-native/babel-preset": "0.74.1",
-    "@radix-ui/react-focus-scope": "1.1.0"
+    "**/zod": "3.23.8"
  },
  "jest": {
    "preset": "jest-expo/ios",
@@ -1,18 +0,0 @@
-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)
@@ -1,5 +0,0 @@
-## 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.
@@ -1,26 +0,0 @@
-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() {
@@ -1,216 +0,0 @@
-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<*, *>)
@@ -0,0 +1,169 @@
+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) {
@@ -1,44 +0,0 @@
-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),
@@ -1,50 +0,0 @@
-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();
-   }
- 
@@ -1,41 +0,0 @@
-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);
@@ -1,283 +0,0 @@
-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);
@@ -0,0 +1,331 @@
+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];
+   }
+ }
+ 
@@ -12,9 +12,6 @@ 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

-## 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.
+Includes https://github.com/facebook/react-native/pull/47591 early. Delete when it's in a release.
@@ -0,0 +1,57 @@
+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();
+   }
+ 
@@ -1,20 +0,0 @@
-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
-  })
-}
@@ -1,9 +0,0 @@
-'use strict'
-
-module.exports = {
-  target: '18',
-  environment: {
-    enableTreatRefLikeIdentifiersAsRefs: true,
-    validateRefAccessDuringRender: false, // TODO: Make it `true`.
-  },
-}
@@ -4,16 +4,18 @@ import '#/view/icons'

 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {KeyboardProvider} from 'react-native-keyboard-controller'
+import Purchases from 'react-native-purchases'
 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,
@@ -24,6 +26,7 @@ import {s} from '#/lib/styles'
 import {ThemeProvider} from '#/lib/ThemeContext'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
+import {isAndroid,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'
@@ -41,6 +44,7 @@ import {init as initPersistedState} from '#/state/persisted'
 import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
+import {Provider as PurchasesProvider} from '#/state/purchases'
 import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
  Provider as SessionProvider,
@@ -66,11 +70,16 @@ 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 {RC_APPLE_PUBLIC_KEY, RC_GOOGLE_PUBLIC_KEY} from '#/env'
 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
@@ -125,37 +134,39 @@ function InnerApp() {
                // 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>
-                                        <ProgressGuideProvider>
-                                          <GestureHandlerRootView
-                                            style={s.h100pct}>
-                                            <TestCtrls />
-                                            <Shell />
-                                            <NuxDialogs />
-                                          </GestureHandlerRootView>
-                                        </ProgressGuideProvider>
-                                      </MutedThreadsProvider>
-                                    </BackgroundNotificationPreferencesProvider>
-                                  </UnreadNotifsProvider>
-                                </HiddenRepliesProvider>
-                              </SelectedFeedProvider>
-                            </LoggedOutViewProvider>
-                          </ModerationOptsProvider>
-                        </LabelDefsProvider>
-                      </MessagesProvider>
-                    </StatsigProvider>
-                  </ComposerProvider>
+                  <PurchasesProvider>
+                    <ComposerProvider>
+                      <StatsigProvider>
+                        <MessagesProvider>
+                          {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                          <LabelDefsProvider>
+                            <ModerationOptsProvider>
+                              <LoggedOutViewProvider>
+                                <SelectedFeedProvider>
+                                  <HiddenRepliesProvider>
+                                    <UnreadNotifsProvider>
+                                      <BackgroundNotificationPreferencesProvider>
+                                        <MutedThreadsProvider>
+                                          <ProgressGuideProvider>
+                                            <GestureHandlerRootView
+                                              style={s.h100pct}>
+                                              <TestCtrls />
+                                              <Shell />
+                                              <NuxDialogs />
+                                            </GestureHandlerRootView>
+                                          </ProgressGuideProvider>
+                                        </MutedThreadsProvider>
+                                      </BackgroundNotificationPreferencesProvider>
+                                    </UnreadNotifsProvider>
+                                  </HiddenRepliesProvider>
+                                </SelectedFeedProvider>
+                              </LoggedOutViewProvider>
+                            </ModerationOptsProvider>
+                          </LabelDefsProvider>
+                        </MessagesProvider>
+                      </StatsigProvider>
+                    </ComposerProvider>
+                  </PurchasesProvider>
                </QueryProvider>
              </React.Fragment>
            </VideoVolumeProvider>
@@ -170,9 +181,19 @@ function App() {
  const [isReady, setReady] = useState(false)

  React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
+    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(
+      () => {
+        setReady(true)
+      },
    )
+
+    Purchases.setLogLevel(Purchases.LOG_LEVEL.DEBUG)
+
+    if (isIOS) {
+      Purchases.configure({apiKey: RC_APPLE_PUBLIC_KEY})
+    } else if (isAndroid) {
+      Purchases.configure({apiKey: RC_GOOGLE_PUBLIC_KEY})
+    }
  }, [])

  if (!isReady) {
@@ -184,40 +205,42 @@ function App() {
   * that is set up in the InnerApp component above.
   */
  return (
-    <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>
+    <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>
  )
 }

@@ -3,7 +3,6 @@ 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'
@@ -31,6 +30,7 @@ import {init as initPersistedState} from '#/state/persisted'
 import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
+import {Provider as PurchasesProvider} from '#/state/purchases'
 import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
  Provider as SessionProvider,
@@ -102,16 +102,16 @@ function InnerApp() {
  if (!isReady || !hasCheckedReferrer) return null

  return (
-    <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}>
+    <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}>
+                  <PurchasesProvider>
                    <ComposerProvider>
                      <StatsigProvider>
                        <MessagesProvider>
@@ -141,15 +141,15 @@ function InnerApp() {
                        </MessagesProvider>
                      </StatsigProvider>
                    </ComposerProvider>
-                  </QueryProvider>
-                  <ToastContainer />
-                </React.Fragment>
-              </ActiveVideoProvider>
-            </VideoVolumeProvider>
-          </RootSiblingParent>
-        </ThemeProvider>
-      </Alf>
-    </KeyboardProvider>
+                  </PurchasesProvider>
+                </QueryProvider>
+                <ToastContainer />
+              </React.Fragment>
+            </ActiveVideoProvider>
+          </VideoVolumeProvider>
+        </RootSiblingParent>
+      </ThemeProvider>
+    </Alf>
  )
 }

@@ -0,0 +1,29 @@
+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 {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
@@ -79,12 +79,14 @@ 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,
  StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
+import {Subscriptions} from '#/screens/Subscriptions'
 import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
@@ -362,6 +364,14 @@ 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}
@@ -407,6 +417,11 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
        getComponent={() => Wizard}
        options={{title: title(msg`Edit your starter pack`), requireAuth: true}}
      />
+      <Stack.Screen
+        name="Subscriptions"
+        getComponent={() => Subscriptions}
+        options={{title: title(msg`Subscriptions`), requireAuth: true}}
+      />
    </>
  )
 }
@@ -453,7 +468,6 @@ function HomeTabNavigator() {
  return (
    <HomeTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -472,7 +486,6 @@ function SearchTabNavigator() {
  return (
    <SearchTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -490,7 +503,6 @@ function NotificationsTabNavigator() {
  return (
    <NotificationsTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -512,7 +524,6 @@ function MyProfileTabNavigator() {
  return (
    <MyProfileTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -538,7 +549,6 @@ function MessagesTabNavigator() {
  return (
    <MessagesTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -572,7 +582,6 @@ const FlatNavigator = () => {
    <Flat.Navigator
      screenListeners={screenListeners}
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -0,0 +1,17 @@
+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,9 +18,7 @@ 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'
@@ -53,9 +51,8 @@ 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)
@@ -151,8 +148,6 @@ 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,
@@ -220,66 +215,31 @@ export function Splash(props: React.PropsWithChildren<Props>) {
        </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>
+      {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
-                  },
-                ]}>
-                <AnimatedLogo
-                  fill={logoBg}
-                  style={[{opacity: 0}, logoAnimations]}
-                />
+          {!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>
-            )}
-          </>
-        ) : (
-          <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,7 +1,8 @@
 import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'

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

 export const atoms = {
  debug: {
@@ -21,6 +22,9 @@ export const atoms = {
  relative: {
    position: 'relative',
  },
+  sticky: web({
+    position: 'sticky',
+  }),
  inset_0: {
    top: 0,
    left: 0,
@@ -64,6 +68,7 @@ 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',
@@ -312,6 +317,12 @@ export const atoms = {
  border_r: {
    borderRightWidth: StyleSheet.hairlineWidth,
  },
+  curve_circular: ios({
+    borderCurve: 'circular',
+  }),
+  curve_continuous: ios({
+    borderCurve: 'continuous',
+  }),

  /*
   * Shadow
@@ -935,4 +946,20 @@ 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
@@ -0,0 +1,28 @@
+import {useMemo} from 'react'
+import {useMediaQuery} from 'react-responsive'
+
+export type Breakpoint = 'gtPhone' | 'gtMobile' | 'gtTablet'
+
+export function useBreakpoints(): Record<Breakpoint, boolean> & {
+  activeBreakpoint: Breakpoint | undefined
+} {
+  const gtPhone = useMediaQuery({minWidth: 500})
+  const gtMobile = useMediaQuery({minWidth: 800})
+  const gtTablet = useMediaQuery({minWidth: 1300})
+  return useMemo(() => {
+    let active: Breakpoint | undefined
+    if (gtTablet) {
+      active = 'gtTablet'
+    } else if (gtMobile) {
+      active = 'gtMobile'
+    } else if (gtPhone) {
+      active = 'gtPhone'
+    }
+    return {
+      activeBreakpoint: active,
+      gtPhone,
+      gtMobile,
+      gtTablet,
+    }
+  }, [gtPhone, gtMobile, gtTablet])
+}
@@ -1,5 +1,4 @@
 import React from 'react'
-import {useMediaQuery} from 'react-responsive'

 import {
  computeFontScaleMultiplier,
@@ -14,12 +13,14 @@ import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 import {Device} from '#/storage'

 export {atoms} from '#/alf/atoms'
+export * from '#/alf/breakpoints'
 export * from '#/alf/fonts'
 export * as tokens from '#/alf/tokens'
 export * from '#/alf/types'
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
+export * from '#/alf/util/useGutters'

 export type Alf = {
  themeName: ThemeName
@@ -141,14 +142,3 @@ export function useTheme(theme?: ThemeName) {
    return theme ? alf.themes[theme] : alf.theme
  }, [theme, alf])
 }
-
-export function useBreakpoints() {
-  const gtPhone = useMediaQuery({minWidth: 500})
-  const gtMobile = useMediaQuery({minWidth: 800})
-  const gtTablet = useMediaQuery({minWidth: 1300})
-  return {
-    gtPhone,
-    gtMobile,
-    gtTablet,
-  }
-}
@@ -108,6 +108,7 @@ export const gradients = {
  nordic: {
    values: [
      [0, '#083367'],
+      // [0.4, '#386D84'],
      [1, '#9EE8C1'],
    ],
    hover_value: '#3A7085',
@@ -122,3 +123,9 @@ export const gradients = {
    hover_value: '#755B62',
  },
 } as const
+
+export const blueskyPlus = {
+  dark: '#083367',
+  mid: '#67A59F',
+  light: '#9EE8C1',
+}
@@ -0,0 +1,126 @@
+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)
+}
@@ -0,0 +1,18 @@
+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')
+    }
+  }
+}
@@ -0,0 +1,94 @@
+import React from 'react'
+
+import {
+  atoms as a,
+  Breakpoint,
+  tokens,
+  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])
+}
+
+type Gutter = 'compact' | 'base' | 'wide' | 0
+
+const gutters: Record<
+  Exclude<Gutter, 0>,
+  Record<Breakpoint | 'default', number>
+> = {
+  compact: {
+    default: tokens.space.sm,
+    gtPhone: tokens.space.sm,
+    gtMobile: tokens.space.md,
+    gtTablet: tokens.space.md,
+  },
+  base: {
+    default: tokens.space.lg,
+    gtPhone: tokens.space.lg,
+    gtMobile: tokens.space.xl,
+    gtTablet: tokens.space.xl,
+  },
+  wide: {
+    default: tokens.space.xl,
+    gtPhone: tokens.space.xl,
+    gtMobile: tokens.space._3xl,
+    gtTablet: tokens.space._3xl,
+  },
+}
+
+type Gutters = {
+  paddingTop?: number
+  paddingRight?: number
+  paddingBottom?: number
+  paddingLeft?: number
+}
+
+export function useGutters([all]: [Gutter]): Gutters
+export function useGutters([vertical, horizontal]: [Gutter, Gutter]): Gutters
+export function useGutters([top, right, bottom, left]: [
+  Gutter,
+  Gutter,
+  Gutter,
+  Gutter,
+]): Gutters
+export function useGutters([top, right, bottom, left]: Gutter[]) {
+  const {activeBreakpoint} = useBreakpoints()
+  return React.useMemo(() => {
+    if (!right) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      right = bottom = left = top
+    } else if (!bottom || !left) {
+      bottom = top
+      left = right
+    }
+
+    return {
+      paddingTop:
+        top === 0 ? undefined : gutters[top][activeBreakpoint || 'default'],
+      paddingRight:
+        right === 0 ? undefined : gutters[right][activeBreakpoint || 'default'],
+      paddingBottom:
+        bottom === 0
+          ? undefined
+          : gutters[bottom][activeBreakpoint || 'default'],
+      paddingLeft:
+        left === 0 ? undefined : gutters[left][activeBreakpoint || 'default'],
+    }
+  }, [activeBreakpoint, top, bottom, left, right])
+}
@@ -0,0 +1,87 @@
+import React from 'react'
+
+import {atoms as a} from '#/alf/atoms'
+import {Breakpoint, useBreakpoints} from '#/alf/breakpoints'
+import * as tokens from '#/alf/tokens'
+
+type Gutter = 'compact' | 'base' | 'wide' | 0
+
+const gutters: Record<
+  Exclude<Gutter, 0>,
+  Record<Breakpoint | 'default', number>
+> = {
+  compact: {
+    default: tokens.space.sm,
+    gtPhone: tokens.space.sm,
+    gtMobile: tokens.space.md,
+    gtTablet: tokens.space.md,
+  },
+  base: {
+    default: tokens.space.lg,
+    gtPhone: tokens.space.lg,
+    gtMobile: tokens.space.xl,
+    gtTablet: tokens.space.xl,
+  },
+  wide: {
+    default: tokens.space.xl,
+    gtPhone: tokens.space.xl,
+    gtMobile: tokens.space._3xl,
+    gtTablet: tokens.space._3xl,
+  },
+}
+
+type Gutters = {
+  paddingTop: number
+  paddingRight: number
+  paddingBottom: number
+  paddingLeft: number
+}
+
+export function useGutters([all]: [Gutter]): Gutters
+export function useGutters([vertical, horizontal]: [Gutter, Gutter]): Gutters
+export function useGutters([top, right, bottom, left]: [
+  Gutter,
+  Gutter,
+  Gutter,
+  Gutter,
+]): Gutters
+export function useGutters([top, right, bottom, left]: Gutter[]) {
+  const {activeBreakpoint} = useBreakpoints()
+  return React.useMemo(() => {
+    if (!right) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      right = bottom = left = top
+    } else if (!bottom || !left) {
+      bottom = top
+      left = right
+    }
+
+    return {
+      paddingTop: top === 0 ? 0 : gutters[top][activeBreakpoint || 'default'],
+      paddingRight:
+        right === 0 ? 0 : gutters[right][activeBreakpoint || 'default'],
+      paddingBottom:
+        bottom === 0 ? 0 : gutters[bottom][activeBreakpoint || 'default'],
+      paddingLeft:
+        left === 0 ? 0 : gutters[left][activeBreakpoint || 'default'],
+    }
+  }, [activeBreakpoint, top, bottom, left, right])
+}
+
+export function useGutterStyles({
+  top,
+  bottom,
+}: {
+  top?: boolean
+  bottom?: boolean
+} = {}) {
+  const {gtMobile} = useBreakpoints()
+  return React.useMemo<any>(() => {
+    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,6 +34,7 @@ export function AppLanguageDropdown(_props: ViewStyleProp) {
  return (
    <View style={a.relative}>
      <RNPickerSelect
+        darkTheme={t.scheme === 'dark'}
        placeholder={{}}
        value={sanitizedLang}
        onValueChange={onChangeAppLanguage}
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {moderateProfile} from '@atproto/api'

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

-    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']
+    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']

-        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))
+      if (variant === 'gradient') {
+        if (gradient.values.length < 2) {
+          throw new Error(
+            'Gradient buttons must have at least two colors in the gradient',
+          )
        }

        return {
-          gradientColors: colors,
-          gradientHoverColors: hoverColors,
-          gradientLocations: locations,
+          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[],
+          ],
        }
-      }, [variant, color])
+      }
+    }, [variant, color])

    const context = React.useMemo<ButtonContext>(
      () => ({
@@ -479,7 +489,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
        onHoverOut={onHoverOut}
        onFocus={onFocus}
        onBlur={onBlur}>
-        {variant === 'gradient' && (
+        {variant === 'gradient' && gradientValues && (
          <View
            style={[
              a.absolute,
@@ -490,10 +500,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
            <LinearGradient
              colors={
                state.hovered || state.pressed
-                  ? gradientHoverColors
-                  : gradientColors
+                  ? gradientValues.hoverColors
+                  : gradientValues.colors
              }
-              locations={gradientLocations}
+              locations={gradientValues.locations}
              start={{x: 0, y: 0}}
              end={{x: 1, y: 1}}
              style={[a.absolute, a.inset_0]}
@@ -655,10 +665,12 @@ export function ButtonIcon({
  icon: Comp,
  position,
  size,
+  style,
 }: {
  icon: React.ComponentType<SVGIconProps>
  position?: 'left' | 'right'
  size?: SVGIconProps['size']
+  style?: SVGIconProps['style']
 }) {
  const {size: buttonSize, disabled} = useButtonContext()
  const textStyles = useSharedButtonTextStyles()
@@ -743,6 +755,7 @@ export function ButtonIcon({
              color: textStyles.color,
              pointerEvents: 'none',
            },
+            style,
          ]}
        />
      </View>
@@ -29,10 +29,10 @@ export function useDialogControl(): DialogOuterProps['control'] {
  const {activeDialogs} = useDialogStateContext()

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

@@ -11,7 +11,6 @@ import {
 } from 'react-native'
 import {
  KeyboardAwareScrollView,
-  useKeyboardController,
  useKeyboardHandler,
 } from 'react-native-keyboard-controller'
 import {runOnJS} from 'react-native-reanimated'
@@ -20,13 +19,14 @@ 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'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useGutters,useTheme} from '#/alf'
 import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
  DialogControlProps,
@@ -75,7 +75,7 @@ export function Outer({
      try {
        cb()
      } catch (e: any) {
-        logger.error('Error running close callback', e)
+        logger.error(e || 'Error running close callback')
      }
    }

@@ -197,29 +197,23 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
    {children, style, contentContainerStyle, header, ...props},
    ref,
  ) {
+    const gutters = useGutters(['wide'])
    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
    const insets = useSafeAreaInsets()
-    const {setEnabled} = useKeyboardController()
+
+    useEnableKeyboardController(isIOS)

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

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

    const basePading =
      (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
@@ -245,8 +239,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
      <KeyboardAwareScrollView
        style={[style]}
        contentContainerStyle={[
-          a.pt_2xl,
-          a.px_xl,
+          gutters,
          {paddingBottom},
          contentContainerStyle,
        ]}
@@ -7,16 +7,23 @@ 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'
-import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {
+  atoms as a,
+  flatten,
+  useBreakpoints,
+  useGutters,
+  useTheme,
+  web,
+} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -42,7 +49,6 @@ export function Outer({
  onClose,
 }: React.PropsWithChildren<DialogOuterProps>) {
  const {_} = useLingui()
-  const t = useTheme()
  const {gtMobile} = useBreakpoints()
  const [isOpen, setIsOpen] = React.useState(false)
  const {setDialogIsOpen} = useDialogStateControlContext()
@@ -105,6 +111,7 @@ export function Outer({
      {isOpen && (
        <Portal>
          <Context.Provider value={context}>
+            <RemoveScrollBar />
            <TouchableWithoutFeedback
              accessibilityHint={undefined}
              accessibilityLabel={_(msg`Close active dialog`)}
@@ -118,16 +125,7 @@ export function Outer({
                  gtMobile ? a.p_lg : a.p_md,
                  {overflowY: 'auto'},
                ]}>
-                <Animated.View
-                  entering={FadeIn.duration(150)}
-                  // exiting={FadeOut.duration(150)}
-                  style={[
-                    web(a.fixed),
-                    a.inset_0,
-                    {opacity: 0.8, backgroundColor: t.palette.black},
-                  ]}
-                />
-
+                <Backdrop />
                <View
                  style={[
                    a.w_full,
@@ -159,12 +157,12 @@ export function Inner({
  contentContainerStyle,
 }: DialogInnerProps) {
  const t = useTheme()
+  const gutters = useGutters(['wide'])
  const {close} = React.useContext(Context)
-  const {gtMobile} = useBreakpoints()
  useFocusGuards()
  return (
    <FocusScope loop asChild trapped>
-      <Animated.View
+      <View
        role="dialog"
        aria-role="dialog"
        aria-label={label}
@@ -174,8 +172,6 @@ export function Inner({
        onClick={stopPropagation}
        onStartShouldSetResponder={_ => true}
        onTouchEnd={stopPropagation}
-        entering={FadeInDown.duration(100)}
-        // exiting={FadeOut.duration(100)}
        style={flatten([
          a.relative,
          a.rounded_md,
@@ -188,6 +184,8 @@ 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),
        ])}>
@@ -197,11 +195,9 @@ export function Inner({
          onDismiss={close}
          style={{display: 'flex', flexDirection: 'column'}}>
          {header}
-          <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
-            {children}
-          </View>
+          <View style={[gutters, contentContainerStyle]}>{children}</View>
        </DismissableLayer>
-      </Animated.View>
+      </View>
    </FocusScope>
  )
 }
@@ -268,3 +264,25 @@ 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, web} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'

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

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

-import {atoms as a, tokens} from '#/alf'
+import {atoms as a, tokens, ViewStyleProp} from '#/alf'

 export function GradientFill({
  gradient,
-}: {
+  rotate = '0deg',
+  style,
+}: ViewStyleProp & {
  gradient:
+    | typeof tokens.gradients.primary
    | typeof tokens.gradients.sky
    | typeof tokens.gradients.midnight
    | typeof tokens.gradients.sunrise
@@ -14,14 +17,66 @@ export function GradientFill({
    | typeof tokens.gradients.bonfire
    | typeof tokens.gradients.summer
    | typeof tokens.gradients.nordic
+  rotate?:
+    | '0deg'
+    | '45deg'
+    | '90deg'
+    | '135deg'
+    | '180deg'
+    | '225deg'
+    | '270deg'
+    | '315deg'
 }) {
+  if (gradient.values.length < 2) {
+    throw new Error('Gradient must have at least 2 colors')
+  }
+
+  const {start, end} = useMemo(() => {
+    return {
+      '0deg': {
+        start: {x: 0, y: 1},
+        end: {x: 1, y: 1},
+      },
+      '45deg': {
+        start: {x: 0, y: 0},
+        end: {x: 1, y: 1},
+      },
+      '90deg': {
+        start: {x: 1, y: 0},
+        end: {x: 1, y: 1},
+      },
+      '135deg': {
+        start: {x: 1, y: 0},
+        end: {x: 0, y: 1},
+      },
+      '180deg': {
+        start: {x: 1, y: 0},
+        end: {x: 0, y: 0},
+      },
+      '225deg': {
+        start: {x: 1, y: 1},
+        end: {x: 0, y: 0},
+      },
+      '270deg': {
+        start: {x: 0, y: 1},
+        end: {x: 0, y: 0},
+      },
+      '315deg': {
+        start: {x: 0, y: 1},
+        end: {x: 1, y: 0},
+      },
+    }[rotate]
+  }, [rotate])
+
  return (
    <LinearGradient
-      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]}
+      colors={gradient.values.map(c => c[1]) as [string, string, ...string[]]}
+      locations={
+        gradient.values.map(c => c[0]) as [number, number, ...number[]]
+      }
+      start={start}
+      end={end}
+      style={[a.absolute, a.inset_0, style]}
    />
  )
 }
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {
@@ -1,100 +0,0 @@
-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}
@@ -0,0 +1,199 @@
+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>
+  )
+}
@@ -0,0 +1,172 @@
+# 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.
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<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>
				`@@ -0,0 +1 @@`
				`<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>`