@momo-kits/foundation 0.81.1-beta.6 → 0.81.1-optimize.1

package/Application/BottomTab.tsx

@@ -1,44 +1,95 @@
-import React, {useContext} from 'react';
-import {View} from 'react-native';
-import {BottomTabProps} from './types';
+import React, {useContext, useEffect} from 'react';
+import {Platform} from 'react-native';
+import {BottomTabProps, NavigationScreenProps} from './types';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {createStackNavigator} from '@react-navigation/stack';
+import {useSafeAreaInsets} from 'react-native-safe-area-context';
+import {NavigationContainer} from '@react-navigation/native';
 import {Icon} from '../Icon';
 import {Text} from '../Text';
 import {ApplicationContext} from './index';
+import {getStackOptions} from './utils';
+import StackScreen from './StackScreen';
 
 const Tab = createBottomTabNavigator();
+const Stack = createStackNavigator();
 
-const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
+const TabScreen: React.FC<NavigationScreenProps> = ({route}) => {
+  if (route.params?.nested) {
+    return (
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    );
+  }
+  return (
+    <NavigationContainer independent={true}>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Stack"
+          component={StackScreen}
+          initialParams={{screen: route.params?.screen}}
+          options={{...getStackOptions(), ...route.params?.options}}
+        />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+const BottomTab: React.FC<BottomTabProps> = ({
+  nested,
+  tabs,
+  listeners,
+  navigation,
+  initialRouteName,
+}) => {
   const {theme} = useContext(ApplicationContext);
+  const insets = useSafeAreaInsets();
 
-  const defaultListener = {
-    focus: (item: any) => {
-      const focusItem = tabs.find(i => item.target.includes(i.name));
-      if (focusItem?.options) {
-        navigation?.setOptions?.(focusItem.options);
-      }
-    },
-  };
+  useEffect(() => {
+    navigation?.setOptions({
+      headerShown: false,
+      headerTransparent: true,
+      headerBackground: undefined,
+    });
+  }, []);
 
   return (
-    <Tab.Navigator backBehavior={'firstRoute'}>
+    <Tab.Navigator
+      initialRouteName={initialRouteName}
+      backBehavior={'firstRoute'}
+      tabBarOptions={{
+        style: {
+          height: 68 + Math.min(insets.bottom, 21),
+        },
+        tabStyle: {
+          height: 68,
+          paddingVertical: 8,
+        },
+      }}>
       {tabs.map(item => {
         return (
           <Tab.Screen
             key={item.name}
             name={item.name}
-            component={item.screen}
-            listeners={listeners ?? defaultListener}
+            component={TabScreen}
+            initialParams={{...item, nested}}
+            listeners={listeners}
             options={{
               tabBarLabel: ({color, focused}) => {
                 return (
-                  <View style={{paddingHorizontal: 16}}>
-                    <Text
-                      typography={focused ? 'label_xs' : 'description_xs'}
-                      color={color}>
-                      {item.label}
-                    </Text>
-                  </View>
+                  <Text
+                    numberOfLines={1}
+                    typography={
+                      focused ? 'label_xs_medium' : 'description_xs_regular'
+                    }
+                    color={color}>
+                    {item.label}
+                  </Text>
                 );
               },
               tabBarBadge: item?.badgeLabel,
@@ -46,10 +97,12 @@ const BottomTab: React.FC<BottomTabProps> = ({tabs, listeners, navigation}) => {
                 borderColor: 'white',
                 borderWidth: 2,
                 fontSize: 10,
-                lineHeight: 14,
+                lineHeight: Platform.OS === 'android' ? 17 : 14,
                 fontWeight: 'bold',
                 alignSelf: 'center',
                 fontFamily: `${theme.font}-Bold`,
+                left: item?.showDot ? 8 : 4,
+                top: item?.showDot ? -2 : -6,
               },
               tabBarIcon: ({color}) => (
                 <Icon source={item.icon} color={color} size={28} />