@umituz/react-native-design-system 2.9.10 → 2.9.12

package/README.md

@@ -14,6 +14,28 @@ Universal design system for React Native apps following Domain-Driven Design (DD
 - 📦 **Zero Config** - Works out of the box
 - 🪶 **Lightweight** - Smaller bundle size (no Paper dependency)
 
+## 🚫 ABSOLUTE PROHIBITIONS (Zero Tolerance)
+
+### NO ANIMATIONS - EVER
+- ❌ `Animated` from react-native is FORBIDDEN
+- ❌ `Animated.View`, `Animated.Text`, `Animated.timing()` FORBIDDEN
+- ❌ `animationType="slide"` or `"fade"` on Modal FORBIDDEN
+- ❌ `InteractionManager.runAfterInteractions` FORBIDDEN (causes screen lock)
+- ❌ `react-native-reanimated` FORBIDDEN
+- ❌ `Lottie` animations FORBIDDEN
+- ✅ Use `animationType="none"` on all Modal components
+- ✅ Use `View` instead of `Animated.View`
+
+### NO GRADIENTS - EVER
+- ❌ `LinearGradient` component is FORBIDDEN
+- ❌ `expo-linear-gradient` package is FORBIDDEN
+- ✅ Use solid colors with transparency: `rgba(0,0,0,0.5)`
+
+### NO SHADOWS - EVER
+- ❌ `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` FORBIDDEN
+- ❌ `elevation` on Android FORBIDDEN
+- ✅ Use `borderWidth` and `borderColor` for depth
+
 ## 📦 Installation
 
 ```bash
@@ -23,11 +45,9 @@ npm install @umituz/react-native-design-system
 ### Peer Dependencies
 
 ```bash
-npm install react@18.3.1 react-native@0.76.3 react-native-reanimated@~3.10.1 react-native-svg@^15.0.0
+npm install react@19.1.0 react-native@0.81.5 react-native-svg@^15.0.0 react-native-gesture-handler@^2.30.0
 ```
 
-> **v1.3.0 Breaking Change**: React Native Paper dependency removed! All components now use pure React Native implementation for lighter bundle size and full control over styling.
-
 ## 🚀 Usage
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.9.10",
+  "version": "2.9.12",
   "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

@@ -59,7 +59,7 @@ export const BaseModal: React.FC<BaseModalProps> = ({
     <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/molecules/splash/README.md

@@ -244,38 +244,6 @@ export const App = () => {
 };
 ```
 
-### Animated Splash
-
-```tsx
-export const AnimatedSplash = () => {
-  const [fadeAnim] = useState(new Animated.Value(0));
-  const { isInitialized } = useSplashFlow({ duration: 2000 });
-
-  useEffect(() => {
-    if (isInitialized) {
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 500,
-        useNativeDriver: true,
-      }).start(() => {
-        // Hide splash after animation
-        setTimeout(() => {
-          navigation.replace('Home');
-        }, 1000);
-      });
-    }
-  }, [isInitialized]);
-
-  return (
-    <SplashScreen
-      appName="My App"
-      tagline="Welcome"
-      visible={!isInitialized}
-    />
-  );
-};
-```
-
 ### Multi-Stage Loading
 
 ```tsx

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,