#706 Flutter handler migration

packages/app/src/App.tsx

@@ -1,15 +1,23 @@
 import { RootStack } from "@/screens";
 import { NavigationContainer } from "@react-navigation/native";
+import Constants from "expo-constants";
 import { StatusBar } from "expo-status-bar";
-import { View } from "react-native";
+import { Platform, SafeAreaView } from "react-native";
 
 export function App() {
   return (
-    <View style={{ flex: 1 }}>
-      <NavigationContainer>
-        <RootStack />
-      </NavigationContainer>
+    <>
       <StatusBar style="auto" />
-    </View>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          paddingTop: Platform.OS === "ios" ? 0 : Constants.statusBarHeight,
+        }}
+      >
+        <NavigationContainer>
+          <RootStack />
+        </NavigationContainer>
+      </SafeAreaView>
+    </>
   );
 }

packages/app/src/components/TaxiWebView.tsx

@@ -1,8 +1,9 @@
 import { env } from "@/env";
 import { mapWebRoutes } from "@/navigation/web";
+import { useWebViewEvent } from "@/utils/eventHandler";
 import { isSameScreen } from "@/utils/navigation";
 import { useIsFocused, useNavigation } from "@react-navigation/native";
-import React, { useCallback, useMemo, useRef } from "react";
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Platform } from "react-native";
 import { WebView, type WebViewNavigation } from "react-native-webview";
 
@@ -19,6 +20,7 @@ export const TaxiWebView: React.FC<TaxiWebViewProps> = ({ path }) => {
   const currentScreen = useMemo(() => mapWebRoutes(uri), [uri]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
+  const { addEvent, removeEvent, handleMessage } = useWebViewEvent();
 
   const onNavigationStateChange = useCallback(
     (event: WebViewNavigation) => {
@@ -32,13 +34,17 @@ export const TaxiWebView: React.FC<TaxiWebViewProps> = ({ path }) => {
     [isFocused, currentScreen, navigation]
   );
 
+  useEffect(() => {}, []);
+
   return (
     <WebView
       cacheEnabled
       ref={ref}
-      userAgent={`taxi-app-webview/${Platform.OS}`}
+      userAgent={`taxi-app-rn-webview/${Platform.OS}`}
       source={{ uri }}
       onNavigationStateChange={onNavigationStateChange}
+      onMessage={handleMessage}
+      webviewDebuggingEnabled={true}
     />
   );
 };

packages/app/src/utils/eventHandler.ts

@@ -0,0 +1,37 @@
+import { useEffect, useRef } from "react";
+import { WebViewMessageEvent } from "react-native-webview";
+
+export interface RNEventProps {
+  event: string;
+  data?: any;
+}
+
+export interface RNEventListenrProps {
+  event: string;
+  listener: (data: any) => any;
+}
+
+export const useWebViewEvent = () => {
+  const eventRef = useRef<Map<string, RNEventListenrProps>>(new Map());
+
+  useEffect(() => {
+    eventRef.current = new Map();
+  }, []);
+
+  const addEvent = (event: RNEventListenrProps) => {
+    eventRef.current?.set(event.event, event);
+  };
+  const removeEvent = (event: RNEventListenrProps) => {
+    eventRef.current?.delete(event.event);
+  };
+  const handleMessage = (event: WebViewMessageEvent) => {
+    const data = JSON.parse(event.nativeEvent.data);
+    const eventProps = eventRef.current?.get(data.event);
+    eventProps?.listener(data.data);
+  };
+  return {
+    addEvent,
+    removeEvent,
+    handleMessage,
+  };
+};