@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react-native/base/src/components/ui/ClassicTabBar.tsx

@@ -5,8 +5,17 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useColorScheme } from 'nativewind';
 import { Colors } from '../../constants/Colors';
 import { getTabConfig } from '../../config/tabNavigation';
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
 
-const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) => {
+interface TabItemProps {
+  isFocused: boolean;
+  onPress: () => void;
+  onLongPress: () => void;
+  iconName: keyof typeof Ionicons.glyphMap;
+  colors: (typeof Colors)[keyof typeof Colors];
+}
+
+const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: TabItemProps) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -18,7 +27,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) =>
     >
       <View style={styles.tabItem}>
         <Ionicons 
-          name={iconName as any} 
+          name={iconName} 
           size={28} 
           color={isFocused ? colors.primary : colors.baseContent + '60'} 
         />
@@ -27,7 +36,7 @@ const TabItem = ({ isFocused, onPress, onLongPress, iconName, colors }: any) =>
   );
 };
 
-export default function ClassicTabBar({ state, descriptors, navigation }: any) {
+export default function ClassicTabBar({ state, descriptors, navigation }: BottomTabBarProps) {
   const insets = useSafeAreaInsets();
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? 'light'];
@@ -43,15 +52,9 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
         elevation:1
       }
     ]}>
