@oneplatformdev/react-native-uikit 1.2.10 → 1.2.11

package/README.md

@@ -359,9 +359,9 @@ For non-scrolling keyboard avoidance, omitting `keyboardAvoidingBehavior` keeps
 
 `CustomAlert` animates a centered modal with a dismissible backdrop. Supply `header`, children, and optional `footer` content; compose your own actions with `Button`. Optional `closeAction` accepts an icon and an application-supplied accessibility label. No strings are translated by the kit.
 
-`BottomModal` provides slide/handle-drag dismissal and keyboard-height-aware positioning. Supply `children`, `visible`, `onClose`, and optionally `title`, `customHeader`, and a labeled `closeAction` icon. Without `sizing`, the existing `isFullScreen` prop still selects the original fullscreen layout; otherwise the modal follows its content. When both are supplied, `sizing` takes precedence over `isFullScreen`. Use `sizing={{ mode: 'content' }}` for intrinsic height, `sizing={{ mode: 'fixed', fraction: 0.5 }}` for half the available height, or `sizing={{ mode: 'fullscreen' }}` to fill the area below `topInset`. A fixed fraction must be finite, greater than 0 and at most 1; invalid values throw in development. In production, positive finite values above 1 clamp to 1, while non-positive or non-finite values use a fixed 0.5 fallback. Normal `ScrollView` or `FlatList` children remain caller-owned for tall content.
+`BottomModal` provides slide/handle-drag dismissal and keyboard-height-aware positioning. Supply `children`, `visible`, `onClose`, and optionally `title`, `customHeader`, and a labeled `closeAction` icon. Without `sizing`, the existing `isFullScreen` prop still selects the original fullscreen layout; otherwise the modal follows its content. When both are supplied, `sizing` takes precedence over `isFullScreen`. Use `sizing={{ mode: 'content' }}` for intrinsic height, `sizing={{ mode: 'fixed', fraction: 0.5 }}` for half the available height, `sizing={{ mode: 'fullscreen' }}` to fill the area below `topInset`, or `sizing={{ mode: 'expandable', initialFraction: 0.6 }}` for two positions: 60% and the full available height. A fixed fraction must be finite, greater than 0 and at most 1; invalid values throw in development. In production, positive finite values above 1 clamp to 1, while non-positive or non-finite values use a fixed 0.5 fallback. An expandable fraction must be finite, greater than 0 and less than 1; invalid values throw in development and use 0.6 in production. Normal `ScrollView` or `FlatList` children remain caller-owned for tall content.
 
-`topInset` defaults to the resolved top safe-area inset; `topInset={0}` starts at the physical top. `showHeader={false}` removes the package header and ignores `customHeader`. `backdrop={false}` hides the backdrop; an object may override its `color`, `opacity`, or `dismissOnPress`, leaving other defaults intact. `cornerRadius` is an unscaled design value. `dragToDismiss="handle"` is the default; `"none"` disables dragging, and a hidden header has no drag surface. Content/list drag and multiple positions are not supported.
+`topInset` defaults to the resolved top safe-area inset; `topInset={0}` starts at the physical top. `showHeader={false}` removes the package header and ignores `customHeader`. Expandable sizing requires `showHeader=true` to provide a resize gesture target; disabling it throws in development and leaves the modal collapsed without gesture resizing in production. A `customHeader` participates in the same handle gesture area. `backdrop={false}` hides the backdrop; an object may override its `color`, `opacity`, or `dismissOnPress`, leaving other defaults intact. `cornerRadius` is an unscaled design value. `dragToDismiss="handle"` is the default; `"none"` disables drag dismissal. In expandable mode, dragging the header up expands; dragging down collapses first, then dismisses from collapsed only when drag dismissal is enabled. The height animates after gesture release rather than tracking the finger. With `"none"`, header resizing still works. Scrollable content owns its gestures and does not resize the modal. Each new presentation starts collapsed; orientation changes recompute both heights. Backdrop and hardware Back always request close rather than collapse.
 
 A close action, dismissible backdrop, handle gesture, or Android hardware back calls `onCloseRequest(reason)` once when closing starts. The keyboard is dismissed, and the existing `onClose` runs after the 250-ms exit animation; the parent still owns `visible`. An external `visible: true → false` hides immediately, cancels any pending package animation, and does not call `onCloseRequest` or `onClose`. `onDismiss` fires once after a committed controlled `true → false` transition, not after a guaranteed native OS dialog teardown. An internal close calls it only if the parent subsequently sets `visible=false`; do not use it yet to sequence native modal stacking or camera/gallery presentation. `closeRef` retains its previous close behavior without a close-request reason. The kit does not render app-specific toasts.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/react-native-uikit",
