react-native-bottom-sheet
react-native-bottom-sheet copied to clipboard
Animate bottom sheet when unmounts
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}
/>
)
+1
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
@francois-pasquier thanks for your comment 🙏🏽
How a Portal
is adding such animation (sliding down), as mentioned on the description?
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?
@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
+1
👍
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.
👍
👍🏽
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.
The issue still exists
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.
👍🏽
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.
please GH don't close this 😢
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.
👍🏽
.
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.
🙏🏽
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.
still valid
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.
🙏🏽
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.
Still valid
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.
Still valid.
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.