try to fix flash on iOS safari

web-ridge · Jun 21, 2023 · a856f50 · a856f50
1 parent 177baef
commit a856f50
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/example/package.json b/example/package.json
@@ -26,7 +26,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.71.7",
-    "react-native-mmkv": "^2.8.0",
+    "react-native-mmkv": "^2.9.0",
     "react-native-paper": "https://github.com/web-ridge/react-native-paper",
     "react-native-safe-area-context": "4.5.0",
     "react-native-use-form": "^0.10.4",

diff --git a/example/yarn.lock b/example/yarn.lock
@@ -7502,10 +7502,10 @@ react-native-gradle-plugin@^0.71.17:
   resolved "https://registry.yarnpkg.com/react-native-gradle-plugin/-/react-native-gradle-plugin-0.71.17.tgz#cf780a27270f0a32dca8184eff91555d7627dd00"
   integrity sha512-OXXYgpISEqERwjSlaCiaQY6cTY5CH6j73gdkWpK0hedxtiWMWgH+i5TOi4hIGYitm9kQBeyDu+wim9fA8ROFJA==
 
-react-native-mmkv@^2.8.0:
-  version "2.8.0"
-  resolved "https://registry.npmjs.org/react-native-mmkv/-/react-native-mmkv-2.8.0.tgz#328318256eb50f0b87826edceaff4b1cd70ba957"
-  integrity sha512-sfI2uzr5UCz7jS6QxIWnC7AbIuoIw9T7hDtsw0ohSlIdCABPoORPu8xpOSZN2bMkK7Z7sMQwLeP73uBXu0A3jw==
+react-native-mmkv@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.npmjs.org/react-native-mmkv/-/react-native-mmkv-2.9.0.tgz#22ab2c1a2a59ab1cfbf0670d1ae69620fbf621e4"
+  integrity sha512-6nA9bn95N9DkIar2Opm4h46JKFDUJbPUpV0P//Bn3Q/wbGP6T8w5y7D4ezFVv5ESkkIrh7ARbEUGw8rlLCsHPw==
 
 "react-native-paper@https://github.com/web-ridge/react-native-paper":
   version "5.4.1"

diff --git a/src/navigation/NavigationStack.web.tsx b/src/navigation/NavigationStack.web.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { NavigationMotion } from 'navigation-react-mobile';
-import { View, StyleSheet } from 'react-native';
 
 import OptimizedContext, {
   OptimizedContextProvider,
@@ -11,19 +10,27 @@ function NavigationStack({ renderWeb }: { renderWeb?: (key: string) => any }) {
   return (
     <NavigationMotion
       duration={0}
-      renderMotion={(_, scene, __, ___, state, data) => (
-        <View
-          style={[
-            StyleSheet.absoluteFill,
-            {
-              backgroundColor: theme.layout.backgroundColor,
-            },
-          ]}
+      renderMotion={(_, scene, key, ___, state, data) => (
+        <div
+          key={key}
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            bottom: 0,
+            overflow: 'hidden',
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            // opacity: 1,
+            backgroundColor: theme.layout.backgroundColor as any,
+          }}
         >
           <OptimizedContextProvider state={state} data={data}>
             {renderWeb?.(state.key) || scene}
           </OptimizedContextProvider>
-        </View>
+        </div>
       )}
     />
   );