@momo-kits/foundation 0.77.1-optimzie.5 → 0.77.1-optimzie.6

package/Application/BottomTab/BottomTabBar.tsx

@@ -293,21 +293,19 @@ export default function BottomTabBar({
   );
 
   const renderCenterComponent = useCallback(() => {
-    const renderFloatingButton = () => {
-      if (typeof floatingButton?.icon == 'string') {
-        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
-      } else if (floatingButton?.icon) {
-        return floatingButton?.icon;
-      } else {
-        return null;
-      }
-    };
     if (floatingButton?.icon && state.routes.length !== 4) {
       console.warn(
         "Can't render floating button with icon when routes length is not 4",
       );
       return null;
     }
+    const renderFloatingButton = () => {
+      if (typeof floatingButton?.icon == 'string') {
+        return <Icon source={floatingButton?.icon} size={32} color={'white'} />;
+      }
+      return floatingButton?.icon;
+    };
+
     return (
       <View style={{flex: 1}}>
         <TouchableOpacity
@@ -370,8 +368,6 @@ export default function BottomTabBar({
               }),
             },
           ],
-          // Absolutely position the tab bar so that the content is below it
-          // This is needed to avoid gap at bottom when the tab bar is hidden
           position: isTabBarHidden ? 'absolute' : (null as any),
         },
         {
@@ -430,8 +426,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     height: 48,
     width: 48,
-    borderRadius: 100,
-    top: -12,
+    borderRadius: 24,
+    top: -10,
   },
   indicator: {
     height: 2,

package/Application/BottomTab/index.tsx

@@ -10,21 +10,26 @@ import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
-import {getStackOptions} from '../utils';
+import {getOptions, getStackOptions} from '../utils';
 import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();
 
 const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  const {theme} = useContext(ApplicationContext);
+  let options = {};
+  if (route.params?.options) {
+    options = getOptions(route.params?.options, theme);
+  }
   if (route.params?.nested) {
     return (
       <Stack.Navigator>
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
-          options={{...getStackOptions(), ...route.params?.options}}
+          initialParams={{screen: route.params?.screen, options}}
+          options={{...getStackOptions()}}
         />
       </Stack.Navigator>
     );
@@ -35,7 +40,7 @@ const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
         <Stack.Screen
           name="Stack"
           component={StackScreen}
-          initialParams={{screen: route.params?.screen}}
+          initialParams={{screen: route.params?.screen, options}}
           options={{...getStackOptions(), ...route.params?.options}}
         />
       </Stack.Navigator>
@@ -83,6 +88,8 @@ const BottomTab: React.FC<BottomTabProps> = ({
         },
       }}>
       {tabs.map(item => {
+        const isNum = !isNaN(parseInt(`${item?.badgeLabel}`));
+        const isDot = typeof item?.badgeLabel == 'string' && !item?.badgeLabel;
         return (
           <Tab.Screen
             key={item.name}
@@ -113,12 +120,9 @@ const BottomTab: React.FC<BottomTabProps> = ({
                 fontWeight: 'bold',
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
-                left: item?.showDot ? 8 : 4,
-                top: item?.showDot ? -2 : -6,
-                backgroundColor:
-                  typeof item?.badgeLabel === 'string'
-                    ? Colors.orange_03
-                    : Colors.red_03,
+                left: isDot ? 8 : 4,
+                top: isDot ? -2 : -6,
+                backgroundColor: isNum ? Colors.orange_03 : Colors.red_03,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />

package/Application/Components.tsx

@@ -193,7 +193,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
     headerImage = undefined;
   }
   if (useSurface) {
-    backgroundColor = theme.colors.background.default;
+    backgroundColor = theme.colors.background.surface;
   }
   const opacity = animatedValue?.interpolate({
     inputRange: [0, 114],

package/Application/ModalScreen.tsx

@@ -158,20 +158,18 @@ const headerDefault = (title: string, onClose: () => void) => {
 
 const footerDefault = (footerComponent: React.ReactNode) => {
   const insets = useSafeAreaInsets();
-  return (
-    <View
-      style={{
-        marginBottom: Math.min(insets.bottom, 21),
-        paddingHorizontal: 12,
-      }}>
-      {footerComponent && (
-        <>
-          {footerComponent}
-          <View style={{height: Spacing.S}} />
-        </>
-      )}
-    </View>
-  );
+  if (footerComponent) {
+    return (
+      <View
+        style={{
+          marginBottom: Math.min(insets.bottom, 21),
+          paddingHorizontal: Spacing.M,
+          paddingVertical: Spacing.S,
+        }}>
+        {footerComponent}
+      </View>
+    );
+  }
 };
 
 const styles = StyleSheet.create({

package/Layout/FloatingButton.tsx

@@ -45,7 +45,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     if (!label) return;
 
     const listener = animatedValue?.addListener(({value}) => {
-      if (value !== lastOffset.current) {
+      if (value !== lastOffset.current && value > 0) {
         const direction = value > lastOffset.current ? 'down' : 'up';
         lastOffset.current = value;
         if (lastDirection.current !== direction) {

package/package.json

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