@momo-kits/foundation 0.111.1-optimize.5 → 0.111.1-optimize.7

package/Application/Components/BackgroundImageView.tsx

@@ -19,6 +19,32 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
   opacityBackground,
 }) => {
   const {theme} = useContext(ApplicationContext);
+  if (Platform.OS === 'android') {
+    return (
+      <Animated.View
+        style={[
+          useShadowHeader ? styles.shadowHeader : styles.dividerHeader,
+          {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            height: heightHeader,
+            backgroundColor: theme.colors.background.surface,
+            opacity: opacityBackground,
+            overflow: 'hidden',
+          },
+        ]}>
+        {headerBackground && (
+          <Image
+            style={styles.headerBackground}
+            source={{uri: headerBackground}}
+            loading={false}
+          />
+        )}
+      </Animated.View>
+    );
+  }
+
   return (
     <>
       <Animated.View
@@ -31,10 +57,21 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
             height: heightHeader,
             backgroundColor: theme.colors.background.surface,
             opacity: opacityBackground,
-            overflow: Platform.OS === 'android' ? 'hidden' : 'visible',
+          },
+        ]}
+      />
+      <Animated.View
+        style={[
+          {
+            position: 'absolute',
+            width: '100%',
+            zIndex: 1,
+            height: heightHeader,
+            opacity: opacityBackground,
+            overflow: 'hidden',
           },
         ]}>
-        {Platform.OS === 'android' && headerBackground && (
+        {headerBackground && (
           <Image
             style={styles.headerBackground}
             source={{uri: headerBackground}}
@@ -42,26 +79,6 @@ const BackgroundImageView: FC<BackgroundImageViewProps> = ({
           />
         )}
       </Animated.View>
-      {Platform.OS === 'ios' && (
-        <Animated.View
-          style={[
-            {
-              position: 'absolute',
-              width: '100%',
-              zIndex: 1,
-              height: heightHeader,
-              overflow: 'hidden',
-            },
-          ]}>
-          {headerBackground && (
-            <Image
-              style={styles.headerBackground}
-              source={{uri: headerBackground}}
-              loading={false}
-            />
-          )}
-        </Animated.View>
-      )}
     </>
   );
 };

package/Application/Components/HeaderBackground.tsx

@@ -69,14 +69,14 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   extendedHeader: {
-    aspectRatio: 2.43,
+    aspectRatio: 375 / 154,
     position: 'absolute',
     width: '100%',
   },
   headerBackground: {
     width: '100%',
     position: 'absolute',
-    aspectRatio: 375 / 152,
+    aspectRatio: 375 / 154,
   },
 });
 

package/Application/Components/HeaderExtendHeader.tsx

@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
     aspectRatio: 375 / 154,
   },
   extendedHeader: {
-    aspectRatio: 2.43,
+    aspectRatio: 375 / 154,
     position: 'absolute',
     width: '100%',
   },

package/Application/NavigationContainer.tsx

@@ -34,7 +34,6 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
   const isReady = useRef(false);
   const navigator = useRef(new Navigator(navigationRef, isReady));
   const [showGrid, setShowGrid] = useState(false);
-  const [currentContext, setCurrentContext] = useState({});
 
   let config: any = null;
   try {
@@ -105,103 +104,91 @@ const NavigationContainer: React.FC<NavigationContainerProps> = ({
     });
   };
 
-  const headerBackground = config?.headerBar || theme.assets?.headerBackground;
+  const headerBackground = theme.assets?.headerBackground || config?.headerBar;
   const headerGradient = config?.headerGradient || theme.colors?.gradient;
 
