[v4] App crashes when closing sheet before it's finished opening #1382
Description
Bug
When opening a bottom sheet and closing it quickly before the open animation is finished causes the app to crash
Environment info
| Library | Version |
|---|---|
| @gorhom/bottom-sheet | 4.4.6 |
| react-native | 0.71.8 |
| react-native-reanimated | 2.14.4 |
| react-native-gesture-handler | 2.9.0 |
Steps To Reproduce
- Open the sheet
- Tap outside to close it before the opening animation has finished
Reproducible sample code
This is how I use the sheet isolated into it's own component
`export default function Sheet ({ onClose, children }) {
const initialSnapPoints = useMemo(() => ['CONTENT_HEIGHT'], []);
const {
animatedHandleHeight,
animatedSnapPoints,
animatedContentHeight,
handleContentLayout,
} = useBottomSheetDynamicSnapPoints(initialSnapPoints);
// ref
const bottomSheetRef = useRef(null);
// callbacks
const handleSheetChanges = useCallback((index) => {
if (index === -1) {
onClose()
}
}, []);
return (
<Portal>
<View style={{ flex: 1 }}>
<BottomSheet
ref={bottomSheetRef}
index={0}
onChange={handleSheetChanges}
keyboardBehavior="fillParent"
snapPoints={animatedSnapPoints}
handleHeight={animatedHandleHeight}
contentHeight={animatedContentHeight}
enablePanDownToClose={true}
backdropComponent={(props) => <BottomSheetBackdrop {...props} opacity={0.8} appearsOnIndex={0} disappearsOnIndex={-1} />}
backgroundStyle={{ backgroundColor: colors.mono6 }}>
<BottomSheetScrollView
onLayout={handleContentLayout}
contentContainerStyle={styles.scrollView}
style={{
maxHeight: Dimensions.get('window').height - 160,
}}>
<View>
</View>
</BottomSheetScrollView>
</BottomSheet>
</View>
</Portal>
)
}`