-      {state.routes.map((route: any, index: number) => {
+      {state.routes.map((route, index: number) => {
         const { options } = descriptors[route.key];
         const tabConfig = getTabConfig(route.name);
-        const label = options.tabBarLabel !== undefined
-          ? options.tabBarLabel
-          : options.title !== undefined
-          ? options.title
-          : tabConfig?.title || route.name;
-
         const isFocused = state.index === index;
 
         const onPress = () => {
@@ -73,8 +76,8 @@ export default function ClassicTabBar({ state, descriptors, navigation }: any) {
           });
         };
 
-        let iconName: any = tabConfig?.baseIcon || "home";
-        iconName = isFocused ? iconName : `${iconName}-outline`;
+        const baseIcon = tabConfig?.baseIcon || "home";
+        const iconName = (isFocused ? baseIcon : `${baseIcon}-outline`) as keyof typeof Ionicons.glyphMap;
 
         return (
           <TabItem

package/templates/layers/react-native/base/src/components/ui/CustomTabBar.tsx

@@ -6,15 +6,23 @@ import { useColorScheme } from "nativewind";
 import { Colors } from "../../constants/Colors";
 import { getTabConfig } from "../../config/tabNavigation";
 import { LinearGradient } from "expo-linear-gradient";
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+
+interface TabItemProps {
+  isFocused: boolean;
+  onPress: () => void;
+  onLongPress: () => void;
+  iconName: keyof typeof Ionicons.glyphMap;
+  colors: (typeof Colors)[keyof typeof Colors];
+}
 
 const TabItem = ({
   isFocused,
   onPress,
   onLongPress,
   iconName,
-  label,
   colors,
-}: any) => {
+}: TabItemProps) => {
   return (
     <TouchableOpacity
       accessibilityRole="button"
@@ -39,7 +47,7 @@ const TabItem = ({
           ]}
         >
           <Ionicons
-            name={iconName as any}
+            name={iconName}
             size={isFocused ? 20 : 24}
             color={isFocused ? colors.primaryContent : colors.secondary}
           />
@@ -49,25 +57,10 @@ const TabItem = ({
   );
 };
 
-const CenterButton = ({ colors, onPress }: any) => {
-  return (
-    <View style={styles.centerButtonWrapper}>
-      <TouchableOpacity
-        activeOpacity={0.9}
-        onPress={onPress}
-        style={[
-          styles.centerButton,
-          {
-            backgroundColor: colors.primary,
-            shadowColor: colors.primary,
-          },
-        ]}
-      >
-        <Ionicons name="add" size={32} color={colors.primaryContent} />
-      </TouchableOpacity>
-    </View>
-  );
-};
+export interface CustomTabBarProps extends BottomTabBarProps {
+  showCenterButton?: boolean;
+  onCenterButtonPress?: () => void;
+}
 
 export default function CustomTabBar({
   state,
@@ -75,7 +68,7 @@ export default function CustomTabBar({
   navigation,
   showCenterButton = true,
   onCenterButtonPress,
-}: any) {
+}: CustomTabBarProps) {
   const insets = useSafeAreaInsets();
   const { colorScheme } = useColorScheme();
   const colors = Colors[colorScheme ?? "light"];
@@ -86,7 +79,8 @@ export default function CustomTabBar({
     return null;
   }
 
-  const bottomOffset = insets.bottom > 0 ? insets.bottom : 20;
+  // Since we are using a global SafeAreaView, we don't need to manually add bottom safe area
+  const bottomOffset = insets.bottom > 0 ? 5 : 20; // Just a small spacing above the global safe area
   const totalTabBarHeight = bottomOffset + 70; // 70 is the height of the tab bar container
 
   return (
@@ -113,63 +107,80 @@ export default function CustomTabBar({
           },
         ]}
       >
-        {state.routes.map((route: any, index: number) => {
-          const { options } = descriptors[route.key];
-          if (
-            options.href === null ||
-            options.tabBarItemStyle?.display === "none"
-          )
-            return null;
-
-          const tabConfig = getTabConfig(route.name);
-          const label =
-            options.tabBarLabel !== undefined
-              ? options.tabBarLabel
-              : options.title !== undefined
-                ? options.title
-                : tabConfig?.title || route.name;
-
-          const isFocused = state.index === index;
-
-          const onPress = () => {
-            const event = navigation.emit({
-              type: "tabPress",
-              target: route.key,
-              canPreventDefault: true,
-            });
-
-            if (!isFocused && !event.defaultPrevented) {
-              navigation.navigate(route.name, route.params);
+        {(() => {
+          const children: React.ReactNode[] = [];
+
+          state.routes.forEach((route, index: number) => {
+            const { options } = descriptors[route.key];
+            if (
+              options.href === null ||
+              options.tabBarItemStyle?.display === "none"
+            ) {
+              return;
+            }
+
+            const tabConfig = getTabConfig(route.name);
+            const label =
+              options.tabBarLabel !== undefined
+                ? options.tabBarLabel
+                : options.title !== undefined
+                  ? options.title
+                  : tabConfig?.title || route.name;
+
+            const isFocused = state.index === index;
+
+            const onPress = () => {
+              const event = navigation.emit({
+                type: "tabPress",
+                target: route.key,
+                canPreventDefault: true,
+              });
+
+              if (!isFocused && !event.defaultPrevented) {
+                navigation.navigate(route.name, route.params);
+              }
+            };
+
+            const onLongPress = () => {
+              navigation.emit({
+                type: "tabLongPress",
+                target: route.key,
+              });
+            };
+
+            const baseIcon = tabConfig?.baseIcon || "home";
+            const iconName = (isFocused ? baseIcon : `${baseIcon}-outline`) as keyof typeof Ionicons.glyphMap;
+
+            if (
+              showCenterButton &&
+              index === Math.floor(state.routes.length / 2)
+            ) {
+              children.push(
+                <TabItem
+                  key="center-btn"
+                  isFocused={false}
+                  onPress={onCenterButtonPress}
+                  iconName="add"
+                  colors={colors}
+                />,
+              );
             }
-          };
-
-          const onLongPress = () => {
-            navigation.emit({
-              type: "tabLongPress",
-              target: route.key,
-            });
-          };
-
-          let iconName: any = tabConfig?.baseIcon || "home";
-          iconName = isFocused ? iconName : `${iconName}-outline`;
-
-          return (
-            <React.Fragment key={route.key}>
-              {showCenterButton &&
-                index === Math.floor(state.routes.length / 2) && (
-                  <CenterButton colors={colors} onPress={onCenterButtonPress} />
-                )}
+
+            children.push(
               <TabItem
+                key={route.key}
                 isFocused={isFocused}
                 onPress={onPress}
                 onLongPress={onLongPress}
                 iconName={iconName}
                 label={label as string}
                 colors={colors}
-              />
-            </React.Fragment>
-          );
-        })}
+              />,
+            );
+          });
+
+          return children;
+        })()}
       </View>
     </View>
   );
@@ -218,21 +229,4 @@ const styles = StyleSheet.create({
     position: "absolute",
     bottom: -6,
   },
-  centerButtonWrapper: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  centerButton: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: -40,
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.4,
-    shadowRadius: 15,
-    elevation: 15,
-  },
 });

package/templates/layers/react-native/base/src/components/ui/Drawer.tsx

@@ -0,0 +1,344 @@
+import React, { useEffect, useState } from "react";
+import {
+  View,
+  TouchableWithoutFeedback,
+  Dimensions,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  BackHandler,
+  ViewStyle,
+} from "react-native";
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS,
+} from "react-native-reanimated";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Portal } from "react-native-paper";
+import { useColorScheme } from "nativewind";
+import { Colors } from "../../constants/Colors";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
+
+export type DrawerPosition = "top" | "bottom" | "left" | "right";
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  position?: DrawerPosition;
+  sizePercent?: number; // e.g. 0.5 for 50% of the screen height (top/bottom) or width (left/right)
+  heightPercent?: number; // backwards compatibility alias for top/bottom
+  widthPercent?: number; // backwards compatibility alias for left/right
+  showHandle?: boolean;
+  zIndex?: number;
+}
+
+export default function Drawer({
+  isOpen,
+  onClose,
+  children,
+  position = "bottom",
+  sizePercent,
+  heightPercent,
+  widthPercent,
+  showHandle = true,
+  zIndex = 50,
+}: DrawerProps) {
+  const { colorScheme } = useColorScheme();
+  const colors = Colors[colorScheme ?? "light"];
+  const insets = useSafeAreaInsets();
+
+  const isVertical = position === "top" || position === "bottom";
+  const defaultPercent = isVertical ? 0.5 : 0.75;
+  const resolvedPercent =
+    sizePercent ??
+    (isVertical ? heightPercent : widthPercent) ??
+    defaultPercent;
+
+  const DRAWER_SIZE = isVertical
+    ? SCREEN_HEIGHT * resolvedPercent
+    : SCREEN_WIDTH * resolvedPercent;
+
+  const getClosedOffset = () => {
+    switch (position) {
+      case "top":
+      case "left":
+        return -DRAWER_SIZE;
+      case "bottom":
+      case "right":
+        return DRAWER_SIZE;
+    }
+  };
+
+  const translate = useSharedValue(getClosedOffset());
+  const backdropOpacity = useSharedValue(0);
+  const [isRendered, setIsRendered] = useState(false);
+
+  if (isOpen && !isRendered) {
+    setIsRendered(true);
+  }
+
+  useEffect(() => {
+    const closedOffset = getClosedOffset();
+    if (isOpen) {
+      translate.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.out(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0.4, { duration: 300 });
+    } else {
+      translate.value = withTiming(closedOffset, {
+        duration: 300,
+        easing: Easing.in(Easing.ease),
+      });
+      backdropOpacity.value = withTiming(0, { duration: 300 }, (finished) => {
+        if (finished) {
+          runOnJS(setIsRendered)(false);
+        }
+      });
+    }
+  }, [isOpen, DRAWER_SIZE, position]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const backAction = () => {
+      onClose();
+      return true;
+    };
+
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      backAction
+    );
+
+    return () => backHandler.remove();
+  }, [isOpen, onClose]);
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((event) => {
+      if (position === "bottom") {
+        if (event.translationY > 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "top") {
+        if (event.translationY < 0) {
+          translate.value = event.translationY;
+        }
+      } else if (position === "left") {
+        if (event.translationX < 0) {
+          translate.value = event.translationX;
+        }
+      } else if (position === "right") {
+        if (event.translationX > 0) {
+          translate.value = event.translationX;
+        }
+      }
+    })
+    .onEnd((event) => {
+      let shouldClose = false;
+      if (position === "bottom") {
+        shouldClose =
+          event.translationY > DRAWER_SIZE * 0.3 || event.velocityY > 500;
+      } else if (position === "top") {
+        shouldClose =
+          event.translationY < -DRAWER_SIZE * 0.3 || event.velocityY < -500;
+      } else if (position === "left") {
+        shouldClose =
+          event.translationX < -DRAWER_SIZE * 0.3 || event.velocityX < -500;
+      } else if (position === "right") {
+        shouldClose =
+          event.translationX > DRAWER_SIZE * 0.3 || event.velocityX > 500;
+      }
+
+      if (shouldClose) {
+        runOnJS(onClose)();
+      } else {
+        translate.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.out(Easing.ease),
+        });
+      }
+    });
+
+  const drawerAnimatedStyle = useAnimatedStyle(() => {
+    if (position === "left" || position === "right") {
+      return {
+        transform: [{ translateX: translate.value }],
+      };
+    }
+    return {
+      transform: [{ translateY: translate.value }],
+    };
+  });
+
+  const backdropAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: backdropOpacity.value,
+  }));
+
+  const getContainerStyle = (): ViewStyle => {
+    const baseShadow: ViewStyle = {
+      backgroundColor: colors.base100,
+      elevation: 24,
+      shadowColor: "#000",
+      shadowOpacity: 0.15,
+      shadowRadius: 15,
+    };
+
+    switch (position) {
+      case "top":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderBottomLeftRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 0, height: 5 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+        };
+      case "bottom":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderTopRightRadius: 30,
+          shadowOffset: { width: 0, height: -5 },
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+        };
+      case "left":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: DRAWER_SIZE,
+          borderTopRightRadius: 30,
+          borderBottomRightRadius: 30,
+          shadowOffset: { width: 5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingLeft: insets.left > 0 ? insets.left : 0,
+        };
+      case "right":
+        return {
+          ...baseShadow,
+          position: "absolute",
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: DRAWER_SIZE,
+          borderTopLeftRadius: 30,
+          borderBottomLeftRadius: 30,
+          shadowOffset: { width: -5, height: 0 },
+          paddingTop: insets.top > 0 ? insets.top : 20,
+          paddingBottom: insets.bottom > 0 ? insets.bottom : 20,
+          paddingRight: insets.right > 0 ? insets.right : 0,
+        };
+    }
+  };
+
+  if (!isRendered && !isOpen) return null;
+
+  return (
+    <Portal>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={[StyleSheet.absoluteFill, { zIndex }]}>
+          {/* Backdrop Overlay */}
+          <TouchableWithoutFeedback onPress={onClose}>
+            <Animated.View
+              style={[
+                StyleSheet.absoluteFill,
+                { backgroundColor: "#000" },
+                backdropAnimatedStyle,
+              ]}
+            />
+          </TouchableWithoutFeedback>
+
+          {/* Sliding Drawer Panel */}
+          <Animated.View style={[getContainerStyle(), drawerAnimatedStyle]}>
+            {position === "bottom" && (
+              <View className="flex-1">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-t-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+
+            {position === "top" && (
+              <View className="flex-1">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="items-center pt-4 pb-6 bg-base-100 rounded-b-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-16 h-1.5 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "left" && (
+              <View className="flex-1 flex-row">
+                <View className="flex-1 px-6">{children}</View>
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-r-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+              </View>
+            )}
+
+            {position === "right" && (
+              <View className="flex-1 flex-row">
+                {showHandle && (
+                  <GestureDetector gesture={panGesture}>
+                    <View
+                      className="justify-center items-center px-3 bg-base-100 rounded-l-[30px]"
+                      style={{ zIndex: 10 }}
+                    >
+                      <View className="w-1.5 h-16 rounded-full bg-base-300" />
+                    </View>
+                  </GestureDetector>
+                )}
+                <View className="flex-1 px-6">{children}</View>
+              </View>
+            )}
+          </Animated.View>
+        </View>
+      </KeyboardAvoidingView>
+    </Portal>
+  );
+}

package/templates/layers/react-native/base/src/components/ui/Sidebar.tsx

@@ -21,7 +21,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useAuthStore } from "../../store/useAuthStore";
 import { sidebarConfig } from "../../config/sidebar.config";
-import { router } from "expo-router";
+import { router, type Href } from "expo-router";
 import Image from "./data-display/Image";
 
 const { width } = Dimensions.get("window");
@@ -40,10 +40,10 @@ const MenuItem = ({
   onPress,
   colors,
 }: {
-  icon: any;
+  icon: keyof typeof Ionicons.glyphMap;
   label: string;
   onPress?: () => void;
-  colors: any;
+  colors: (typeof Colors)[keyof typeof Colors];
 }) => (
   <TouchableOpacity
     activeOpacity={0.7}
@@ -217,7 +217,7 @@ export default function Sidebar({
                     label={item.label}
                     onPress={() => {
                       onClose();
-                      router.push(item.route as any);
+                      router.push(item.route as Href);
                     }}
                     colors={colors}
                   />