-  navigator.current.setCurrentContext = setCurrentContext;
-
   return (
     <SafeAreaProvider>
-      <MiniAppContext.Provider
+      <ApplicationContext.Provider
         value={{
-          ...context,
-          ...currentContext,
+          navigator: navigator.current,
+          theme: {
+            ...theme,
+            colors: {
+              ...theme.colors,
+              gradient: headerGradient,
+            },
+            assets: {
+              ...theme.assets,
+              headerBackground,
+            },
+          },
+          showGrid,
+          translate,
         }}>
-        <ApplicationContext.Provider
-          value={{
-            navigator: navigator.current,
-            theme: {
-              ...theme,
-              colors: {
-                ...theme.colors,
-                gradient: headerGradient,
-              },
-              assets: {
-                ...theme.assets,
-                headerBackground,
-              },
+        <ReactNavigationContainer
+          theme={{
+            ...theme,
+            colors: {
+              ...theme.colors,
+              background: theme.colors.background.default,
+              card: theme.colors.background.surface,
+              text: theme.colors.text.default,
+              border: theme.colors.border.default,
+              notification: theme.colors.error.primary,
             },
-            showGrid,
-            translate,
-          }}>
-          <ReactNavigationContainer
-            theme={{
-              ...theme,
-              colors: {
-                ...theme.colors,
-                background: theme.colors.background.default,
-                card: theme.colors.background.surface,
-                text: theme.colors.text.default,
-                border: theme.colors.border.default,
-                notification: theme.colors.error.primary,
-              },
-            }}
-            ref={navigationRef}
-            onReady={() => {
-              isReady.current = true;
-              routes.current = navigationRef.current?.getRootState?.()?.routes;
-              maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
-                onScreenNavigated(data?.screenName, screen?.name, 'push');
-                maxApi?.setObserver('CURRENT_SCREEN', {
-                  screenName: screen?.name,
-                });
-              });
-            }}
-            onStateChange={state => {
-              const lastedRoute: any =
-                state?.routes?.[state?.routes?.length - 1];
-              const oldRoute: any =
-                routes.current?.[routes.current?.length - 1];
-              const lasted = lastedRoute?.params?.screen;
-              const previous = oldRoute?.params?.screen;
-              const preScreenName = previous?.name ?? previous?.type?.name;
-              const screenName = lasted?.name ?? lasted?.type?.name;
+          }}
+          ref={navigationRef}
+          onReady={() => {
+            isReady.current = true;
+            routes.current = navigationRef.current?.getRootState?.()?.routes;
+            maxApi?.getDataObserver('CURRENT_SCREEN', (data: any) => {
+              onScreenNavigated(data?.screenName, screen?.name, 'push');
+              maxApi?.setObserver('CURRENT_SCREEN', {screenName: screen?.name});
+            });
+          }}
+          onStateChange={state => {
+            const lastedRoute: any = state?.routes?.[state?.routes?.length - 1];
+            const oldRoute: any = routes.current?.[routes.current?.length - 1];
+            const lasted = lastedRoute?.params?.screen;
+            const previous = oldRoute?.params?.screen;
+            const preScreenName = previous?.name ?? previous?.type?.name;
+            const screenName = lasted?.name ?? lasted?.type?.name;
 
-              let action = 'push';
-              if (routes.current?.length > (state?.routes?.length ?? 0)) {
-                action = 'back';
-              }
-              onScreenNavigated(preScreenName, screenName, action);
-              maxApi?.setObserver('CURRENT_SCREEN', {screenName});
-              routes.current = state?.routes;
-            }}
-            independent={true}>
-            <Stack.Navigator initialRouteName="Stack" headerMode="screen">
-              <Stack.Screen
-                name="Stack"
-                component={StackScreen}
-                initialParams={{screen, initialParams}}
-                options={{
-                  ...getStackOptions(),
-                  ...(options as StackNavigationOptions),
-                }}
-              />
-              <Stack.Screen
-                name="Dialog"
-                component={StackScreen}
-                options={getDialogOptions()}
-                initialParams={{screen}}
-              />
-              <Stack.Screen
-                name="Modal"
-                component={ModalScreen}
-                options={getModalOptions()}
-                initialParams={{screen}}
-              />
-            </Stack.Navigator>
-          </ReactNavigationContainer>
-        </ApplicationContext.Provider>
-      </MiniAppContext.Provider>
+            let action = 'push';
+            if (routes.current?.length > (state?.routes?.length ?? 0)) {
+              action = 'back';
+            }
+            onScreenNavigated(preScreenName, screenName, action);
+            maxApi?.setObserver('CURRENT_SCREEN', {screenName});
+            routes.current = state?.routes;
+          }}
+          independent={true}>
+          <Stack.Navigator initialRouteName="Stack" headerMode="screen">
+            <Stack.Screen
+              name="Stack"
+              component={StackScreen}
+              initialParams={{screen, initialParams}}
+              options={{
+                ...getStackOptions(),
+                ...(options as StackNavigationOptions),
+              }}
+            />
+            <Stack.Screen
+              name="Dialog"
+              component={StackScreen}
+              options={getDialogOptions()}
+              initialParams={{screen}}
+            />
+            <Stack.Screen
+              name="Modal"
+              component={ModalScreen}
+              options={getModalOptions()}
+              initialParams={{screen}}
+            />
+          </Stack.Navigator>
+        </ReactNavigationContainer>
+      </ApplicationContext.Provider>
     </SafeAreaProvider>
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momo-kits/foundation",
-  "version": "0.111.1-optimize.5",
+  "version": "0.111.1-optimize.7",
   "description": "React Native Component Kits",
   "main": "index.ts",
   "scripts": {},