-  "version": "1.2.10",
+  "version": "1.2.11",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "bin": {

package/src/components/BottomModal/presenters/useBottomModal.ts

@@ -5,7 +5,7 @@ import { useBottomModalInsets } from './useBottomModalInsets';
 
 type UseBottomModalProps = Pick<
     BottomModalProps,
-    'visible' | 'onClose' | 'onCloseRequest' | 'onDismiss' | 'closeRef' | 'topInset'
+    'visible' | 'onClose' | 'onCloseRequest' | 'onDismiss' | 'closeRef' | 'topInset' | 'sizing' | 'dragToDismiss'
 >;
 
 const CLOSE_DISTANCE = 120;
@@ -15,6 +15,8 @@ const CLOSE_ANIMATION_DURATION = 250;
 
 const isDragDownGesture = (gestureState: { dx: number; dy: number }) =>
     gestureState.dy > 0 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
+const isVerticalGesture = (gestureState: { dx: number; dy: number }) =>
+    gestureState.dy !== 0 && Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
 
 export const useBottomModal = ({
     visible,
@@ -23,11 +25,24 @@ export const useBottomModal = ({
     onDismiss,
     closeRef,
     topInset: requestedTopInset,
+    sizing,
+    dragToDismiss,
 }: UseBottomModalProps) => {
     const { height } = useWindowDimensions();
     const { topInset, bottomInset } = useBottomModalInsets(requestedTopInset);
+    const isExpandable = sizing?.mode === 'expandable';
+    const initialFraction = sizing?.mode === 'expandable' ? sizing.initialFraction : undefined;
+    const validInitialFraction = initialFraction !== undefined && Number.isFinite(initialFraction)
+        && initialFraction > 0 && initialFraction < 1;
+    if (__DEV__ && isExpandable && !validInitialFraction) {
+        throw new Error('BottomModal expandable initialFraction must be finite, greater than 0 and less than 1.');
+    }
+    const maxHeight = Math.max(0, height - topInset);
+    const collapsedHeight = maxHeight * (validInitialFraction ? initialFraction : 0.6);
     const [translateY] = useState(() => new Animated.Value(height));
     const [backdropOpacity] = useState(() => new Animated.Value(0));
+    const [expandableHeight] = useState(() => new Animated.Value(collapsedHeight));
+    const expandedRef = useRef(false);
     const previousVisibleRef = useRef(visible);
     const visibleRef = useRef(visible);
     const openedRef = useRef(false);
@@ -39,6 +54,28 @@ export const useBottomModal = ({
     onCloseRef.current = onClose;
     onCloseRequestRef.current = onCloseRequest;
 
+    useLayoutEffect(() => {
+        if (!isExpandable) {
+            expandedRef.current = false;
+            expandableHeight.stopAnimation();
+            return;
+        }
+        expandableHeight.stopAnimation();
+        expandableHeight.setValue(expandedRef.current ? maxHeight : collapsedHeight);
+    }, [collapsedHeight, expandableHeight, isExpandable, maxHeight]);
+
+    const onResize = useCallback((expanded: boolean) => {
+        if (closingRef.current) return;
+        expandedRef.current = expanded;
+        expandableHeight.stopAnimation();
+        Animated.timing(expandableHeight, {
+            toValue: expanded ? maxHeight : collapsedHeight,
+            duration: CLOSE_ANIMATION_DURATION,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: false,
+        }).start();
+    }, [collapsedHeight, expandableHeight, maxHeight]);
+
     const onRunCloseAnimation = useCallback(
         (shouldNotify: boolean, reason?: BottomModalCloseReason) => {
             if (closingRef.current) return;
@@ -46,6 +83,7 @@ export const useBottomModal = ({
             const animationId = ++animationIdRef.current;
             if (reason) onCloseRequestRef.current?.(reason);
             Keyboard.dismiss();
+            if (isExpandable) expandableHeight.stopAnimation();
             translateY.stopAnimation();
             backdropOpacity.stopAnimation();
             Animated.parallel([
@@ -67,7 +105,7 @@ export const useBottomModal = ({
                 if (shouldNotify) onCloseRef.current();
             });
         },
-        [backdropOpacity, height, translateY],
+        [backdropOpacity, expandableHeight, height, isExpandable, translateY],
     );
     const onRunOpenAnimation = useCallback((reset: boolean) => {
         ++animationIdRef.current;
@@ -108,16 +146,23 @@ export const useBottomModal = ({
         translateY.stopAnimation();
         backdropOpacity.stopAnimation();
         if (visible) {
+            expandedRef.current = false;
+            if (isExpandable) expandableHeight.setValue(collapsedHeight);
             openedRef.current = true;
             onRunOpenAnimation(false);
         } else {
             openedRef.current = false;
+            if (isExpandable) {
+                expandableHeight.stopAnimation();
+                expandedRef.current = false;
+                expandableHeight.setValue(collapsedHeight);
+            }
             translateY.setValue(height);
             backdropOpacity.setValue(0);
             // Report the controlled hidden commit, not native dialog teardown.
             onDismiss?.();
         }
-    }, [backdropOpacity, height, onDismiss, onRunOpenAnimation, translateY, visible]);
+    }, [backdropOpacity, collapsedHeight, expandableHeight, height, isExpandable, onDismiss, onRunOpenAnimation, translateY, visible]);
 
     const onClosePress = useCallback(() => onRunCloseAnimation(true), [onRunCloseAnimation]);
     const onCloseAction = useCallback(() => onRunCloseAnimation(true, 'closeAction'), [onRunCloseAnimation]);
@@ -129,7 +174,8 @@ export const useBottomModal = ({
         ++animationIdRef.current;
         translateY.stopAnimation();
         backdropOpacity.stopAnimation();
-    }, [backdropOpacity, translateY]);
+        expandableHeight.stopAnimation();
+    }, [backdropOpacity, expandableHeight, translateY]);
 
     useEffect(() => {
         if (!closeRef) return;
@@ -139,12 +185,23 @@ export const useBottomModal = ({
 
     const panResponder = useMemo(
         () => PanResponder.create({
-            onMoveShouldSetPanResponderCapture: (_, gestureState) => isDragDownGesture(gestureState),
-            onMoveShouldSetPanResponder: (_, gestureState) => isDragDownGesture(gestureState),
+            onMoveShouldSetPanResponderCapture: (_, gestureState) => isExpandable
+                ? isVerticalGesture(gestureState) : isDragDownGesture(gestureState),
+            onMoveShouldSetPanResponder: (_, gestureState) => isExpandable
+                ? isVerticalGesture(gestureState) : isDragDownGesture(gestureState),
             onPanResponderMove: (_, gestureState) => {
+                if (isExpandable) return;
                 if (gestureState.dy > 0) translateY.setValue(gestureState.dy);
             },
             onPanResponderRelease: (_, gestureState) => {
+                if (isExpandable) {
+                    const swipedUp = -gestureState.dy > CLOSE_DISTANCE || -gestureState.vy > CLOSE_VELOCITY;
+                    const swipedDown = gestureState.dy > CLOSE_DISTANCE || gestureState.vy > CLOSE_VELOCITY;
+                    if (expandedRef.current && swipedDown) onResize(false);
+                    else if (!expandedRef.current && swipedUp) onResize(true);
+                    else if (!expandedRef.current && swipedDown && dragToDismiss === 'handle') onGestureClose();
+                    return;
+                }
                 if (gestureState.dy > CLOSE_DISTANCE || gestureState.vy > CLOSE_VELOCITY) {
                     onGestureClose();
                     return;
@@ -152,10 +209,11 @@ export const useBottomModal = ({
                 Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0, speed: 18 }).start();
             },
             onPanResponderTerminate: () => {
+                if (isExpandable) return;
                 Animated.spring(translateY, { toValue: 0, useNativeDriver: true, bounciness: 0, speed: 18 }).start();
             },
         }),
-        [onGestureClose, translateY],
+        [dragToDismiss, isExpandable, onGestureClose, onResize, translateY],
     );
 
     return {
@@ -164,6 +222,8 @@ export const useBottomModal = ({
         bottomInset,
         translateY,
         backdropOpacity,
+        expandableHeight,
+        isExpandable,
         onCloseAction,
         onBackdropPress,
         onHardwareBack,

package/src/components/BottomModal/types/types.ts

@@ -11,7 +11,8 @@ export interface BottomModalCloseAction {
 export type BottomModalSizing =
     | { mode: 'content' }
     | { mode: 'fixed'; fraction: number }
-    | { mode: 'fullscreen' };
+    | { mode: 'fullscreen' }
+    | { mode: 'expandable'; initialFraction: number };
 
 export type BottomModalBackdrop = false | {
     color?: string;

package/src/components/BottomModal/ui/BottomModal.tsx

@@ -44,12 +44,14 @@ export const BottomModal = ({
         topInset: resolvedTopInset,
         translateY,
         backdropOpacity,
+        expandableHeight,
+        isExpandable,
         onCloseAction,
         onBackdropPress,
         onHardwareBack,
         onShow,
         panHandlers,
-    } = useBottomModal({ visible, onClose, onCloseRequest, onDismiss, closeRef, topInset });
+    } = useBottomModal({ visible, onClose, onCloseRequest, onDismiss, closeRef, topInset, sizing, dragToDismiss });
 
     const {
         modalContentStyle,
@@ -59,9 +61,13 @@ export const BottomModal = ({
         isBoundedHeight,
     } = useBottomModalAnimatedStyles(
         height, resolvedTopInset, bottomInset, translateY, backdropOpacity,
-        isFullScreen, shouldAvoidKeyboard, sizing, targetBackdropOpacity,
+        isFullScreen, shouldAvoidKeyboard, sizing, targetBackdropOpacity, expandableHeight,
     );
 
+    if (__DEV__ && isExpandable && !showHeader) {
+        throw new Error('BottomModal expandable sizing requires showHeader=true for its resize gesture.');
+    }
+
     const styles = useMemo(
         () => getStyles(colors, spacing, radius, scaling, bottomInset, backdropColor, resolvedCornerRadius),
         [backdropColor, bottomInset, colors, radius, resolvedCornerRadius, scaling, spacing],
@@ -89,7 +95,7 @@ export const BottomModal = ({
                         style={[styles.modalContent, modalContentStyle]}
                     >
                         <View style={[styles.container, isBoundedHeight && styles.fullScreenContainer]}>
-                            {showHeader ? <View {...(dragToDismiss === 'handle' ? panHandlers : {})}>
+                            {showHeader ? <View {...(isExpandable || dragToDismiss === 'handle' ? panHandlers : {})}>
                                 <TouchableWithoutFeedback>
                                     {customHeader ? (
                                         <View>{customHeader}</View>

package/src/components/BottomModal/ui/styles.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { Animated, StyleSheet } from 'react-native';
-import type { ViewStyle } from 'react-native';
 import { useAnimatedStyle } from 'react-native-reanimated';
 import { useAnimatedKeyboard } from 'react-native-keyboard-controller';
 import type { UIColors, UIRadius, UISpacing } from '../../../theme';
@@ -100,6 +99,7 @@ export const useBottomModalAnimatedStyles = (
     shouldAvoidKeyboard: boolean,
     sizing?: BottomModalSizing,
     targetBackdropOpacity = 0.5,
+    expandableHeight?: Animated.Value,
 ) => {
     const maxHeight = Math.max(0, height - topInset);
     const mode = sizing?.mode ?? (isFullScreen ? 'fullscreen' : 'content');
@@ -112,7 +112,7 @@ export const useBottomModalAnimatedStyles = (
         ? Math.min(1, fraction) : 0.5;
     const modalHeight = mode === 'fullscreen' ? maxHeight
         : mode === 'fixed' ? maxHeight * resolvedFraction : undefined;
-    const isBoundedHeight = modalHeight !== undefined;
+    const isBoundedHeight = modalHeight !== undefined || mode === 'expandable';
     const { height: keyboardHeight } = useAnimatedKeyboard();
     const animatedBackdropStyle = useMemo(
         () => ({ opacity: backdropOpacity.interpolate({ inputRange: [0, 1], outputRange: [0, targetBackdropOpacity] }) }),
@@ -126,9 +126,13 @@ export const useBottomModalAnimatedStyles = (
     const animatedKeyboardBackgroundStyle = useAnimatedStyle(() => ({
         height: shouldAvoidKeyboard ? Math.max(keyboardHeight.value - bottomInset, 0) : 0,
     }));
-    const modalContentStyle = useMemo<ViewStyle>(
-        () => ({ maxHeight, height: modalHeight, transform: [{ translateY }] }),
-        [maxHeight, modalHeight, translateY],
+    const modalContentStyle = useMemo(
+        () => ({
+            maxHeight,
+            height: mode === 'expandable' ? expandableHeight : modalHeight,
+            transform: [{ translateY }],
+        }),
+        [expandableHeight, maxHeight, modalHeight, mode, translateY],
     );
 
     return { animatedBackdropStyle, animatedKeyboardContainerStyle, animatedKeyboardBackgroundStyle, modalContentStyle, isBoundedHeight };