28/7, navigasi yang masih pr, kenapa menu gabisa muncul animasi modal.

apps/navigation/MainStack.js

@@ -5,24 +5,99 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import {BaseColor} from '@config';
+
+import {
+  BottomTabNavigatorMazi,
+  tabBarFloat,
+  tabBarIcon,
+  CustomTabBarButton,
+} from './components';
 import {useWindowDimensions, View, Text, TouchableOpacity} from 'react-native';
 import ForgotPassword from '../screens/ForgotPassword';
 import HomeScreen from '../screens/Home';
 import Register from '../screens/Register';
+import ProfileScreen from '../screens/Profile';
+import ProjectScreen from '../screens/ProjectScreen';
+import CustomModal from '../screens/CustomModal';
+import IconFontAwesome5 from 'react-native-vector-icons/FontAwesome5';
 const Stack = createStackNavigator();
 const Drawer = createDrawerNavigator();
 
 // import ForgotPassword from '../screens/ForgotPassword';
+export const WalletMenu = () => (
+  <BottomTabNavigatorMazi tabScreens={WalletTabScreens} />
+);
+
+const ModalScreen = () => (
+  <View style={{flex: 1, backgroundColor: 'blue'}}></View>
+);
+
+const CreateNewPlaceholder = () => (
+  <View style={{flex: 1, backgroundColor: 'blue'}}></View>
+);
+
+export const WalletTabScreens = {
+  HomeScreen: {
+    component: HomeScreen,
+    options: {
+      title: 'Home',
+      headerShown: false,
+      tabBarIcon: ({focused, color}) =>
+        tabBarIcon({focused, color, name: 'home'}),
+    },
+  },
+  CustomModal: {
+    // component: CustomModal,
+    component: CreateNewPlaceholder,
+    options: {
+      title: 'Menu',
+      headerShown: false,
+      animationEnabled: true,
+      // mode: 'modal',
+      tabBarButton: ({focused, onPress, props, color}) =>
+        CustomTabBarButton({
+          onPress,
+          props,
+          color,
+          focused,
+          // color: '#58D68D',
+          bgColor: BaseColor.corn10, //inni background belakang bawah button bulet
+          nameIcon: 'align-justify',
+          nameTitle: 'Menu',
+        }),
+      // tabBarFloat: ({focused, color}) =>
+      // tabBarFloat({focused, color, name: 'history'}),
+      // tabBarIcon: ({focused, color}) =>
+      //   tabBarIcon({focused, color, name: 'history'}),
+    },
+  },
+  ProfileScreen: {
+    component: ProfileScreen,
+    options: {
+      title: 'Profile',
+      headerShown: false,
+
+      tabBarIcon: ({focused, color}) =>
+        tabBarIcon({focused, color, name: 'user'}),
+    },
+  },
+};
 
 const MainStack = ({navigation}) => {
   return (
-    <Stack.Navigator>
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}>
       <Stack.Screen
         // name="HomeStack"
         // component={DrawerStack}
         name="HomeStack"
-        component={HomeScreen}
+        // component={HomeScreen}
+        component={WalletMenu}
         options={{headerShown: false}}></Stack.Screen>
+
       <Stack.Screen
         // name="HomeStack"
         // component={DrawerStack}

apps/navigation/components/TabBg.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Svg, {Path, SvgProps} from 'react-native-svg';
+
+// type Props = SvgProps & {
+//   color?: string,
+// };
+
+export const TabBg = ({color = 'yellow', ...props}) => {
+  return (
+    <Svg width={75} height={61} viewBox="0 0 75 61" {...props}>
+      <Path
+        d="M75.2 0v61H0V0c4.1 0 7.4 3.1 7.9 7.1C10 21.7 22.5 33 37.7 33c15.2 0 27.7-11.3 29.7-25.9.5-4 3.9-7.1 7.9-7.1h-.1z"
+        fill={color}
+      />
+    </Svg>
+  );
+};

apps/navigation/components/backup navigator.js

@@ -0,0 +1,90 @@
+<BottomTab.Navigator
+  // initialRouteName="Home"
+  mode="modal"
+  screenOptions={{
+    presentation: 'modal',
+
+    headerShown: false,
+    // headerMode: 'screen',
+    animationEnabled: false,
+    tabBarShowIcon: true,
+    tabBarShowLabel: true,
+    tabBarInactiveTintColor: BaseColor.corn30,
+    tabBarActiveTintColor: BaseColor.corn70,
+    tabBarStyle: {
+      //cek
+      position: 'absolute',
+
+      elevation: 0,
+      backgroundColor: BaseColor.corn10,
+      borderRadius: 15,
+      height: 60,
+      ...styles.shadow,
+    },
+    tabBarLabelStyle: {
+      fontSize: 11,
+
+      paddingBottom: 8,
+    },
+    tabBarItemStyle: {
+      borderTopWidth: 0,
+
+      // backgroundColor: '#FFFFFF',
+      // backgroundColor: 'red',
+      // backgroundColor: 'transparent',
+
+      //   elevation: 30,
+    },
+  }}
+  options={{modalPresentationStyle: 'fullScreen'}}>
+  {Object.keys(tabScreens).map((name, index) => {
+    const {options, component} = tabScreens[name];
+    console.log('name tab', name);
+    console.log('index tab', index);
+    return name == 'CustomModal' ? (
+      <BottomTab.Screen
+        key={index}
+        name={name}
+        component={component}
+        // component={CustomModal}
+        // listeners={({navigation}) => ({
+        //   tabPress: event => {
+        //     event.preventDefault();
+        //     navigation.navigate('CustomModal');
+        //   },
+        // })}
+        listeners={({navigation, route}) => ({
+          tabPress: e => {
+            console.log('ini yg diklik', e),
+              // Prevent default action
+              e.preventDefault();
+
+            // Do something with the `navigation` object
+            navigation.navigate('CustomModal');
+          },
+        })}
+        options={{
+          tabBarIconStyle: {paddingVertical: 0, marginVertical: 0},
+          ...options,
+          title: t(options.title),
+          animationEnabled: true,
+        }}
+      />
+    ) : (
+      <BottomTab.Screen
+        key={index}
+        name={name}
+        component={component}
+        options={{
+          tabBarIconStyle: {paddingVertical: 0, marginVertical: 0},
+          ...options,
+          title: t(options.title),
+        }}
+      />
+    );
+  })}
+  {/* </BottomTab.Group> */}
+  {/* <BottomTab.Group screenOptions={{presentation: 'modal'}}>
+        <BottomTab.Screen name="MyModal" component={CustomModal} />
+      </BottomTab.Group> */}
+</BottomTab.Navigator>;