Native translation expo module (#4098)

* translation expo module

* add `onClose` and `onReplacementAction`

* rm onReplacementAction

* make all props published

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

* conditionally import the translation module

* only use native translation if language is probably supported

* open native translation via dropdown menu

---------

Co-authored-by: Hailey <me@haileyok.com>
Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

modules/expo-bluesky-translate/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["ExpoBlueskyTranslateModule"]
+  }
+}

modules/expo-bluesky-translate/index.ts

@@ -0,0 +1,6 @@
+export {
+  isAvailable,
+  isLanguageSupported,
+  NativeTranslationModule,
+  NativeTranslationView,
+} from './src/ExpoBlueskyTranslateView'

modules/expo-bluesky-translate/ios/Common/UIHostingControllerCompat.swift

@@ -0,0 +1,20 @@
+import ExpoModulesCore
+import SwiftUI
+
+// Thanks to Andrew Levy for this code snippet
+// https://github.com/andrew-levy/swiftui-react-native/blob/d3fbb2abf07601ff0d4b83055e7717bb980910d6/ios/Common/ExpoView%2BUIHostingController.swift
+
+extension ExpoView {
+  func setupHostingController(_ hostingController: UIHostingController<some View>) {
+    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
+    hostingController.view.backgroundColor = .clear
+
+    addSubview(hostingController.view)
+    NSLayoutConstraint.activate([
+      hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
+      hostingController.view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
+      hostingController.view.leftAnchor.constraint(equalTo: self.leftAnchor),
+      hostingController.view.rightAnchor.constraint(equalTo: self.rightAnchor),
+    ])
+  }
+}

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslate.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoBlueskyTranslate'
+  s.version        = '1.0.0'
+  s.summary        = 'Uses SwiftUI translation to translate text.'
+  s.description    = 'Uses SwiftUI translation to translate text.'
+  s.author         = ''
+  s.homepage       = 'https://docs.expo.dev/modules/'
+  s.platforms      = { :ios => '13.4' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

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

@@ -0,0 +1,18 @@
+import ExpoModulesCore
+import Foundation
+import SwiftUI
+
+public class ExpoBlueskyTranslateModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyTranslate")
+    
+    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

@@ -0,0 +1,22 @@
+import ExpoModulesCore
+import Foundation
+import SwiftUI
+
+class TranslateViewState: ObservableObject {
+  static var shared = TranslateViewState()
+  
+  @Published var isPresented = false
+  @Published var text = ""
+}
+
+class ExpoBlueskyTranslateView: ExpoView {
+  required init(appContext: AppContext? = nil) {
+    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

@@ -0,0 +1,31 @@
+import SwiftUI
+// conditionally import the Translation module
+#if canImport(Translation)
+import Translation
+#endif
+
+struct TranslateView: View {
+  @ObservedObject var state = TranslateViewState.shared
+
+  var body: some View {
+    if #available(iOS 17.4, *) {
+      VStack {
+        UIViewRepresentableWrapper(view: UIView(frame: .zero))
+      }
+      .translationPresentation(
+        isPresented: $state.isPresented,
+        text: state.text
+      )
+    }
+  }
+}
+
+struct UIViewRepresentableWrapper: UIViewRepresentable {
+  let view: UIView
+
+  func makeUIView(context: Context) -> UIView {
+    return view
+  }
+
+  func updateUIView(_ uiView: UIView, context: Context) {}
+}

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

@@ -0,0 +1,3 @@
+export type ExpoBlueskyTranslateModule = {
+  presentAsync: (text: string) => Promise<void>
+}

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

@@ -0,0 +1,48 @@
+import React from 'react'
+import {Platform} from 'react-native'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
+
+import {ExpoBlueskyTranslateModule} from './ExpoBlueskyTranslate.types'
+
+export const NativeTranslationModule =
+  requireNativeModule<ExpoBlueskyTranslateModule>('ExpoBlueskyTranslate')
+
+const NativeView: React.ComponentType = requireNativeViewManager(
+  'ExpoBlueskyTranslate',
+)
+
+export function NativeTranslationView() {
+  return <NativeView />
+}
+
+export const isAvailable = Number(Platform.Version) >= 17.4
+
+// https://en.wikipedia.org/wiki/Translate_(Apple)#Languages
+const SUPPORTED_LANGUAGES = [
+  'ar',
+  'zh',
+  'zh',
+  'nl',
+  'en',
+  'en',
+  'fr',
+  'de',
+  'id',
+  'it',
+  'ja',
+  'ko',
+  'pl',
+  'pt',
+  'ru',
+  'es',
+  'th',
+  'tr',
+  'uk',
+  'vi',
+]
+
+export function isLanguageSupported(lang?: string) {
+  // If the language is not provided, we assume it is supported
+  if (!lang) return true
+  return SUPPORTED_LANGUAGES.includes(lang)
+}

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

@@ -0,0 +1,13 @@
+export const NativeTranslationModule = {
+  presentAsync: async (_: string) => {},
+}
+
+export function NativeTranslationView() {
+  return null
+}
+
+export const isAvailable = false
+
+export function isLanguageSupported(_lang?: string) {
+  return false
+}

modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+
 import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
+
 export function ExpoScrollForwarderView({
   children,
 }: React.PropsWithChildren<ExpoScrollForwarderViewProps>) {