Animate bottom sheet when unmounts

[andrecrimb]

Feature Request

Why it is needed

Bottom sheet has currently available the animateOnMount prop which:

... initially mount the sheet closed and when it is mounted and calculated the layout, it will snap to initial snap point index.

Our team came across a use case, where we need to have the same animation but when the BS unmounts (some sort of exiting animation). I believe this feature is quite beneficial for those who need to handle several bottom sheets and seek some sort of a continuation flow. (eg. one BS slides down and another one slides up)

Possible implementation

Reanimated 2 allows animated views to have exiting animations.

Code sample

I imagine the use of animatedOnUnmount (or animateOnExiting) something like:

 return (
   <BottomSheet
      animateOnExiting={true}
      {...otherProps}
    />
)

[Norcy]

+1

[francois-pasquier]

For now you can do this:

const App = () => {
    const [isBottomSheetMounted, setBottomSheetMounted] = useState(false)
    const [isBottomSheetAnimationCompleted, setBottomSheetAnimationCompleted] = useState(false)

    const handleBottomSheetChange = (index: number) => {
        if (!isBottomSheetAnimationCompleted && index === 0) {
            setBottomSheetAnimationCompleted(true)
        }

        if (index === -1) {
            setBottomSheetMounted(false)
        }
    }
    
    return (
      <View>
       {isBottomSheetMounted && (
          <Portal>
            <BottomSheet onChange={handleBottomSheetChange} />
          </Portal>
       )}
     </View>
    )
}

export default App

[andrecrimb]

@francois-pasquier thanks for your comment 🙏🏽 How a Portal is adding such animation (sliding down), as mentioned on the description?

[francois-pasquier]

Well, the Portal is only there to mount the bottom sheet on the root node. When handleBottomSheetChange is called, it dismounts the Portal only after the animation is completed.

Does it not work as expected?

[andrecrimb]

@francois-pasquier thanks for your reply!

For me isn't clear how your suggestion can cover cases, eg., where a component with the BS conditionally unmounts, because of its parents.

Eg. Here's how we can achieve such using Animated.View

import React from 'react';
import { View, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import Animated, { SlideOutDown } from 'react-native-reanimated';

const ChildrenComponentWithBottomSheet = () => {
  const snapPoints = React.useMemo(() => [600, 700], []);
  return (
    <Animated.View style={{ flex: 1 }} exiting={SlideOutDown}>
      <BottomSheet snapPoints={snapPoints}>
        <View />
      </BottomSheet>
    </Animated.View>
  );
};

const ChildrenComponent = () => (
  <View style={{ flex: 1 }}>
    <ChildrenComponentWithBottomSheet />
  </View>
);

const SomeComponentOnTheAppTree = () => {
  const [toggle, setToggle] = React.useState(true);

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'grey',
      }}
    >
      <View style={{ position: 'absolute', top: 100, zIndex: 9999, left: 10 }}>
        <Button
          color="red"
          title={`Conditionally rendering children with BS.\n ${
            toggle ? 'Mounted' : 'Unmounted'
          }`}
          onPress={() => setToggle((v) => !v)}
        />
      </View>
      {toggle ? <ChildrenComponent /> : null}
    </View>
  );
};

https://user-images.githubusercontent.com/16760718/190382025-c427693d-9597-4d79-b496-a3e956208301.mov

[ilkkaylik]

+1

[wadey1]

👍

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[ilkkaylik]

👍

[andrecrimb]

👍🏽

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[pedpess]

The issue still exists

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

👍🏽

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[pedpess]

please GH don't close this 😢

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

👍🏽

[gstcarv]

.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

🙏🏽

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[ilkkaylik]

still valid

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

🙏🏽

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

Still valid

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[andrecrimb]

Still valid.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.