make translation api available globally w/o wrapper (#4110)

modules/expo-bluesky-translate/index.ts

@@ -1,4 +1,5 @@
 export {
-  ExpoBlueskyTranslateView,
   isAvailable,
+  NativeTranslationModule,
+  NativeTranslationView,
 } from './src/ExpoBlueskyTranslateView'

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslateModule.swift

@@ -5,14 +5,14 @@ import SwiftUI
 public class ExpoBlueskyTranslateModule: Module {
   public func definition() -> ModuleDefinition {
     Name("ExpoBlueskyTranslate")
-    View(ExpoBlueskyTranslateView.self) {
-      Events("onClose")
-      Prop("text") { (view: ExpoBlueskyTranslateView, text: String) in
-        view.props.text = text
-      }
-      Prop("isPresented") { (view: ExpoBlueskyTranslateView, isPresented: Bool) in
-        view.props.isPresented = isPresented
+
+    AsyncFunction("presentAsync") { (text: String) in
+      DispatchQueue.main.async { [weak state = TranslateViewState.shared] in
+        state?.isPresented = true
+        state?.text = text
       }
     }
+
+    View(ExpoBlueskyTranslateView.self) {}
   }
 }

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslateView.swift

@@ -2,36 +2,21 @@ import ExpoModulesCore
 import Foundation
 import SwiftUI
 
-class TranslateViewProps: ObservableObject {
-  @Published var text: String = ""
-  @Published var children: [UIView]?
-  @Published var onClose: EventDispatcher
-  @Published var isPresented: Bool = false {
-    didSet {
-      if !isPresented {
-        self.onClose()
-      }
-    }
-  }
-
-  init(onClose: EventDispatcher) {
-    self.onClose = onClose
-  }
+class TranslateViewState: ObservableObject {
+  static var shared = TranslateViewState()
+
+  @Published var isPresented = false
+  @Published var text = ""
 }
 
 class ExpoBlueskyTranslateView: ExpoView {
-  let props: TranslateViewProps
-  let onClose = EventDispatcher()
-
-  override func didUpdateReactSubviews() {
-    let subChildren = self.reactSubviews()
-    props.children = subChildren
-  }
-
   required init(appContext: AppContext? = nil) {
-    props = TranslateViewProps(onClose: onClose)
-    let hostingController = UIHostingController(rootView: TranslateView(props: props))
-    super.init(appContext: appContext)
-    setupHostingController(hostingController)
+    if #available(iOS 14.0, *) {
+      let hostingController = UIHostingController(rootView: TranslateView())
+      super.init(appContext: appContext)
+      setupHostingController(hostingController)
+    } else {
+      super.init(appContext: appContext)
+    }
   }
 }

modules/expo-bluesky-translate/ios/TranslateView.swift

@@ -2,21 +2,16 @@ import SwiftUI
 import Translation
 
 struct TranslateView: View {
-  @ObservedObject var props: TranslateViewProps
+  @ObservedObject var state = TranslateViewState.shared
 
   var body: some View {
     if #available(iOS 17.4, *) {
       VStack {
-        ForEach(props.children?.indices ?? 0..<0, id: \.self) { index in
-          UIViewRepresentableWrapper(view: props.children?[index] ?? UIView())
-            .frame(
-              width: props.children?[index].frame.width,
-              height: props.children?[index].frame.height)
-        }
+        UIViewRepresentableWrapper(view: UIView(frame: .zero))
       }
       .translationPresentation(
-        isPresented: $props.isPresented,
-        text: props.text
+        isPresented: $state.isPresented,
+        text: state.text
       )
     }
   }

modules/expo-bluesky-translate/src/ExpoBlueskyTranslate.types.ts

@@ -1,8 +1,3 @@
-import React from 'react'
-
-export type ExpoBlueskyTranslateProps = {
-  text: string
-  isPresented?: boolean
-  children: React.ReactNode
-  onClose?: () => void
+export type ExpoBlueskyTranslateModule = {
+  presentAsync: (text: string) => Promise<void>
 }

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.ios.tsx

@@ -1,14 +1,18 @@
 import React from 'react'
 import {Platform} from 'react-native'
-import {requireNativeViewManager} from 'expo-modules-core'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
 
-import {ExpoBlueskyTranslateProps} from './ExpoBlueskyTranslate.types'
+import {ExpoBlueskyTranslateModule} from './ExpoBlueskyTranslate.types'
 
-const NativeView: React.ComponentType<ExpoBlueskyTranslateProps> =
-  requireNativeViewManager('ExpoBlueskyTranslate')
+export const NativeTranslationModule =
+  requireNativeModule<ExpoBlueskyTranslateModule>('ExpoBlueskyTranslate')
 
-export function ExpoBlueskyTranslateView(props: ExpoBlueskyTranslateProps) {
-  return <NativeView {...props} />
+const NativeView: React.ComponentType = requireNativeViewManager(
+  'ExpoBlueskyTranslate',
+)
+
+export function NativeTranslationView() {
+  return <NativeView />
 }
 
 export const isAvailable = Number(Platform.Version) >= 17.4

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.tsx

@@ -1,6 +1,8 @@
-import {ExpoBlueskyTranslateProps} from './ExpoBlueskyTranslate.types'
+export const NativeTranslationModule = {
+  presentAsync: async (_: string) => {},
+}
 
-export function ExpoBlueskyTranslateView(_: ExpoBlueskyTranslateProps) {
+export function NativeTranslationView() {
   return null
 }
 

src/view/com/post-thread/PostThreadItem.tsx

@@ -31,8 +31,8 @@ import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn'
 import {atoms as a} from '#/alf'
 import {RichText} from '#/components/RichText'
 import {
-  ExpoBlueskyTranslateView,
   isAvailable as isNativeTranslateAvailable,
+  NativeTranslationModule,
 } from '../../../../modules/expo-bluesky-translate'
 import {ContentHider} from '../../../components/moderation/ContentHider'
 import {LabelsOnMyPost} from '../../../components/moderation/LabelsOnMe'
@@ -637,32 +637,27 @@ function ExpandedPostDetails({
   const pal = usePalette('default')
   const {_} = useLingui()
   const openLink = useOpenLink()
-  const [presented, setPresented] = React.useState(false)
   const onTranslatePress = React.useCallback(() => {
     if (isNativeTranslateAvailable) {
-      setPresented(true)
+      NativeTranslationModule.presentAsync(text)
     } else {
       openLink(translatorUrl)
     }
-  }, [openLink, translatorUrl])
+  }, [openLink, text, translatorUrl])
 
   return (
     <View style={[s.flexRow, s.mt2, s.mb10]}>
       <Text style={pal.textLight}>{niceDate(post.indexedAt)}</Text>
       {needsTranslation && (
         <>
           <Text style={pal.textLight}> &middot; </Text>
-          <ExpoBlueskyTranslateView
-            text={text}
-            isPresented={presented}
-            onClose={() => setPresented(false)}>
-            <Text
-              style={pal.link}
-              title={_(msg`Translate`)}
-              onPress={onTranslatePress}>
-              <Trans>Translate</Trans>
-            </Text>
-          </ExpoBlueskyTranslateView>
+
+          <Text
+            style={pal.link}
+            title={_(msg`Translate`)}
+            onPress={onTranslatePress}>
+            <Trans>Translate</Trans>
+          </Text>
         </>
       )}
     </View>

src/view/shell/index.tsx

@@ -33,6 +33,7 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
+import {NativeTranslationView} from '../../../modules/expo-bluesky-translate'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
@@ -93,6 +94,7 @@ function ShellInner() {
           </Drawer>
         </ErrorBoundary>
       </Animated.View>
+      <NativeTranslationView />
       <Composer winHeight={winDim.height} />
       <ModalsContainer />
       <MutedWordsDialog />