Fix: Modal Overextend (#28)

* chore: Update package-lock.json and ModalSheet components

* fix modal issues

example/app/index.tsx

@@ -19,9 +19,9 @@ export default function App() {
         }}
       />
       <Button
-        title="Modal 1 - expand(full: true)"
+        title="Modal 2 - open()"
         onPress={() => {
-          modal1.current?.expand('full')
+          modal2.current?.open()
         }}
       />
 

src/Providers/ModalSheetInternalProvider.tsx

@@ -39,15 +39,11 @@ export function ModalSheetInternalProvider({ children }: PropsWithChildren) {
   const minimumHeight = useSharedValue(0)
   const y = useSharedValue(MAX_HEIGHT)
   const modalHeight = useSharedValue(0)
-  const disableSheetStackEffect = useSharedValue<1 | 0>(0)
   const backdropColor = useSharedValue('black')
   const backdropOpacity = useSharedValue(0.3)
   const activeIndex = useSharedValue(0)
   const drawerActiveIndex = useSharedValue(0)
   const childrenAanimatedStyles = useAnimatedStyle(() => {
-    if (disableSheetStackEffect.value === 1) {
-      return {}
-    }
     const borderRadius = interpolateClamp(
       modalHeight.value,
       [minimumHeight.value, MODAL_SHEET_HEIGHT],
@@ -142,7 +138,6 @@ export function ModalSheetInternalProvider({ children }: PropsWithChildren) {
         minimumHeight,
         backdropColor,
         backdropOpacity,
-        disableSheetStackEffect,
         updateModalHeight,
         registerDrawerSheet,
         addDrawerSheetToStack,

src/components/ModalSheet.tsx

@@ -18,8 +18,6 @@ import Animated, {
 import { animateClose, animateOpen, interpolateClamp, useConstants } from '../utils'
 import { ModalSheetProps, ModalSheetRef } from '../types'
 import { useInternal } from '../hooks/useInternal'
-import React from 'react'
-import { ModalSheetChild } from './ModalSheetChild'
 
 export const ModalSheet = forwardRef<ModalSheetRef, PropsWithChildren<ModalSheetProps>>(
   (

src/components/ModalSheetChild.tsx

@@ -1,10 +1,10 @@
-import React, { useRef } from 'react'
+import { useRef, isValidElement, cloneElement, Children } from 'react'
 
 export const ModalSheetChild = ({ children, onLayoutChange }) => {
   const initialHeightRef = useRef(0)
-  return React.Children.map(children, (child) => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, {
+  return Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return cloneElement(child, {
         // @ts-ignore
         onLayout: (event) => {
           const { height } = event.nativeEvent.layout

src/components/ModalSheetStack.tsx

@@ -25,7 +25,6 @@ export const ModalSheetStack = forwardRef<
       removeModalFromStack,
       activeIndex,
       modalStack,
-      disableSheetStackEffect,
       backdropColor: bckdropColor,
       backdropOpacity: bckdropOpacity,
       updateModalHeight,
@@ -45,9 +44,6 @@ export const ModalSheetStack = forwardRef<
         }
         const moveVal = SCREEN_HEIGHT - e.absoluteY
         modalHeight.value = moveVal
-        if (!disableSheetStackEffect.value && activeIndex.value === 1) {
-          updateModalHeight(SCREEN_HEIGHT - e.absoluteY)
-        }
         // Animate the modal behind if there is a stack of modals
         // When the current modal is dragged, the modal behind animates with it
         const behindModalRef = modalStack[activeIndex.value - 1]
@@ -65,14 +61,16 @@ export const ModalSheetStack = forwardRef<
           )
         }
       })
-      .onEnd((e) => {
-        if (e.translationY < 0) {
+      .onEnd((e) => {        
+        if (e.translationY < 80) {
           modalHeight.value = animateOpen(MODAL_SHEET_HEIGHT)
           showBackdrop.value = animateOpen(1)
           if (activeIndex.value === 0) {
             updateModalHeight(animateOpen(MODAL_SHEET_HEIGHT))
           }
-          runOnJS(addModalToStack)(name)
+          if (e.absoluteY < HEADER_HEIGHT) {
+            return
+          }
         } else {
           modalHeight.value = animateClose(0)
           showBackdrop.value = animateClose(0)
@@ -102,7 +100,6 @@ export const ModalSheetStack = forwardRef<
     })
 
     const open = () => {
-      disableSheetStackEffect.value = 0
       modalHeight.value = animateOpen(MODAL_SHEET_HEIGHT)
       showBackdrop.value = animateOpen(1)
       if (activeIndex.value === 0) {

src/types.ts

@@ -37,7 +37,6 @@ export interface ModalSheetRef {
   minimizedHeight?: number
   id: string
   children?: React.ReactNode
-  // onLayoutChange: (height: number) => void
 }
 export interface ModalSheetProps {
   name: string
@@ -79,7 +78,6 @@ export interface ModalSheetContextBaseType {
   minimumHeight: SharedValue<number>
   backdropColor: SharedValue<string>
   backdropOpacity: SharedValue<number>
-  disableSheetStackEffect: SharedValue<number>
   expand: (
     name: string,
     options?: { height?: number; disableSheetEffect?: boolean },