fix: stabilise animated callback node variables

example/src/screens/modal/BackdropExample.tsx

@@ -1,13 +1,21 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import { View, StyleSheet, Alert } from 'react-native';
-import { BottomSheetModal, BottomSheetBackdrop } from '@gorhom/bottom-sheet';
+import {
+  BottomSheetModal,
+  BottomSheetBackdrop,
+  BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
 import Button from '../../components/button';
 import ContactListContainer from '../../components/contactListContainer';
 import withModalProvider from '../withModalProvider';
 
 const BackdropExample = () => {
+  // refs
   const bottomSheetRef = useRef<BottomSheetModal>(null);
 
+  // variables
+  const snapPoints = useMemo(() => ['25%', '50%'], []);
+
   // callbacks
   const handleDismiss = useCallback(() => {
     Alert.alert('Modal Been Dismissed');
@@ -17,6 +25,12 @@ const BackdropExample = () => {
   }, []);
 
   // renders
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop {...props} appearsOnIndex={2} />
+    ),
+    []
+  );
   return (
     <View style={styles.container}>
       <Button
@@ -26,10 +40,9 @@ const BackdropExample = () => {
       />
       <BottomSheetModal
         ref={bottomSheetRef}
-        snapPoints={['25%', '50%']}
-        animationDuration={250}
+        snapPoints={snapPoints}
         onDismiss={handleDismiss}
-        backdropComponent={BottomSheetBackdrop}
+        backdropComponent={renderBackdrop}
       >
         <ContactListContainer title="Modal FlatList" type="FlatList" />
       </BottomSheetModal>

src/components/bottomSheet/BottomSheet.tsx

@@ -269,13 +269,15 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       adjustedSnapPoints.push(safeContainerHeight);
       adjustedSnapPointsIndexes.push(-1);
 
-      return interpolate(
-        animatedPosition.value,
-        adjustedSnapPoints,
-        adjustedSnapPointsIndexes,
-        Extrapolate.CLAMP
-      );
-    }, [snapPoints, safeContainerHeight]);
+      return isLayoutCalculated
+        ? interpolate(
+            animatedPosition.value,
+            adjustedSnapPoints,
+            adjustedSnapPointsIndexes,
+            Extrapolate.CLAMP
+          )
+        : -1;
+    }, [snapPoints, safeContainerHeight, isLayoutCalculated]);
 
     // callbacks
     const animateToPointCompleted = useWorkletCallback(() => {

src/components/bottomSheetBackdrop/BottomSheetBackdrop.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo, useRef } from 'react';
+import React, { memo, useMemo } from 'react';
 import Animated, {
   interpolate,
   Extrapolate,
@@ -39,7 +39,6 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region variables
-  const containerRef = useRef<Animated.View>(null);
   const pointerEvents = useMemo(() => (enableTouchThrough ? 'none' : 'auto'), [
     enableTouchThrough,
   ]);
@@ -48,7 +47,7 @@ const BottomSheetBackdropComponent = ({
   //#region tap gesture
   const gestureHandler = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>(
     {
-      onStart: () => {
+      onFinish: () => {
         runOnJS(close)();
       },
     }
@@ -66,18 +65,20 @@ const BottomSheetBackdropComponent = ({
   //#endregion
 
   //#region styles
-  const containerAnimatedStyle = useAnimatedStyle(
-    () => ({
-      opacity: interpolate(
-        animatedIndex.value,
-        [-1, disappearsOnIndex, appearsOnIndex],
-        [0, 0, opacity],
-        Extrapolate.CLAMP
-      ),
-      top: animatedIndex.value <= disappearsOnIndex ? WINDOW_HEIGHT : 0,
-    }),
-    [opacity, disappearsOnIndex, appearsOnIndex]
-  );
+  const containerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(
+      animatedIndex.value,
+      [-1, disappearsOnIndex, appearsOnIndex],
+      [0, 0, opacity],
+      Extrapolate.CLAMP
+    ),
+    transform: [
+      {
+        translateY:
+          animatedIndex.value <= disappearsOnIndex ? WINDOW_HEIGHT : 0,
+      },
+    ],
+  }));
   const containerStyle = useMemo(
     () => [styles.container, style, containerAnimatedStyle],
     [style, containerAnimatedStyle]
@@ -101,7 +102,6 @@ const BottomSheetBackdropComponent = ({
   return closeOnPress ? (
     <TapGestureHandler onGestureEvent={gestureHandler}>
       <Animated.View
-        ref={containerRef}
         style={containerStyle}
         accessible={true}
         accessibilityRole="button"