feat: add keepVisibleAfterExiting prop to SlideAnimatedVIew

Author: Petr Konecny

package.json

@@ -72,5 +72,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "repository": "https://github.com/strvcom/react-native-hero-carousel"
+  "repository": "https://github.com/strvcom/react-native-hero-carousel",
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/SlideAnimatedView/index.tsx

@@ -4,6 +4,7 @@ import Animated, {
   useAnimatedReaction,
   runOnJS,
   AnimatedProps,
+  useSharedValue,
 } from 'react-native-reanimated'
 import { interpolateInsideCarousel } from '../../utils'
 import { useState } from 'react'
@@ -17,6 +18,7 @@ type SlideAnimatedViewProps = {
   enteringThreshold?: number
   exitingThreshold?: number
   style?: AnimatedProps<ViewProps>['style']
+  keepVisibleAfterExiting?: boolean
 }
 
 export const SlideAnimatedView = ({
@@ -26,11 +28,13 @@ export const SlideAnimatedView = ({
   layout,
   enteringThreshold = 0.99,
   exitingThreshold = 0.01,
+  keepVisibleAfterExiting = false,
   style,
 }: SlideAnimatedViewProps) => {
   const { index, total } = useAutoCarouselSlideIndex()
   const { scrollValue } = useCarouselContext()
   const [shouldShow, setShouldShow] = useState(false)
+  const exited = useSharedValue<boolean>(false)
 
   const value = useDerivedValue(() => {
     return interpolateInsideCarousel(scrollValue.value, index, total, {
@@ -56,7 +60,11 @@ export const SlideAnimatedView = ({
         currentValue <= exitingThreshold &&
         (previousValue === null || previousValue > exitingThreshold)
       ) {
+        if (keepVisibleAfterExiting && exited.value) {
+          return
+        }
         runOnJS(setShouldShow)(false)
+        exited.value = true
       }
     },
     [enteringThreshold, exitingThreshold],