@idealyst/components 1.2.48 → 1.2.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.48",
+  "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.48",
+    "@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.48",
+    "@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 }[],
     };
   });
 
@@ -176,23 +206,6 @@ const Dialog = forwardRef<View, DialogProps>(({
     </TouchableWithoutFeedback>
   );
 
-  const modalContent = (
-    <TouchableWithoutFeedback onPress={handleBackdropPress}>
-      {BackdropComponent ? (
-        <View style={customBackdropWrapperStyle}>
-          <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
-            <BackdropComponent isVisible={open} />
-          </Animated.View>
-          {dialogContainer}
-        </View>
-      ) : (
-        <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-          {dialogContainer}
-        </Animated.View>
-      )}
-    </TouchableWithoutFeedback>
-  );
-
   return (
     <Modal
       visible={open}
@@ -202,16 +215,20 @@ const Dialog = forwardRef<View, DialogProps>(({
       statusBarTranslucent
       testID={testID}
     >
-      {avoidKeyboard ? (
-        <KeyboardAvoidingView
-          style={{ flex: 1 }}
-          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        >
-          {modalContent}
-        </KeyboardAvoidingView>
-      ) : (
-        modalContent
-      )}
+      <TouchableWithoutFeedback onPress={handleBackdropPress}>
+        {BackdropComponent ? (
+          <View style={customBackdropWrapperStyle}>
+            <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
+              <BackdropComponent isVisible={open} />
+            </Animated.View>
+            {dialogContainer}
+          </View>
+        ) : (
+          <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
+            {dialogContainer}
+          </Animated.View>
+        )}
+      </TouchableWithoutFeedback>
     </Modal>
   );
 });