@momo-kits/foundation 0.150.2-image.1 → 0.150.2-navigate.1

package/Application/utils.tsx

@@ -14,9 +14,84 @@ import { HeaderTitleProps, NavigationOptions } from './types';
 import { Colors, Spacing } from '../Consts';
 import { Animated, Platform } from 'react-native';
 import { MiniAppContext, ScreenContext, TrackingScopeContext } from './index';
+import { Easing } from 'react-native-reanimated';
 
 /**
- * default options for stack screen
+ * Custom reanimated transition specs for smoother animations
+ */
+const customTransitionSpec = {
+  open: {
+    animation: 'timing' as const,
+    config: {
+      duration: 300,
+      easing: Easing.out(Easing.cubic),
+    },
+  },
+  close: {
+    animation: 'timing' as const,
+    config: {
+      duration: 250,
+      easing: Easing.in(Easing.cubic),
+    },
+  },
+};
+
+const customSpringTransitionSpec = {
+  open: {
+    animation: 'spring' as const,
+    config: {
+      damping: 30,
+      mass: 1,
+      stiffness: 300,
+      overshootClamping: false,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+    },
+  },
+  close: {
+    animation: 'spring' as const,
+    config: {
+      damping: 35,
+      mass: 1,
+      stiffness: 400,
+      overshootClamping: false,
+      restDisplacementThreshold: 0.01,
+      restSpeedThreshold: 0.01,
+    },
+  },
+};
+
+/**
+ * Custom slide from right interpolator
+ */
+const slideFromRightInterpolator = ({
+  current,
+  _next,
+  inverted,
+  layouts: { screen },
+}: any) => {
+  const progress = current.progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+    extrapolate: 'clamp',
+  });
+
+  return {
+    cardStyle: {
+      transform: [
+        {
+          translateX: progress.interpolate({
+            inputRange: [0, 1],
+            outputRange: inverted ? [screen.width, 0] : [-screen.width, 0],
+          }),
+        },
+      ],
+    },
+  };
+};
+
+/**
+ * default options for stack screen with reanimated transitions
  */
 const getStackOptions = (): StackNavigationOptions => {
   return {
@@ -36,7 +111,11 @@ const getStackOptions = (): StackNavigationOptions => {
     headerRight: (props: any) => <HeaderRight {...props} />,
     headerTintColor: Colors.black_17,
     gestureEnabled: false,
-    ...TransitionPresets.SlideFromRightIOS,
+    transitionSpec: {
+      open: customTransitionSpec.open,
+      close: customTransitionSpec.close,
+    },
+    cardStyleInterpolator: slideFromRightInterpolator,
   };
 };
 

package/Image/index.tsx

@@ -66,7 +66,7 @@ const Image: React.FC<ImageProps> = ({
       {...rest}
       {...{ accessibilityLabel: rest.accessibilityLabel ?? accessibilityLabel }}
       source={source}
-      style={style}
+      style={[styles.container, style]}
       onProgress={() => {
         error.current = false;
         if (status !== 'loading' && loading) {
@@ -90,7 +90,7 @@ const Image: React.FC<ImageProps> = ({
         error.current = true;
       }}
     >
-      <View style={styles.container}>{renderContent()}</View>
+      {renderContent()}
     </FastImage>
   );
 };

package/Image/styles.ts

@@ -1,5 +1,5 @@
-import { StyleSheet } from 'react-native';
+import {StyleSheet} from 'react-native';
 
 export default StyleSheet.create({
-  container: { zIndex: -1, flex: 1 },
-});
+  container: {},
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.150.2-image.1",
+    "version": "0.150.2-navigate.1",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},