expo-app-ui 1.0.2 → 1.0.4

package/README.md

@@ -2,6 +2,19 @@
 
 A UI component library for Expo React Native. Copy components directly into your project and customize them to your needs.
 
+## Component Showcase
+
+<div align="center">
+  
+<img src="https://expo-apps-ui.vercel.app/examples/buttons-example.png" alt="Button Component" width="150" />
+<img src="https://expo-apps-ui.vercel.app/examples/custom-modal-example.gif" alt="Custom Modal" width="150" />
+<img src="https://expo-apps-ui.vercel.app/examples/otp-input-example.gif" alt="OTP Input" width="150" />
+<img src="https://expo-apps-ui.vercel.app/examples/top-loading-bar-example.gif" alt="Top Loading Bar" width="150" />
+
+*Button • Custom Modal • OTP Input • Loading Bar*
+
+</div>
+
 ## 📚 Documentation
 
 **👉 [View Full Documentation →](https://expo-apps-ui.vercel.app)**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-app-ui",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "A UI component library for Expo React Native. Copy components directly into your project and customize them to your needs. Documentation: https://expo-apps-ui.vercel.app",
   "main": "index.js",
   "bin": {

package/src/commands/add.js

@@ -153,7 +153,20 @@ async function addComponent(componentName, options = {}) {
   const packageDir = getPackageDir();
   const templatesDir = path.join(packageDir, 'templates');
   
+  // Track processing to prevent circular dependencies
+  const processingSet = options.processingSet || new Set();
   const kebabName = toKebabCase(componentName);
+  
+  // Check if already processing this component to prevent infinite loops
+  const itemKey = `component:${kebabName}`;
+  if (processingSet.has(itemKey)) {
+    logger.debug(`Skipping ${componentName} - already being processed`);
+    return true;
+  }
+  
+  // Mark as processing
+  processingSet.add(itemKey);
+  
   const templatePath = path.join(templatesDir, 'components', 'ui', `${kebabName}.tsx`);
   const targetPath = path.join(config.getComponentsDir(), `${kebabName}.tsx`);
 
@@ -182,12 +195,17 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
-    // Check for related context
-    const relatedContext = detectRelatedContext(kebabName, templatesDir);
-    if (relatedContext) {
-      const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
-      if (!fs.existsSync(contextPath)) {
-        dependenciesToAdd.push(`${relatedContext} context`);
+    // Check for related context (but skip if already processing to prevent loops)
+    // Only check if we're not being called from addContext (to prevent circular detection)
+    let relatedContext = null;
+    if (!options.skipRelatedCheck) {
+      relatedContext = detectRelatedContext(kebabName, templatesDir);
+      if (relatedContext) {
+        const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
+        const contextKey = `context:${relatedContext}`;
+        if (!fs.existsSync(contextPath) && !processingSet.has(contextKey)) {
+          dependenciesToAdd.push(`${relatedContext} context`);
+        }
       }
     }
 
@@ -222,15 +240,19 @@ async function addComponent(componentName, options = {}) {
       }
     }
 
-    // Add related context if needed
-    if (relatedContext) {
+    // Add related context if needed (pass processingSet to prevent loops)
+    // Only add if we're not being called from addContext (to prevent circular detection)
+    if (!options.skipRelatedCheck && relatedContext) {
       const contextPath = path.join(projectRoot, 'context', `${relatedContext}.tsx`);
-      if (!fs.existsSync(contextPath)) {
+      const contextKey = `context:${relatedContext}`;
+      if (!fs.existsSync(contextPath) && !processingSet.has(contextKey)) {
         await addContext(relatedContext, {
           logger,
           config,
           silent: false,
           overwrite: false,
+          processingSet,
+          skipRelatedCheck: true, // Prevent context from checking for related component again
         });
       }
     }
@@ -282,7 +304,20 @@ async function addContext(contextName, options = {}) {
   const packageDir = getPackageDir();
   const templatesDir = path.join(packageDir, 'templates');
   
+  // Track processing to prevent circular dependencies
+  const processingSet = options.processingSet || new Set();
   const kebabName = toKebabCase(contextName);
+  
+  // Check if already processing this context to prevent infinite loops
+  const itemKey = `context:${kebabName}`;
+  if (processingSet.has(itemKey)) {
+    logger.debug(`Skipping ${contextName} - already being processed`);
+    return true;
+  }
+  
+  // Mark as processing
+  processingSet.add(itemKey);
+  
   const templatePath = path.join(templatesDir, 'context', `${kebabName}.tsx`);
   const contextDir = path.join(projectRoot, 'context');
   const targetPath = path.join(contextDir, `${kebabName}.tsx`);
@@ -295,13 +330,14 @@ async function addContext(contextName, options = {}) {
     // Detect dependencies including related component
     const dependencies = detectDependencies(content);
     
-    // Check for related component
+    // Check for related component (but skip if already processing to prevent loops)
     const relatedComponent = detectRelatedComponent(kebabName, templatesDir);
     const dependenciesToAdd = [];
     
     if (relatedComponent) {
       const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
-      if (!fs.existsSync(componentPath)) {
+      const componentKey = `component:${relatedComponent}`;
+      if (!fs.existsSync(componentPath) && !processingSet.has(componentKey)) {
         dependenciesToAdd.push(`${relatedComponent} component`);
       }
     }
@@ -312,15 +348,19 @@ async function addContext(contextName, options = {}) {
       logger.debug('Adding required dependencies...\n');
     }
 
-    // Add related component if needed
+    // Add related component if needed (pass processingSet to prevent loops)
+    // Skip related check to prevent circular detection
     if (relatedComponent) {
       const componentPath = path.join(config.getComponentsDir(), `${relatedComponent}.tsx`);
-      if (!fs.existsSync(componentPath)) {
+      const componentKey = `component:${relatedComponent}`;
+      if (!fs.existsSync(componentPath) && !processingSet.has(componentKey)) {
         await addComponent(relatedComponent, {
           logger,
           config,
           silent: false,
           overwrite: false,
+          processingSet,
+          skipRelatedCheck: true, // Prevent component from checking for related context again
         });
       }
     }
@@ -456,10 +496,13 @@ async function handleAdd(name, options = {}) {
     return await addTopLoadingBar({ logger, config, overwrite });
   }
   
+  // Initialize processing set to track items and prevent circular dependencies
+  const processingSet = new Set();
+  
   // Check if it's a component (look in components/ui/)
   const componentPath = path.join(templatesDir, 'components', 'ui', `${kebabName}.tsx`);
   if (fs.existsSync(componentPath)) {
-    return await addComponent(name, { logger, config, overwrite });
+    return await addComponent(name, { logger, config, overwrite, processingSet });
   }
 
   // Check if it's a helper
@@ -478,11 +521,11 @@ async function handleAdd(name, options = {}) {
   const contextPathKebab = path.join(templatesDir, 'context', `${kebabName}.tsx`);
   const contextPathPascal = path.join(templatesDir, 'context', `${toPascalCase(kebabName)}.tsx`);
   if (fs.existsSync(contextPathKebab)) {
-    return await addContext(name, { logger, config, overwrite });
+    return await addContext(name, { logger, config, overwrite, processingSet });
   } else if (fs.existsSync(contextPathPascal)) {
     // Use the actual file name
     const actualName = path.basename(contextPathPascal, '.tsx');
-    return await addContext(actualName, { logger, config, overwrite });
+    return await addContext(actualName, { logger, config, overwrite, processingSet });
   }
 
   // Not found

package/src/utils/pathUtils.js

@@ -55,38 +55,121 @@ function validatePath(filePath, baseDir) {
   return resolved;
 }
 
+// Cache the package directory to avoid repeated lookups
+let cachedPackageDir = null;
+
 /**
  * Get package directory - works from any context
  * @returns {string} Package directory path
  */
 function getPackageDir() {
-  // Start from the current file's directory
+  // Return cached value if available
+  if (cachedPackageDir) {
+    return cachedPackageDir;
+  }
+  
+  // Strategy 1: Use require.main.filename (works when running as CLI via npx or node)
+  // When running via npx, require.main points to the bin script
+  try {
+    if (require.main && require.main.filename) {
+      let currentDir = path.dirname(require.main.filename);
+      
+      // Search up from bin script location
+      let depth = 0;
+      while (currentDir !== path.dirname(currentDir) && depth < 10) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+          try {
+            const pkg = fs.readJsonSync(packageJsonPath);
+            if (pkg.name === 'expo-app-ui') {
+              const templatesPath = path.join(currentDir, 'templates');
+              if (fs.existsSync(templatesPath)) {
+                cachedPackageDir = currentDir;
+                return cachedPackageDir;
+              }
+            }
+          } catch (err) {
+            // Continue searching
+          }
+        }
+        currentDir = path.dirname(currentDir);
+        depth++;
+      }
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 2: Try require.resolve for package.json (works when installed via npm/npx)
+  try {
+    const packageJsonPath = require.resolve('expo-app-ui/package.json', { paths: [process.cwd(), __dirname] });
+    cachedPackageDir = path.dirname(packageJsonPath);
+    // Verify it has templates directory
+    const templatesPath = path.join(cachedPackageDir, 'templates');
+    if (fs.existsSync(templatesPath)) {
+      return cachedPackageDir;
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 3: Use relative path from current file (works for local development)
+  try {
+    // Go up from src/utils/pathUtils.js to package root
+    let currentDir = path.dirname(path.dirname(__dirname));
+    
+    const packageJsonPath = path.join(currentDir, 'package.json');
+    const templatesPath = path.join(currentDir, 'templates');
+    if (fs.existsSync(packageJsonPath) && fs.existsSync(templatesPath)) {
+      try {
+        const pkg = fs.readJsonSync(packageJsonPath);
+        if (pkg.name === 'expo-app-ui') {
+          cachedPackageDir = currentDir;
+          return cachedPackageDir;
+        }
+      } catch (err) {
+        // Continue to next strategy
+      }
+    }
+  } catch (error) {
+    // Continue to next strategy
+  }
+  
+  // Strategy 3: Search from current file's directory
   let currentDir = __dirname;
   
-  // If we're in src/utils, go up to project root
-  // If we're in bin/, go up to project root
+  // If we're in src/utils or src/commands, go up two levels
+  if (currentDir.endsWith(path.join('src', 'utils')) || currentDir.endsWith(path.join('src', 'commands'))) {
+    currentDir = path.dirname(path.dirname(currentDir));
+  } else if (currentDir.includes(path.sep + 'src' + path.sep)) {
+    currentDir = path.dirname(currentDir);
+  }
+  
+  // Verify and search up if needed
   while (currentDir !== path.dirname(currentDir)) {
     const packageJsonPath = path.join(currentDir, 'package.json');
     if (fs.existsSync(packageJsonPath)) {
       try {
         const pkg = fs.readJsonSync(packageJsonPath);
-        if (pkg.bin && (pkg.bin['expo-app-ui'] || pkg.name === 'expo-app-ui')) {
-          return currentDir;
+        if (pkg.name === 'expo-app-ui') {
+          cachedPackageDir = currentDir;
+          return cachedPackageDir;
         }
-      } catch (error) {
+      } catch (err) {
         // Continue searching
       }
     }
     currentDir = path.dirname(currentDir);
   }
   
-  // Fallback: if we're in src/utils, go up two levels
+  // Final fallback (shouldn't normally reach here)
   if (__dirname.includes('src')) {
-    return path.dirname(path.dirname(__dirname));
+    cachedPackageDir = path.dirname(path.dirname(__dirname));
+  } else {
+    cachedPackageDir = path.dirname(__dirname);
   }
   
-  // If we're in bin/, go up one level
-  return path.dirname(__dirname);
+  return cachedPackageDir;
 }
 
 /**

package/templates/components/ui/button.tsx

@@ -7,9 +7,8 @@ import {
   TextStyle,
   TouchableOpacityProps,
 } from "react-native";
-import { colors, fonts, size } from "@/constants/theme";
+
 import { ActivityIndicator } from "react-native";
-import { normalizeSize } from "@/helper/normalizeSize";
 
 type ButtonVariant = {
   backgroundColor?: string;
@@ -62,11 +61,11 @@ const Button = ({
   IconCenter, // New IconCenter prop
   style, // Custom style for the button container
   textStyle, // Custom style for the text
-  fontSize = normalizeSize(size.md), // Default font size
+  fontSize = 18, // Default font size
   fontWeight = "normal", // Default font weight
   textColor = "#fff", // Default text color
   borderColor = "#d3d3d3",
-  bgColor = colors.primary, // Default background color
+  bgColor = "black", // Default background color
   hideTextWithCenterIcon = false, // Default to false (show text with center icon)
   ...props
 }: ButtonPropsExtended) => {
@@ -171,7 +170,7 @@ const Button = ({
                 styles.buttonText,
                 {
                   color: variantStyles.textColor,
-                  fontFamily: fonts.inter,
+                  // fontFamily: fonts.inter, // Commented out to avoid using fonts.inter
                   // Hide text visually (but keep it for screen readers) if IconCenter is present and hideTextWithCenterIcon is true
                   opacity: IconCenter && hideTextWithCenterIcon ? 0 : 1,
                 },

package/templates/components/ui/custom-modal.tsx

@@ -6,8 +6,11 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   useWindowDimensions,
-  StyleProp, // Import StyleProp
-  ViewStyle, // Import ViewStyle
+  StyleProp,
+  ViewStyle,
+  Keyboard,
+  Platform,
+  BackHandler,
 } from "react-native";
 import Animated, {
   useSharedValue,
@@ -17,14 +20,25 @@ import Animated, {
   runOnJS,
 } from "react-native-reanimated";
 
+// Default colors - using black and white as defaults
+const defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  backdrop: "rgba(0, 0, 0, 0.5)",
+};
+
 // Define the props interface
 interface CustomModalProps {
   visible: boolean;
   onClose: () => void;
   preventBackgroundTouchEvent?: boolean;
   children: React.ReactNode;
-  style?: StyleProp<ViewStyle>; // <-- Prop for root container
-  modalStyle?: StyleProp<ViewStyle>; // <-- Prop for the content box
+  style?: StyleProp<ViewStyle>; // Prop for root container
+  modalStyle?: StyleProp<ViewStyle>; // Prop for the content box
+  noBackdrop?: boolean; // Hide backdrop
+  backgroundColor?: string; // Modal background color
+  backdropColor?: string; // Backdrop color
+  borderRadius?: number; // Border radius for modal
 }
 
 const MODAL_ANIMATION_DURATION = 300;
@@ -36,27 +50,106 @@ const CustomModal: React.FC<CustomModalProps> = ({
   onClose,
   preventBackgroundTouchEvent,
   children,
-  style, // <-- Destructure new prop
-  modalStyle, // <-- Destructure new prop
+  style,
+  modalStyle,
+  noBackdrop = false,
+  backgroundColor = defaultColors.white,
+  backdropColor = defaultColors.backdrop,
+  borderRadius = 15,
 }) => {
   const { height } = useWindowDimensions();
 
   const [isModalRendered, setIsModalRendered] = useState(visible);
   const backdropOpacity = useSharedValue(0);
   const modalTranslateY = useSharedValue(height);
+  const keyboardOffset = useSharedValue(0);
+
+  // Check if modal is positioned at bottom (bottom sheet style)
+  const flattenedStyle = style ? StyleSheet.flatten(style) : {};
+  const isBottomSheet = (flattenedStyle as any)?.justifyContent === "flex-end";
 
   const backdropAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: backdropOpacity.value,
+    opacity: noBackdrop ? 0 : backdropOpacity.value,
   }));
 
-  const modalAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: modalTranslateY.value }],
-  }));
+  const modalAnimatedStyle = useAnimatedStyle(() => {
+    if (isBottomSheet) {
+      // For bottom sheets, position at bottom and translate from below
+      // Subtract keyboardOffset to move modal up when keyboard appears
+      return {
+        transform: [
+          {
+            translateY: modalTranslateY.value - keyboardOffset.value,
+          },
+        ],
+      };
+    }
+    // For centered modals, use standard transform
+    return {
+      transform: [{ translateY: modalTranslateY.value - keyboardOffset.value }],
+    };
+  });
+
+  // Handle Android back button
+  useEffect(() => {
+    if (!visible) return;
+
+    const backHandler = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => {
+        if (!preventBackgroundTouchEvent) {
+          onClose();
+          return true; // Prevent default back behavior
+        }
+        return false; // Allow default back behavior if preventBackgroundTouchEvent is true
+      }
+    );
+
+    return () => backHandler.remove();
+  }, [visible, preventBackgroundTouchEvent, onClose]);
+
+  // Handle keyboard events for bottom sheet modals
+  useEffect(() => {
+    if (!visible || !isBottomSheet) {
+      // Reset keyboard offset when modal is not visible or not a bottom sheet
+      keyboardOffset.value = 0;
+      return;
+    }
+
+    const showEvent =
+      Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent =
+      Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+
+    const keyboardWillShowListener = Keyboard.addListener(showEvent, (e) => {
+      const keyboardHeight = e.endCoordinates.height;
+      keyboardOffset.value = withTiming(keyboardHeight, {
+        duration: Platform.OS === "ios" ? e.duration || 250 : 250,
+        easing: Easing.out(Easing.ease),
+      });
+    });
+
+    const keyboardWillHideListener = Keyboard.addListener(hideEvent, () => {
+      keyboardOffset.value = withTiming(0, {
+        duration: 250,
+        easing: Easing.out(Easing.ease),
+      });
+    });
+
+    return () => {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, [visible, isBottomSheet, keyboardOffset]);
 
   useEffect(() => {
     if (visible) {
       setIsModalRendered(true);
-      backdropOpacity.value = withTiming(0.5, {
+      // Ensure modalTranslateY starts from height for bottom sheets
+      if (isBottomSheet) {
+        modalTranslateY.value = height;
+      }
+      backdropOpacity.value = withTiming(noBackdrop ? 0 : 0.5, {
         duration: MODAL_ANIMATION_DURATION,
         easing: backdropEasing,
       });
@@ -69,6 +162,10 @@ const CustomModal: React.FC<CustomModalProps> = ({
         duration: MODAL_ANIMATION_DURATION,
         easing: backdropEasing,
       });
+      keyboardOffset.value = withTiming(0, {
+        duration: MODAL_ANIMATION_DURATION,
+        easing: modalEasing,
+      });
       modalTranslateY.value = withTiming(
         height,
         {
@@ -82,23 +179,46 @@ const CustomModal: React.FC<CustomModalProps> = ({
         }
       );
     }
-  }, [visible, height, backdropOpacity, modalTranslateY]);
+  }, [visible, height, isBottomSheet, backdropOpacity, modalTranslateY, keyboardOffset, noBackdrop]);
 
   if (!isModalRendered) {
     return null;
   }
 
   return (
-    // Apply the custom root 'style' prop here
     <Animated.View style={[styles.container, style]}>
-      {!preventBackgroundTouchEvent && (
-        <TouchableWithoutFeedback onPress={onClose}>
-          <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
+      {!noBackdrop && (
+        <TouchableWithoutFeedback
+          onPress={() => {
+            // By default, backdrop touch closes the modal
+            // Only prevent if explicitly set to true
+            if (!preventBackgroundTouchEvent) {
+              onClose();
+            }
+          }}
+        >
+          <Animated.View
+            style={[
+              styles.backdrop,
+              { backgroundColor: backdropColor },
+              backdropAnimatedStyle,
+            ]}
+          />
         </TouchableWithoutFeedback>
       )}
 
-      {/* Apply the custom 'modalStyle' prop here */}
-      <Animated.View style={[styles.modalView, modalAnimatedStyle, modalStyle]}>
+      <Animated.View
+        style={[
+          styles.modalView,
+          {
+            backgroundColor,
+            borderRadius: isBottomSheet ? borderRadius : borderRadius,
+            ...(isBottomSheet && styles.modalViewBottomSheet),
+          },
+          modalAnimatedStyle,
+          modalStyle,
+        ]}
+      >
         {children}
       </Animated.View>
     </Animated.View>
@@ -112,25 +232,38 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    // Changed to 'flex-end' to act like a bottom-sheet
     justifyContent: "center",
     alignItems: "center",
     zIndex: 1000,
   },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: "rgba(0, 0, 0, 0.8)",
   },
   modalView: {
-    // We keep your default styles
-    // backgroundColor: 'white', // Good to apply this in the App.tsx
-    borderTopLeftRadius: 10, // Added top radius for bottom-sheet look
-    borderTopRightRadius: 10, // Added top radius for bottom-sheet look
-    padding: 10,
+    padding: 20,
+    width: "90%",
+    maxWidth: 500,
+    maxHeight: "80%",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  modalViewBottomSheet: {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    right: 0,
     width: "100%",
-    maxHeight: "100%",
-    // justifyContent: "center",
-    // alignItems: "center",
+    maxWidth: "100%",
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
   },
 });
 

package/templates/components/ui/profile-pic.tsx

@@ -1,7 +1,13 @@
-import { ActivityIndicator, View, ViewStyle } from "react-native";
+import React from "react";
+import { ActivityIndicator, View, ViewStyle, Text } from "react-native";
 import { Image } from "expo-image";
-import { colors, size } from "@/constants/theme";
-import CustomText from "@/components/ui/CustomText";
+
+// Default colors - using black and white as defaults
+const defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  primary: "#000000", // Default to black
+};
 
 interface ProfilePicProps {
   source?: string;
@@ -24,10 +30,10 @@ const ProfilePic = ({
   username,
   width = 50,
   height = 50,
-  borderColor = colors.white,
+  borderColor = defaultColors.white,
   borderWidth = 1,
   borderRadius = 50,
-  backgroundColor = colors.primary,
+  backgroundColor = defaultColors.primary,
   isLoading = false,
   style,
 }: ProfilePicProps) => {
@@ -47,8 +53,7 @@ const ProfilePic = ({
     return (
       <View style={[combinedStyle, style]}>
         <ActivityIndicator
-          color={colors.white}
-          // style={{ borderColor: colors.white }}
+          color={defaultColors.white}
         />
       </View>
     );
@@ -65,9 +70,15 @@ const ProfilePic = ({
           transition={1000}
         />
       ) : (
-        <CustomText color={colors.white} fontSize={size.lg}>
+        <Text
+          style={{
+            color: defaultColors.white,
+            fontSize: 20,
+          }}
+          allowFontScaling={false}
+        >
           {username ? username.charAt(0).toUpperCase() : "Z"}
-        </CustomText>
+        </Text>
       )}
     </View>
   );

package/templates/components/ui/progress-bar.tsx

@@ -1,8 +1,13 @@
 import { useEffect, useRef } from "react";
 import { Animated, StyleSheet, Text, View } from "react-native";
-import BoxView from "@/components/ui/BoxView";
-import CustomText from "@/components/ui/CustomText";
-import { colors } from "@/constants/theme";
+
+// Default colors - using black and white as defaults
+const defaultColors = {
+  white: "#FFFFFF",
+  black: "#000000",
+  darkGray: "#1C1C1E",
+  forest_green: "#228B22", // Keep forest_green for progress bar
+};
 
 interface CustomProgressBarProps {
   progress?: number;
@@ -20,7 +25,7 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
   progress,
   width = 300,
   height = 20,
-  color = colors.forest_green,
+  color = defaultColors.forest_green,
   backgroundColor = "#e0e0e0",
   label = "",
   variant = "normal",
@@ -69,18 +74,33 @@ const CustomProgressBar: React.FC<CustomProgressBarProps> = ({
           ]}
         />
         {variant === "count" && (
-          <BoxView
-            flexDirection="row"
-            justifyContent="space-between"
-            style={{ position: "absolute", right: 10, left: 10, top: 5 }}
+          <View
+            style={{
+              position: "absolute",
+              right: 10,
+              left: 10,
+              top: 5,
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
           >
-            <CustomText color={colors.white} fontWeight="700">
+            <Text
+              style={{
+                color: defaultColors.white,
+                fontWeight: "700",
+              }}
+            >
               {currentCount}
-            </CustomText>
-            <CustomText color={colors.darkGray} fontWeight="700">
+            </Text>
+            <Text
+              style={{
+                color: defaultColors.darkGray,
+                fontWeight: "700",
+              }}
+            >
               {count}
-            </CustomText>
-          </BoxView>
+            </Text>
+          </View>
         )}
       </View>
     </View>