feat(mobile): integrate RootSiblingParent and Navigation context

- Wrapped children in RootSiblingParent within the App component to manage sibling overlays.
- Renamed main application component from App4 to Entry for clarity.
- Enhanced dialog component by adding SafeAreaProvider and NavigationInstanceContext for improved layout and navigation handling.
- Cleaned up provider structure by removing unnecessary RootSiblingParent in RootProviders.

These changes aim to improve the overlay management and navigation context within the mobile application.

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/App.tsx

@@ -1,5 +1,6 @@
 import { View } from "react-native"
 import Animated, { interpolate, useAnimatedStyle } from "react-native-reanimated"
+import { RootSiblingParent } from "react-native-root-siblings"
 import { useSheet } from "react-native-sheet-transitions"
 
 import { FullWindowOverlay } from "./components/common/FullWindowOverlay"
@@ -25,7 +26,7 @@ export function App({ children }: { children: React.ReactNode }) {
       <Session />
 
       <Animated.View className="flex-1 overflow-hidden" style={style}>
-        {children}
+        <RootSiblingParent>{children}</RootSiblingParent>
       </Animated.View>
       {__DEV__ && <DebugButton />}
       <FullWindowOverlay>

apps/mobile/src/lib/dialog.tsx

@@ -13,11 +13,13 @@ import {
 import { Text, TouchableOpacity, View } from "react-native"
 import Animated, { SlideInUp, SlideOutUp } from "react-native-reanimated"
 import RootSiblings from "react-native-root-siblings"
-import { useSafeAreaInsets } from "react-native-safe-area-context"
+import { SafeAreaProvider, useSafeAreaInsets } from "react-native-safe-area-context"
 import { useColor } from "react-native-uikit-colors"
 
 import { FullWindowOverlay } from "../components/common/FullWindowOverlay"
 import { Overlay } from "../components/ui/overlay/Overlay"
+import { Navigation } from "./navigation/Navigation"
+import { NavigationInstanceContext } from "./navigation/NavigationInstanceContext"
 
 export interface DialogProps<Ctx> {
   title?: string
@@ -192,39 +194,46 @@ class DialogStatic {
 
     const siblings = new RootSiblings(
       (
-        <FullWindowOverlay>
-          <Overlay onPress={handleClose} />
-          <Animated.View
-            className="bg-secondary-system-background absolute inset-x-0 -top-8 pt-8"
-            entering={entering}
-            exiting={exiting}
-          >
-            <SafeInsetTop />
-            <DialogDynamicButtonActionProvider>
-              {Header}
-              <View className={cn("px-6 pb-4", Header ? "pt-4" : "pt-0")}>
-                <DialogContext.Provider value={reactCtx}>{children}</DialogContext.Provider>
-              </View>
+        <SafeAreaProvider>
+          <NavigationInstanceContext.Provider value={Navigation.rootNavigation}>
+            <FullWindowOverlay>
+              <Overlay onPress={handleClose} />
+              <Animated.View
+                className="bg-secondary-system-background absolute inset-x-0 -top-8 pt-8"
+                entering={entering}
+                exiting={exiting}
+              >
+                <SafeInsetTop />
+                <DialogDynamicButtonActionProvider>
+                  {Header}
+                  <View className={cn("px-6 pb-4", Header ? "pt-4" : "pt-0")}>
+                    <DialogContext.Provider value={reactCtx}>{children}</DialogContext.Provider>
+                  </View>
 
-              <View className="flex-row gap-4 px-6 pb-4">
-                <DialogDynamicButtonAction
-                  fallbackCaller={handleClose}
-                  text={override?.cancelText ?? props.cancelText ?? "Cancel"}
-                  type="cancel"
-                  textClassName={cn(props.variant === "destructive" && "font-bold")}
-                />
+                  <View className="flex-row gap-4 px-6 pb-4">
+                    <DialogDynamicButtonAction
+                      fallbackCaller={handleClose}
+                      text={override?.cancelText ?? props.cancelText ?? "Cancel"}
+                      type="cancel"
+                      textClassName={cn(props.variant === "destructive" && "font-bold")}
+                    />
 
-                <DialogDynamicButtonAction
-                  fallbackCaller={handleConfirm}
-                  text={override?.confirmText ?? props.confirmText ?? "Confirm"}
-                  type="confirm"
-                  className={props.variant === "destructive" ? "bg-red" : "bg-accent"}
-                  textClassName={cn("text-white", props.variant !== "destructive" && "font-bold")}
-                />
-              </View>
-            </DialogDynamicButtonActionProvider>
-          </Animated.View>
-        </FullWindowOverlay>
+                    <DialogDynamicButtonAction
+                      fallbackCaller={handleConfirm}
+                      text={override?.confirmText ?? props.confirmText ?? "Confirm"}
+                      type="confirm"
+                      className={props.variant === "destructive" ? "bg-red" : "bg-accent"}
+                      textClassName={cn(
+                        "text-white",
+                        props.variant !== "destructive" && "font-bold",
+                      )}
+                    />
+                  </View>
+                </DialogDynamicButtonActionProvider>
+              </Animated.View>
+            </FullWindowOverlay>
+          </NavigationInstanceContext.Provider>
+        </SafeAreaProvider>
       ),
     )
 

apps/mobile/src/main.tsx

@@ -32,9 +32,9 @@ cssInterop(Image, { className: "style" })
 
 initializeApp()
 
-registerRootComponent(() => <App4 />)
+registerRootComponent(() => <Entry />)
 
-const App4 = () => {
+const Entry = () => {
   return (
     <RootProviders>
       <BottomTabProvider>

apps/mobile/src/providers/index.tsx

@@ -8,7 +8,6 @@ import type { ReactNode } from "react"
 import { StyleSheet, View } from "react-native"
 import { GestureHandlerRootView } from "react-native-gesture-handler"
 import { KeyboardProvider } from "react-native-keyboard-controller"
-import { RootSiblingParent } from "react-native-root-siblings"
 import { SheetProvider } from "react-native-sheet-transitions"
 import { useCurrentColors } from "react-native-uikit-colors"
 
@@ -32,9 +31,7 @@ export const RootProviders = ({ children }: { children: ReactNode }) => {
                 <GestureHandlerRootView>
                   <SheetProvider>
                     <ActionSheetProvider>
-                      <RootSiblingParent>
-                        <PortalProvider>{children}</PortalProvider>
-                      </RootSiblingParent>
+                      <PortalProvider>{children}</PortalProvider>
                     </ActionSheetProvider>
                   </SheetProvider>
                 </GestureHandlerRootView>