expo-app-ui 1.0.3 → 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.3",
+  "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/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,
   },
 });