replace radix imports

metro.config.js

@@ -11,6 +11,9 @@ if (cfg.resolver.resolveRequest) {
   throw Error('Update this override because it is conflicting now.')
 }
 
+// Enforce "no RNGH on web"
+cfg.resolver.blockList = [/react-native-gesture-handler\/.*/]
+
 if (process.env.BSKY_PROFILE) {
   cfg.cacheVersion += ':PROFILE'
 }

package.json

@@ -47,7 +47,7 @@
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
     "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js",
+    "build-web": "expo export --platform web && node ./scripts/post-web-build.js",
     "build-all": "pnpm intl:build && pnpm use-build-number-with-bump eas build --platform all",
     "build-ios": "pnpm use-build-number-with-bump eas build -p ios",
     "build-android": "pnpm use-build-number-with-bump eas build -p android",

public/index.html

@@ -16,7 +16,8 @@
     -->
     <link rel="preconnect" href="https://bsky.social">
     <link rel="preconnect" href="https://go.bsky.app">
-    <title>%WEB_TITLE%</title>
+    <!-- let js set by leaving empty -->
+    <title></title>
 
     <link rel="preload" as="font" type="font/woff2" href="/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
     <link rel="stylesheet" href="/static/style.css">

src/components/Dialog/index.web.tsx

@@ -18,7 +18,9 @@ import {
 } from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
-import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
+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'
@@ -176,9 +178,9 @@ export function Inner({
   const {close} = useContext(Context)
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
-  FocusGuards.useFocusGuards()
+  useFocusGuards()
   return (
-    <FocusScope.FocusScope loop asChild trapped>
+    <FocusScope loop asChild trapped>
       <View
         role="dialog"
         aria-role="dialog"
@@ -207,7 +209,7 @@ export function Inner({
           !reduceMotionEnabled && a.zoom_fade_in,
           style,
         ])}>
-        <DismissableLayer.DismissableLayer
+        <DismissableLayer
           onInteractOutside={preventDefault}
           onFocusOutside={preventDefault}
           onDismiss={close}
@@ -216,9 +218,9 @@ export function Inner({
           <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
             {children}
           </View>
-        </DismissableLayer.DismissableLayer>
+        </DismissableLayer>
       </View>
-    </FocusScope.FocusScope>
+    </FocusScope>
   )
 }
 

src/components/FocusScope/index.web.tsx

@@ -1,4 +1,4 @@
-import {FocusScope as RadixFocusScope} from 'radix-ui/internal'
+import {FocusScope as RadixFocusScope} from '@radix-ui/react-focus-scope'
 
 /*
  * The web version of the FocusScope component is a proper implementation, we
@@ -7,8 +7,8 @@ import {FocusScope as RadixFocusScope} from 'radix-ui/internal'
  */
 export function FocusScope({children}: {children: React.ReactNode}) {
   return (
-    <RadixFocusScope.FocusScope loop asChild trapped>
+    <RadixFocusScope loop asChild trapped>
       {children}
-    </RadixFocusScope.FocusScope>
+    </RadixFocusScope>
   )
 }

src/components/Lightbox/Lightbox.web.tsx

@@ -2,7 +2,8 @@ import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {Image} from 'expo-image'
 import {Trans, useLingui} from '@lingui/react/macro'
-import {FocusGuards, FocusScope} from 'radix-ui/internal'
+import {useFocusGuards} from '@radix-ui/react-focus-guards'
+import {FocusScope} from '@radix-ui/react-focus-scope'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {saveImageToMediaLibrary} from '#/lib/media/manip'
@@ -66,7 +67,7 @@ function LightboxContainer({
   handleBackgroundPress: () => void
 }) {
   const {t: l} = useLingui()
-  FocusGuards.useFocusGuards()
+  useFocusGuards()
   return (
     <Pressable
       accessibilityHint={undefined}
@@ -75,7 +76,7 @@ function LightboxContainer({
       style={[a.fixed, a.inset_0, a.z_10]}>
       <Backdrop />
       <RemoveScrollBar />
-      <FocusScope.FocusScope loop trapped asChild>
+      <FocusScope loop trapped asChild>
         <div
           role="dialog"
           aria-modal="true"
@@ -83,7 +84,7 @@ function LightboxContainer({
           style={{position: 'absolute', inset: 0}}>
           {children}
         </div>
-      </FocusScope.FocusScope>
+      </FocusScope>
     </Pressable>
   )
 }

src/components/WelcomeModal.tsx

@@ -4,7 +4,8 @@ import {ImageBackground} from 'expo-image'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'
-import {FocusGuards, FocusScope} from 'radix-ui/internal'
+import {useFocusGuards} from '@radix-ui/react-focus-guards'
+import {FocusScope} from '@radix-ui/react-focus-scope'
 
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {Logo} from '#/view/icons/Logo'
@@ -64,7 +65,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
     requestSwitchToAccount({requestedAccount: 'existing'})
   }
 
-  FocusGuards.useFocusGuards()
+  useFocusGuards()
 
   return (
     <View
@@ -79,7 +80,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
         web({backdropFilter: 'blur(15px)'}),
         isExiting ? a.fade_out : a.fade_in,
       ]}>
-      <FocusScope.FocusScope asChild loop trapped>
+      <FocusScope asChild loop trapped>
         <View
           style={flatten([
             {
@@ -244,7 +245,7 @@ export function WelcomeModal({control}: WelcomeModalProps) {
             </Button>
           </ImageBackground>
         </View>
-      </FocusScope.FocusScope>
+      </FocusScope>
     </View>
   )
 }

src/view/shell/Composer.web.tsx

@@ -1,5 +1,7 @@
 import {StyleSheet, View} from 'react-native'
-import {DismissableLayer, FocusGuards, FocusScope} from 'radix-ui/internal'
+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 {useA11y} from '#/state/a11y'
@@ -36,11 +38,11 @@ function Inner({state}: {state: ComposerOpts}) {
   const {gtMobile} = useBreakpoints()
   const {reduceMotionEnabled} = useA11y()
 
-  FocusGuards.useFocusGuards()
+  useFocusGuards()
 
   return (
-    <FocusScope.FocusScope loop trapped asChild>
-      <DismissableLayer.DismissableLayer
+    <FocusScope loop trapped asChild>
+      <DismissableLayer
         role="dialog"
         aria-modal
         style={flatten([
@@ -84,8 +86,8 @@ function Inner({state}: {state: ComposerOpts}) {
             openGallery={state.openGallery}
           />
         </View>
-      </DismissableLayer.DismissableLayer>
-    </FocusScope.FocusScope>
+      </DismissableLayer>
+    </FocusScope>
   )
 }