@idealyst/components 1.2.49 → 1.2.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.49",
+  "version": "1.2.50",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.49",
+    "@idealyst/theme": "^1.2.50",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.49",
+    "@idealyst/theme": "^1.2.50",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Dialog/Dialog.native.tsx

@@ -1,5 +1,5 @@
 import { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent, KeyboardAvoidingView, Platform } from 'react-native';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent, Keyboard, Platform } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
@@ -41,6 +41,34 @@ const Dialog = forwardRef<View, DialogProps>(({
   const backdropOpacity = useSharedValue(0);
   const containerScale = useSharedValue(0.9);
   const containerOpacity = useSharedValue(0);
+  const keyboardOffset = useSharedValue(0);
+
+  // Listen for keyboard events and animate offset
+  useEffect(() => {
+    if (!avoidKeyboard || !open) return;
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSubscription = Keyboard.addListener(showEvent, (e) => {
+      keyboardOffset.value = withTiming(e.endCoordinates.height / 2, {
+        duration: Platform.OS === 'ios' ? e.duration : 250,
+        easing: Easing.out(Easing.cubic),
+      });
+    });
+
+    const hideSubscription = Keyboard.addListener(hideEvent, (e) => {
+      keyboardOffset.value = withTiming(0, {
+        duration: Platform.OS === 'ios' ? (e.duration ?? 250) : 250,
+        easing: Easing.out(Easing.cubic),
+      });
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [avoidKeyboard, open]);
 
   // Animate in/out when open changes
   useEffect(() => {
@@ -109,11 +137,13 @@ const Dialog = forwardRef<View, DialogProps>(({
   });
 
   const containerAnimatedStyle = useAnimatedStyle(() => {
+    'worklet';
     return {
       opacity: containerOpacity.value,
       transform: [
         { scale: containerScale.value },
-      ],
+        { translateY: -keyboardOffset.value },
+      ] as { scale: number }[] & { translateY: number }[],
     };
   });
 
@@ -147,44 +177,32 @@ const Dialog = forwardRef<View, DialogProps>(({
     bottom: 0,
   };
 
-  const dialogContent = (
-    <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
-      {(title || showCloseButton) && (
-        <View style={headerStyle}>
-          {title && (
-            <Text style={titleStyle}>
-              {title}
-            </Text>
-          )}
-          {showCloseButton && (
-            <TouchableOpacity
-              style={closeButtonStyle}
-              onPress={handleClosePress}
-              accessibilityLabel="Close dialog"
-              accessibilityRole="button"
-            >
-              <Text style={closeButtonTextStyle}>×</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      )}
-      <View style={contentStyle}>
-        {children}
-      </View>
-    </Animated.View>
-  );
-
   const dialogContainer = (
     <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
-      {avoidKeyboard ? (
-        <KeyboardAvoidingView
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-          {dialogContent}
-        </KeyboardAvoidingView>
-      ) : (
-        dialogContent
-      )}
+      <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+        {(title || showCloseButton) && (
+          <View style={headerStyle}>
+            {title && (
+              <Text style={titleStyle}>
+                {title}
+              </Text>
+            )}
+            {showCloseButton && (
+              <TouchableOpacity
+                style={closeButtonStyle}
+                onPress={handleClosePress}
+                accessibilityLabel="Close dialog"
+                accessibilityRole="button"
+              >
+                <Text style={closeButtonTextStyle}>×</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+        <View style={contentStyle}>
+          {children}
+        </View>
+      </Animated.View>
     </TouchableWithoutFeedback>
   );