@umituz/react-native-design-system 2.9.9 → 2.9.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.9",
+  "version": "2.9.11",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, and onboarding utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/datepicker/components/DatePickerModal.tsx

@@ -99,7 +99,7 @@ export const DatePickerModal: React.FC<DatePickerModalProps> = ({
     <Modal
       visible={visible}
       transparent
-      animationType="slide"
+      animationType="none"
       onRequestClose={onClose}
       testID={`${testID}-modal`}
     >

package/src/atoms/picker/components/PickerModal.tsx

@@ -130,7 +130,7 @@ export const PickerModal: React.FC<PickerModalProps> = React.memo(({
   return (
     <Modal
       visible={visible}
-      animationType="slide"
+      animationType="none"
       transparent
       onRequestClose={onClose}
       testID={`${testID}-modal`}

package/src/image/presentation/components/ImageGallery.tsx

@@ -62,7 +62,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
                 source={{ uri: item.uri }}
                 style={styles.fullImage}
                 contentFit="contain"
-                transition={200}
+                transition={0}
                 cachePolicy="memory-disk"
             />
         </View>
@@ -74,7 +74,7 @@ export const ImageGallery: React.FC<ImageGalleryProps> = ({
         <Modal
             visible={visible}
             transparent
-            animationType="fade"
+            animationType="none"
             onRequestClose={onDismiss}
             statusBarTranslucent
         >

package/src/molecules/BaseModal.tsx

@@ -4,11 +4,13 @@
  * Used across all modals in the app for consistency
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { View, Modal, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { useAppDesignTokens } from '../theme';
 import { useResponsive } from '../responsive';
 
+declare const __DEV__: boolean;
+
 export interface BaseModalProps {
   visible: boolean;
   onClose: () => void;
@@ -29,6 +31,18 @@ export const BaseModal: React.FC<BaseModalProps> = ({
   const tokens = useAppDesignTokens();
   const { modalLayout } = useResponsive();
 
+  // Debug logging for modal visibility
+  useEffect(() => {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log("[BaseModal] Visibility changed:", {
+        visible,
+        testID,
+        modalWidth: modalLayout.width,
+        modalHeight: modalLayout.height,
+      });
+    }
+  }, [visible, testID, modalLayout.width, modalLayout.height]);
+
   const handleBackdropPress = React.useCallback(() => {
     if (dismissOnBackdrop) {
       onClose();
@@ -37,11 +51,15 @@ export const BaseModal: React.FC<BaseModalProps> = ({
 
   if (!visible) return null;
 
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    console.log("[BaseModal] Rendering modal content:", { testID });
+  }
+
   return (
     <Modal
       visible={visible}
       transparent
-      animationType="fade"
+      animationType="none"
       onRequestClose={onClose}
       statusBarTranslucent
       testID={testID}

package/src/molecules/alerts/AlertModal.tsx

@@ -36,7 +36,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         <Modal
             visible
             transparent
-            animationType="fade"
+            animationType="none"
             onRequestClose={handleClose}
         >
             <View style={styles.overlay}>

package/src/molecules/bottom-sheet/components/BottomSheet.tsx

@@ -96,7 +96,7 @@ export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>((props,
     <Modal
       visible={visible}
       transparent
-      animationType="slide"
+      animationType="none"
       onRequestClose={dismiss}
       statusBarTranslucent
     >

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -96,7 +96,7 @@ export const BottomSheetModal = forwardRef<BottomSheetModalRef, BottomSheetModal
       <Modal
         visible={visible}
         transparent
-        animationType="slide"
+        animationType="none"
         onRequestClose={dismiss}
         statusBarTranslucent
       >

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -43,7 +43,7 @@ export const FilterSheet: React.FC<FilterSheetProps> = ({
   }, [onFilterPress, onClose]);
 
   return (
-    <Modal visible={visible} transparent animationType="slide" onRequestClose={onClose}>
+    <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}>
       <Pressable style={styles.backdrop} onPress={onClose}>
         <Pressable
           style={[styles.sheet, { backgroundColor: tokens.colors.surface, paddingBottom: insets.bottom }]}

package/src/molecules/emoji/presentation/components/EmojiPicker.tsx

@@ -89,8 +89,6 @@ export const EmojiPicker: React.FC<EmojiPickerProps> = ({
       onEmojiSelected={handleEmojiSelect}
       open={open}
       onClose={onClose}
-      enableCategoryChangeAnimation={true}
-      enableSearchAnimation={true}
       categoryPosition="top"
       enableRecentlyUsed={config?.enableRecentlyUsed ?? true}
       enableSearchBar={config?.enableSearch ?? true}

package/src/offline/presentation/components/OfflineBanner.tsx

@@ -2,22 +2,17 @@
  * OfflineBanner Component
  *
  * Displays a banner when the device is offline.
- * Fully customizable for use across 100+ apps.
+ * Simple conditional rendering - NO animations per CLAUDE.md
  *
  * @example
  * ```tsx
- * import { OfflineBanner, useOffline } from '@umituz/react-native-offline';
+ * import { OfflineBanner, useOffline } from '@umituz/react-native-design-system';
  *
  * const App = () => {
  *   const { isOffline } = useOffline();
- *
  *   return (
  *     <>
- *       <OfflineBanner
- *         visible={isOffline}
- *         message="No internet connection"
- *         backgroundColor="#FF6B6B"
- *       />
+ *       <OfflineBanner visible={isOffline} message="No internet connection" />
  *       <YourContent />
  *     </>
  *   );
@@ -25,14 +20,8 @@
  * ```
  */
 
-import React, { useEffect, useRef, memo } from 'react';
-import {
-  View,
-  Animated,
-  StyleSheet,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
+import React, { memo } from 'react';
+import { View, StyleSheet, type ViewStyle, type TextStyle } from 'react-native';
 import { AtomicText } from '../../../atoms';
 
 export interface OfflineBannerProps {
@@ -52,14 +41,11 @@ export interface OfflineBannerProps {
   style?: ViewStyle;
   /** Custom text style */
   textStyle?: TextStyle;
-  /** Animation duration in ms */
-  animationDuration?: number;
   /** Height of the banner */
   height?: number;
 }
 
 const DEFAULT_HEIGHT = 44;
-const DEFAULT_ANIMATION_DURATION = 300;
 
 export const OfflineBanner: React.FC<OfflineBannerProps> = memo(({
   visible,
@@ -70,59 +56,23 @@ export const OfflineBanner: React.FC<OfflineBannerProps> = memo(({
   position = 'top',
   style,
   textStyle,
-  animationDuration = DEFAULT_ANIMATION_DURATION,
   height = DEFAULT_HEIGHT,
 }) => {
-  const animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  const isFirstRender = useRef(true);
-
-  useEffect(() => {
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      animatedValue.setValue(visible ? 1 : 0);
-      return;
-    }
-
-    Animated.timing(animatedValue, {
-      toValue: visible ? 1 : 0,
-      duration: animationDuration,
-      useNativeDriver: false,
-    }).start();
-  }, [visible, animatedValue, animationDuration]);
-
-  const translateY = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [position === 'top' ? -height : height, 0],
-  });
-
-  const animatedHeight = animatedValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, height],
-  });
-
-  const opacity = animatedValue.interpolate({
-    inputRange: [0, 0.5, 1],
-    outputRange: [0, 0.8, 1],
-  });
+  // Simple conditional rendering - no animations
+  if (!visible) {
+    return null;
+  }
 
-  const positionStyle: ViewStyle = position === 'top'
-    ? { top: 0 }
-    : { bottom: 0 };
+  const positionStyle: ViewStyle = position === 'top' ? { top: 0 } : { bottom: 0 };
 
   return (
-    <Animated.View
+    <View
       style={[
         styles.container,
         positionStyle,
-        {
-          backgroundColor,
-          height: animatedHeight,
-          transform: [{ translateY }],
-          opacity,
-        },
+        { backgroundColor, height },
         style,
       ]}
-      pointerEvents={visible ? 'auto' : 'none'}
     >
       <View style={styles.content}>
         {typeof icon === 'string' ? (
@@ -131,17 +81,13 @@ export const OfflineBanner: React.FC<OfflineBannerProps> = memo(({
           icon
         )}
         <AtomicText
-          style={[
-            styles.message,
-            { color: textColor },
-            textStyle,
-          ]}
+          style={[styles.message, { color: textColor }, textStyle]}
           numberOfLines={1}
         >
           {message}
         </AtomicText>
       </View>
-    </Animated.View>
+    </View>
   );
 });
 
@@ -153,7 +99,6 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     zIndex: 9999,
-    overflow: 'hidden',
   },
   content: {
     flex: 1,