diff --git a/src/SheetProvider.tsx b/src/SheetProvider.tsx index 2e3964c86ad78a9eddcb074ab26ae8ee2ae12179..20e2f9c25cdb0e7daca3c2211967f21452a04ed9 100644 --- a/src/SheetProvider.tsx +++ b/src/SheetProvider.tsx @@ -1,23 +1,23 @@ -import React, { createContext, useContext, useCallback, useEffect } from 'react' -import { Platform, View } from 'react-native' -import Animated, { +import React, { createContext, useCallback, useContext, useEffect, useMemo } from "react" +import { Platform } from "react-native" +import { + cancelAnimation, useSharedValue, withSpring, - useAnimatedStyle, - cancelAnimation, - runOnJS -} from 'react-native-reanimated' + type SharedValue, +} from "react-native-reanimated" interface SheetContextType { - scale: Animated.SharedValue + scale: SharedValue setScale: (scale: number) => void - resizeType: 'incremental' | 'decremental' + isScaling: boolean + resizeType: "incremental" | "decremental" enableForWeb: boolean } interface SheetProviderProps { children: React.ReactNode - resizeType?: 'incremental' | 'decremental' + resizeType?: "incremental" | "decremental" enableForWeb?: boolean } @@ -25,11 +25,12 @@ const SheetContext = createContext(null) export function SheetProvider({ children, - resizeType = 'decremental', - enableForWeb = false + resizeType = "decremental", + enableForWeb = false, }: SheetProviderProps) { const scale = useSharedValue(1) const isMounted = useSharedValue(false) + const [isScaling, setIsScaling] = React.useState(false) useEffect(() => { // Delay setting isMounted to ensure view is ready @@ -46,11 +47,13 @@ export function SheetProvider({ const setScale = useCallback((newScale: number) => { if (!isMounted.value) return - if (Platform.OS === 'android') { + if (Platform.OS === "android") { scale.value = newScale return } + setIsScaling(newScale !== 1) + scale.value = withSpring(newScale, { damping: 20, stiffness: 300, @@ -60,47 +63,22 @@ export function SheetProvider({ }) }, []) - const animatedStyle = useAnimatedStyle(() => { - if (!isMounted.value) return {} - - return { - transform: [{ scale: scale.value }], - } - }, []) - - const isEnabled = Platform.OS === 'web' ? enableForWeb : true + const isEnabled = Platform.OS === "web" ? enableForWeb : true return ( - - {/* */} - - - - {children} - - - + ({ + scale, + setScale, + isScaling, + resizeType, + enableForWeb: isEnabled, + }), + [scale, setScale, isScaling, resizeType, isEnabled], + )} + > + {children} ) } @@ -108,7 +86,7 @@ export function SheetProvider({ export function useSheet() { const context = useContext(SheetContext) if (!context) { - throw new Error('useSheet must be used within a SheetProvider') + throw new Error("useSheet must be used within a SheetProvider") } return context -} \ No newline at end of file +} diff --git a/src/SheetScreen.tsx b/src/SheetScreen.tsx index 3eebf713a5dcf42dd43b2c34cef136b682828d23..ca1394fe4319151cd1a31f303c2e70de5f48850a 100644 --- a/src/SheetScreen.tsx +++ b/src/SheetScreen.tsx @@ -278,7 +278,7 @@ export function SheetScreen({ { scale } ], opacity: opacity.value, - borderRadius: borderRadius.value, + borderRadius: translateY.value === 0 ? 0 : borderRadius.value, } }, [disableSheetContentResizeOnDragDown])