Fix root sibling context issue (#1902)

src/App.native.tsx

@@ -74,18 +74,19 @@ const InnerApp = observer(function AppImpl() {
 
   return (
     <ThemeProvider theme={colorMode}>
-      <RootSiblingParent>
       <analytics.Provider>
         <RootStoreProvider value={rootStore}>
           <I18nProvider i18n={i18n}>
+            {/* All components should be within this provider */}
+            <RootSiblingParent>
               <GestureHandlerRootView style={s.h100pct}>
                 <TestCtrls />
                 <Shell />
               </GestureHandlerRootView>
+            </RootSiblingParent>
           </I18nProvider>
         </RootStoreProvider>
       </analytics.Provider>
-      </RootSiblingParent>
     </ThemeProvider>
   )
 })

src/App.web.tsx

@@ -62,18 +62,19 @@ const InnerApp = observer(function AppImpl() {
 
   return (
     <ThemeProvider theme={colorMode}>
-      <RootSiblingParent>
       <analytics.Provider>
         <RootStoreProvider value={rootStore}>
           <I18nProvider i18n={i18n}>
+            {/* All components should be within this provider */}
+            <RootSiblingParent>
               <SafeAreaProvider>
                 <Shell />
               </SafeAreaProvider>
+            </RootSiblingParent>
           </I18nProvider>
           <ToastContainer />
         </RootStoreProvider>
       </analytics.Provider>
-      </RootSiblingParent>
     </ThemeProvider>
   )
 })