diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx index a04e1cc45..4f0c20b44 100644 --- a/src/components/bottomSheet/BottomSheet.tsx +++ b/src/components/bottomSheet/BottomSheet.tsx @@ -1,6 +1,5 @@ import React, { useMemo, - useRef, useCallback, forwardRef, useImperativeHandle, @@ -54,8 +53,6 @@ import { print, } from '../../utilities'; import { - DEFAULT_ANIMATION_EASING, - DEFAULT_ANIMATION_DURATION, DEFAULT_OVER_DRAG_RESISTANCE_FACTOR, DEFAULT_ENABLE_CONTENT_PANNING_GESTURE, DEFAULT_ENABLE_HANDLE_PANNING_GESTURE, @@ -91,9 +88,6 @@ const BottomSheetComponent = forwardRef( //#region extract props const { // animations configurations - animationDuration: - _providedAnimationDuration = DEFAULT_ANIMATION_DURATION, - animationEasing: _providedAnimationEasing = DEFAULT_ANIMATION_EASING, animationConfigs: _providedAnimationConfigs = DEFAULT_ANIMATION_CONFIGS, // configurations @@ -234,6 +228,7 @@ const BottomSheetComponent = forwardRef( isSnapPointsNormalized ); }); + const isSheetClosing = useSharedValue(false); const isInTemporaryPosition = useSharedValue(false); //#endregion @@ -422,13 +417,6 @@ const BottomSheetComponent = forwardRef( }); //#endregion - //#region variables - /** - * @TODO remove this - */ - const isClosing = useRef(false); - //#endregion - //#region private methods const refreshUIElements = useCallback(() => { const currentPositionIndex = Math.max(animatedCurrentIndex.value, 0); @@ -457,18 +445,15 @@ const BottomSheetComponent = forwardRef( }, }); - if (isClosing.current && (index === 0 || index === -1)) { - isClosing.current = false; + if (isSheetClosing.value && (index === 0 || index === -1)) { + isSheetClosing.value = false; } if (_providedOnChange) { - /** - * to avoid having -0 🤷‍♂️ - */ - _providedOnChange(index + 1 - 1); + _providedOnChange(index); } }, - [_providedOnChange, animatedCurrentIndex] + [_providedOnChange, animatedCurrentIndex, isSheetClosing] ); const handleOnAnimate = useCallback( (toPoint: number) => { @@ -531,7 +516,6 @@ const BottomSheetComponent = forwardRef( * force animation configs from parameters, if provided */ if (configs !== undefined) { - // @ts-ignore animatedPosition.value = animate( position, configs, @@ -542,7 +526,6 @@ const BottomSheetComponent = forwardRef( /** * use animationConfigs callback, if provided */ - // @ts-ignore animatedPosition.value = animate( position, _providedAnimationConfigs, @@ -550,24 +533,18 @@ const BottomSheetComponent = forwardRef( animateToPositionCompleted ); } else { - // @ts-ignore + /** + * fallback to default animation configs + */ animatedPosition.value = animate( position, - { - duration: _providedAnimationDuration, - easing: _providedAnimationEasing, - }, - 0, + DEFAULT_ANIMATION_CONFIGS, + velocity, animateToPositionCompleted ); } }, - [ - handleOnAnimate, - _providedAnimationConfigs, - _providedAnimationDuration, - _providedAnimationEasing, - ] + [handleOnAnimate, _providedAnimationConfigs] ); //#endregion @@ -623,13 +600,13 @@ const BottomSheetComponent = forwardRef( * verify if sheet is closed. */ if (animatedPosition.value === animatedContainerHeight.value) { - isClosing.current = false; + isSheetClosing.value = false; } /** * exit method if sheet is closing. */ - if (isClosing.current) { + if (isSheetClosing.value) { return; } @@ -637,6 +614,7 @@ const BottomSheetComponent = forwardRef( runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs); }, [ + isSheetClosing, animateToPosition, animatedSnapPoints, animatedContainerHeight, @@ -652,13 +630,13 @@ const BottomSheetComponent = forwardRef( * verify if sheet is closed. */ if (animatedPosition.value === animatedContainerHeight.value) { - isClosing.current = false; + isSheetClosing.value = false; } /** * exit method if sheet is closing. */ - if (isClosing.current) { + if (isSheetClosing.value) { return; } @@ -679,6 +657,7 @@ const BottomSheetComponent = forwardRef( animateToPosition(nextPosition, 0, animationConfigs); }, [ + isSheetClosing, animateToPosition, animatedContainerHeight, animatedPosition, @@ -698,24 +677,29 @@ const BottomSheetComponent = forwardRef( * verify if sheet is closed. */ if (animatedPosition.value === animatedContainerHeight.value) { - isClosing.current = false; + isSheetClosing.value = false; } /** * exit method if sheet is closing. */ - if (isClosing.current) { + if (isSheetClosing.value) { return; } - isClosing.current = true; + isSheetClosing.value = true; runOnUI(animateToPosition)( animatedContainerHeight.value, 0, animationConfigs ); }, - [animateToPosition, animatedContainerHeight, animatedPosition] + [ + isSheetClosing, + animateToPosition, + animatedContainerHeight, + animatedPosition, + ] ); const handleExpand = useCallback( function handleExpand( @@ -725,13 +709,13 @@ const BottomSheetComponent = forwardRef( * verify if sheet is closed. */ if (animatedPosition.value === animatedContainerHeight.value) { - isClosing.current = false; + isSheetClosing.value = false; } /** * exit method if sheet is closing. */ - if (isClosing.current) { + if (isSheetClosing.value) { return; } const snapPoints = animatedSnapPoints.value; @@ -739,6 +723,7 @@ const BottomSheetComponent = forwardRef( runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs); }, [ + isSheetClosing, animateToPosition, animatedSnapPoints, animatedContainerHeight, @@ -753,13 +738,13 @@ const BottomSheetComponent = forwardRef( * verify if sheet is closed. */ if (animatedPosition.value === animatedContainerHeight.value) { - isClosing.current = false; + isSheetClosing.value = false; } /** * exit method if sheet is closing. */ - if (isClosing.current) { + if (isSheetClosing.value) { return; } @@ -768,6 +753,7 @@ const BottomSheetComponent = forwardRef( runOnUI(animateToPosition)(newSnapPoint, 0, animationConfigs); }, [ + isSheetClosing, animateToPosition, animatedSnapPoints, animatedContainerHeight, diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts index 946d7d6eb..eb7ae01d1 100644 --- a/src/components/bottomSheet/types.d.ts +++ b/src/components/bottomSheet/types.d.ts @@ -223,22 +223,6 @@ export interface BottomSheetProps } export interface BottomSheetAnimationConfigs { - /** - * Snapping animation easing function. - * @type Animated.EasingFunction - * @default Easing.out(Easing.exp) - * @deprecated this prop will be dropped in the next major release. - * @see animationConfigs - */ - animationEasing?: Animated.EasingFunction; - /** - * Snapping animation duration. - * @type number - * @default 500 - * @deprecated this prop will be dropped in the next major release. - * @see animationConfigs - */ - animationDuration?: number; /** * Animation configs, this could be created by: * - `useBottomSheetSpringConfigs` diff --git a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx index af15ddd04..43f1716fe 100644 --- a/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx +++ b/src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx @@ -11,13 +11,14 @@ import { TapGestureHandler, TapGestureHandlerGestureEvent, } from 'react-native-gesture-handler'; +import { useBottomSheet } from '../../hooks'; import { DEFAULT_OPACITY, DEFAULT_APPEARS_ON_INDEX, DEFAULT_DISAPPEARS_ON_INDEX, DEFAULT_ENABLE_TOUCH_THROUGH, + DEFAULT_PRESS_BEHAVIOR, } from './constants'; -import { usePressBehavior } from './usePressBehavior'; import { styles } from './styles'; import type { BottomSheetDefaultBackdropProps } from './types'; @@ -27,26 +28,31 @@ const BottomSheetBackdropComponent = ({ appearsOnIndex = DEFAULT_APPEARS_ON_INDEX, disappearsOnIndex = DEFAULT_DISAPPEARS_ON_INDEX, enableTouchThrough = DEFAULT_ENABLE_TOUCH_THROUGH, - pressBehavior, - closeOnPress, + pressBehavior = DEFAULT_PRESS_BEHAVIOR, style, }: BottomSheetDefaultBackdropProps) => { //#region hooks - const { handleOnPress, syntheticPressBehavior } = usePressBehavior({ - pressBehavior, - closeOnPress, - disappearsOnIndex, - }); + const { snapToIndex, close } = useBottomSheet(); //#endregion //#region variables const containerRef = useRef(null); - const pointerEvents = useMemo(() => (enableTouchThrough ? 'none' : 'auto'), [ - enableTouchThrough, - ]); + const pointerEvents = useMemo( + () => (enableTouchThrough ? 'none' : 'auto'), + [enableTouchThrough] + ); //#endregion //#region callbacks + const handleOnPress = useCallback(() => { + if (pressBehavior === 'close') { + close(); + } else if (pressBehavior === 'collapse') { + snapToIndex(disappearsOnIndex as number); + } else if (typeof pressBehavior === 'number') { + snapToIndex(pressBehavior); + } + }, [snapToIndex, close, disappearsOnIndex, pressBehavior]); const handleContainerTouchability = useCallback( (shouldDisableTouchability: boolean) => { if (!containerRef.current) { @@ -62,14 +68,15 @@ const BottomSheetBackdropComponent = ({ //#endregion //#region tap gesture - const gestureHandler = useAnimatedGestureHandler( - { - onFinish: () => { - runOnJS(handleOnPress)(); + const gestureHandler = + useAnimatedGestureHandler( + { + onFinish: () => { + runOnJS(handleOnPress)(); + }, }, - }, - [handleOnPress] - ); + [handleOnPress] + ); //#endregion //#region styles @@ -83,7 +90,7 @@ const BottomSheetBackdropComponent = ({ flex: 1, })); const containerStyle = useMemo( - () => [style, styles.container, containerAnimatedStyle], + () => [styles.container, style, containerAnimatedStyle], [style, containerAnimatedStyle] ); //#endregion @@ -101,7 +108,7 @@ const BottomSheetBackdropComponent = ({ ); //#endregion - return syntheticPressBehavior !== 'none' ? ( + return pressBehavior !== 'none' ? ( diff --git a/src/components/bottomSheetBackdrop/types.d.ts b/src/components/bottomSheetBackdrop/types.d.ts index b5b04bbfc..5472507c2 100644 --- a/src/components/bottomSheetBackdrop/types.d.ts +++ b/src/components/bottomSheetBackdrop/types.d.ts @@ -42,12 +42,6 @@ export interface BottomSheetDefaultBackdropProps * @default false */ enableTouchThrough?: boolean; - /** - * Close sheet when user press on backdrop. - * @type boolean - * @deprecated Use pressBehavior instead. - */ - closeOnPress?: boolean; /** * What should happen when user press backdrop? * @type BackdropPressBehavior diff --git a/src/components/bottomSheetBackdrop/usePressBehavior.ts b/src/components/bottomSheetBackdrop/usePressBehavior.ts deleted file mode 100644 index 100900dad..000000000 --- a/src/components/bottomSheetBackdrop/usePressBehavior.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { useCallback, useEffect, useMemo } from 'react'; -import { useBottomSheet } from '../../hooks'; -import { DEFAULT_PRESS_BEHAVIOR } from './constants'; -import type { - BackdropPressBehavior, - BottomSheetDefaultBackdropProps, -} from './types'; - -export const usePressBehavior = ({ - closeOnPress, - disappearsOnIndex, - pressBehavior, -}: Pick< - BottomSheetDefaultBackdropProps, - 'closeOnPress' | 'disappearsOnIndex' | 'pressBehavior' ->) => { - //#region hooks - const { snapToIndex, close } = useBottomSheet(); - //#endregion - - //#region variables - const syntheticPressBehavior = useMemo(() => { - if (typeof closeOnPress === 'boolean') { - return closeOnPress ? 'close' : 'none'; - } - if (closeOnPress === -1) { - return 'close'; - } - if (closeOnPress === disappearsOnIndex) { - return 'collapse'; - } - return pressBehavior ?? DEFAULT_PRESS_BEHAVIOR; - }, [pressBehavior, closeOnPress, disappearsOnIndex]); - const handleOnPress = useCallback(() => { - if (syntheticPressBehavior === 'close') { - close(); - } else if (syntheticPressBehavior === 'collapse') { - snapToIndex(disappearsOnIndex as number); - } else if (typeof syntheticPressBehavior === 'number') { - snapToIndex(syntheticPressBehavior); - } - }, [snapToIndex, close, disappearsOnIndex, syntheticPressBehavior]); - //#endregion - - //#region effects - __DEV__ && - // eslint-disable-next-line react-hooks/rules-of-hooks - useEffect(() => { - if (closeOnPress != null && pressBehavior != null) { - console.warn( - 'BottomSheetBackdrop: you should never define both closeOnPress and pressBehavior. closeOnPress will take precedence.' - ); - } - }, [closeOnPress, pressBehavior]); - //#endregion - return { - handleOnPress, - syntheticPressBehavior, - }; -}; diff --git a/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx b/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx index dc9cf24a3..207fe3529 100644 --- a/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx +++ b/src/components/bottomSheetScrollable/BottomSheetFlatList.tsx @@ -10,14 +10,14 @@ import type { BottomSheetFlatListProps, } from './types'; -const AnimatedFlatList = Animated.createAnimatedComponent>( - RNFlatList -); +const AnimatedFlatList = + Animated.createAnimatedComponent>(RNFlatList); -const BottomSheetFlatListComponent = createBottomSheetScrollableComponent< - BottomSheetFlatListMethods, - BottomSheetFlatListProps ->(AnimatedFlatList); +const BottomSheetFlatListComponent = + createBottomSheetScrollableComponent< + BottomSheetFlatListMethods, + BottomSheetFlatListProps + >(AnimatedFlatList); const BottomSheetFlatList = memo(BottomSheetFlatListComponent); BottomSheetFlatList.displayName = 'BottomSheetFlatList'; diff --git a/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx b/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx index ed5d377f9..db5665639 100644 --- a/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx +++ b/src/components/bottomSheetScrollable/BottomSheetScrollView.tsx @@ -10,14 +10,14 @@ import type { BottomSheetScrollViewProps, } from './types'; -const AnimatedScrollView = Animated.createAnimatedComponent( - RNScrollView -); +const AnimatedScrollView = + Animated.createAnimatedComponent(RNScrollView); -const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent< - BottomSheetScrollViewMethods, - BottomSheetScrollViewProps ->(AnimatedScrollView); +const BottomSheetScrollViewComponent = + createBottomSheetScrollableComponent< + BottomSheetScrollViewMethods, + BottomSheetScrollViewProps + >(AnimatedScrollView); const BottomSheetScrollView = memo(BottomSheetScrollViewComponent); BottomSheetScrollView.displayName = 'BottomSheetScrollView'; diff --git a/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx b/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx index 46b7c1311..3916a78aa 100644 --- a/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx +++ b/src/components/bottomSheetScrollable/BottomSheetSectionList.tsx @@ -10,14 +10,14 @@ import type { BottomSheetSectionListProps, } from './types'; -const AnimatedSectionList = Animated.createAnimatedComponent< - RNSectionListProps ->(RNSectionList); +const AnimatedSectionList = + Animated.createAnimatedComponent>(RNSectionList); -const BottomSheetSectionListComponent = createBottomSheetScrollableComponent< - BottomSheetSectionListMethods, - BottomSheetSectionListProps ->(AnimatedSectionList); +const BottomSheetSectionListComponent = + createBottomSheetScrollableComponent< + BottomSheetSectionListMethods, + BottomSheetSectionListProps + >(AnimatedSectionList); const BottomSheetSectionList = memo(BottomSheetSectionListComponent); BottomSheetSectionList.displayName = 'BottomSheetSectionList'; diff --git a/src/components/touchables/index.ts b/src/components/touchables/index.ts index d83b2f5cc..61d5c969e 100644 --- a/src/components/touchables/index.ts +++ b/src/components/touchables/index.ts @@ -14,5 +14,6 @@ import { export default { TouchableOpacity: TouchableOpacity as typeof RNTouchableOpacity, TouchableHighlight: TouchableHighlight as typeof RNTouchableHighlight, - TouchableWithoutFeedback: TouchableWithoutFeedback as typeof RNTouchableWithoutFeedback, + TouchableWithoutFeedback: + TouchableWithoutFeedback as typeof RNTouchableWithoutFeedback, }; diff --git a/src/hooks/usePropsValidator.ts b/src/hooks/usePropsValidator.ts index 4ab507616..7addbdbe7 100644 --- a/src/hooks/usePropsValidator.ts +++ b/src/hooks/usePropsValidator.ts @@ -6,9 +6,6 @@ export const usePropsValidator = ({ index, snapPoints, topInset, - // animation - animationDuration, - animationEasing, }: BottomSheetProps) => { useMemo(() => { // snap points @@ -44,22 +41,6 @@ export const usePropsValidator = ({ ); // animations - invariant( - typeof animationDuration === 'number' || - typeof animationDuration === 'undefined', - `'animationDuration' was provided but with wrong type ! expected type is a number.` - ); - - invariant( - typeof animationDuration === 'number' ? animationDuration > 0 : true, - `'animationDuration' was provided but the value is very low! expected value to be greater than 0` - ); - - invariant( - typeof animationEasing === 'function' || - typeof animationEasing === 'undefined', - `'animationEasing' was provided but with wrong type ! expected type is a Animated.EasingFunction.` - ); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); }; diff --git a/src/hooks/useScrollableInternal.ts b/src/hooks/useScrollableInternal.ts index 0fa18f864..ebf780f76 100644 --- a/src/hooks/useScrollableInternal.ts +++ b/src/hooks/useScrollableInternal.ts @@ -1,5 +1,5 @@ import { useCallback } from 'react'; -import { findNodeHandle, NativeScrollEvent, Platform } from 'react-native'; +import { findNodeHandle, NativeScrollEvent } from 'react-native'; import { useAnimatedRef, useAnimatedScrollHandler, @@ -20,8 +20,6 @@ export const useScrollableInternal = () => { // refs const scrollableRef = useAnimatedRef(); const scrollableContentOffsetY = useSharedValue(0); - const justStartedScrolling = useSharedValue(0); - const initialScrollingPosition = useSharedValue(0); // hooks const { @@ -42,8 +40,6 @@ export const useScrollableInternal = () => { const handleScrollEvent = useAnimatedScrollHandler({ onBeginDrag: ({ contentOffset: { y } }: NativeScrollEvent) => { if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) { - initialScrollingPosition.value = y; - justStartedScrolling.value = 1; scrollableContentOffsetY.value = 0; _rootScrollableContentOffsetY.value = 0; return; @@ -52,14 +48,6 @@ export const useScrollableInternal = () => { _rootScrollableContentOffsetY.value = y; }, onScroll: () => { - /** @TODO remove this */ - if (Platform.OS === 'android' && justStartedScrolling.value === 1) { - justStartedScrolling.value = 0; - // @ts-ignore - scrollTo(scrollableRef, 0, initialScrollingPosition.value, false); - return; - } - if (animatedScrollableState.value === SCROLLABLE_STATE.LOCKED) { // @ts-ignore scrollTo(scrollableRef, 0, 0, false);