@momo-kits/foundation 0.92.1-rc.7 → 0.92.1-rc.8

package/Application/BottomTab/BottomTabBar.tsx

@@ -28,9 +28,9 @@ import {EdgeInsets, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {Radius} from '../../Consts';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
+import {FloatingButtonProps} from '../types';
 import {CurvedViewComponent} from './CurvedView';
 import {getPathUp} from './path';
-import {FloatingButtonProps} from '../types';
 const {width} = Dimensions.get('window');
 
 type Props = BottomTabBarProps & {
@@ -165,10 +165,10 @@ export default function BottomTabBar({
     tabStyle,
   });
   const focusedRoute = state.routes[state.index] as any;
-  const focusedDescriptor = descriptors?.[focusedRoute.key] ?? ({} as any);
-  const focusedOptions = focusedDescriptor.options;
+  const focusedDescriptor = descriptors[focusedRoute?.key] as any;
+  const focusedOptions = focusedDescriptor?.options;
   const shouldShowTabBar =
-    focusedOptions.tabBarVisible !== false && !keyboardHidesTabBar;
+    focusedOptions?.tabBarVisible !== false && !keyboardHidesTabBar;
   const [visible] = React.useState(
     () => new Animated.Value(shouldShowTabBar ? 1 : 0),
   );
@@ -176,13 +176,13 @@ export default function BottomTabBar({
   const indicatorAnimated = React.useRef(new Animated.Value(0)).current;
 
   const visibilityAnimationConfigRef = React.useRef(
-    focusedOptions.tabBarVisibilityAnimationConfig,
+    focusedOptions?.tabBarVisibilityAnimationConfig,
   );
   const onHeightChange = React.useContext(BottomTabBarHeightCallbackContext);
   const [isTabBarHidden, setIsTabBarHidden] = React.useState(!shouldShowTabBar);
   React.useEffect(() => {
     visibilityAnimationConfigRef.current =
-      focusedOptions.tabBarVisibilityAnimationConfig;
+      focusedOptions?.tabBarVisibilityAnimationConfig;
   });
 
   const handleLayout = (e: LayoutChangeEvent) => {
@@ -265,7 +265,7 @@ export default function BottomTabBar({
     (data: any[]) => {
       return data?.map((route, index) => {
         const focused = route.params.name === focusedTab;
-        const {options} = descriptors?.[route.key] ?? ({} as any);
+        const {options} = descriptors[route?.key] as any;
         const onPress = () => {
           const event = navigation.emit({
             type: 'tabPress',
@@ -305,7 +305,7 @@ export default function BottomTabBar({
         return (
           <NavigationContext.Provider
             key={route.key}
-            value={(descriptors as any)?.[route.key]?.navigation}>
+            value={(descriptors as any)[route.key].navigation}>
             <NavigationRouteContext.Provider value={route}>
               <BottomTabBarItem
                 route={route}
@@ -434,7 +434,9 @@ export default function BottomTabBar({
         {isFloating && (
           <CurvedViewComponent
             width={width}
-            height={61 + Math.min(insets.bottom, 21)}
+            height={
+              Platform.OS == 'ios' ? 61 + Math.min(insets.bottom, 21) : 90
+            }
             style={styles.curved}
             bgColor="white"
             path={getPathUp(width, tabBarHeight, 50, false, 'CENTER')}
@@ -454,10 +456,9 @@ export default function BottomTabBar({
             ]}
           />
         </Animated.View>
-
-        {renderTabItem(leftArr)}
+        {isFloating ? renderTabItem(leftArr) : renderTabItem(routes)}
         {isFloating && renderCenterComponent()}
-        {renderTabItem(rightArr)}
+        {isFloating && renderTabItem(rightArr)}
       </View>
     </Animated.View>
   );
@@ -484,7 +485,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     left: 0,
     right: 0,
-    bottom: -6,
+    bottom: Platform.OS === 'ios' ? -6 : 0,
   },
   floatingContent: {
     alignItems: 'center',

package/Application/BottomTab/index.tsx

@@ -4,13 +4,13 @@ import {createStackNavigator} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Platform} from 'react-native';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import BottomTabBar from './BottomTabBar';
 import {Icon} from '../../Icon';
 import {Text} from '../../Text';
 import {ApplicationContext} from '../index';
-import {getAccessibilityID, getStackOptions} from '../utils';
 import StackScreen from '../StackScreen';
 import {BottomTabProps, NavigationScreenProps} from '../types';
+import {getAccessibilityID, getStackOptions} from '../utils';
+import BottomTabBar from './BottomTabBar';
 
 const Tab = createBottomTabNavigator();
 const Stack = createStackNavigator();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.92.1-rc.7",
+    "version": "0.92.1-rc.8",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {