Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v4] App crashes when closing sheet before it's finished opening #1382

Closed
Lewitje opened this issue May 23, 2023 · 5 comments
Closed

[v4] App crashes when closing sheet before it's finished opening #1382

Lewitje opened this issue May 23, 2023 · 5 comments
Labels
bug Something isn't working no-issue-activity

Comments

@Lewitje
Copy link

Lewitje commented May 23, 2023

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

  1. Open the sheet
  2. 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>
)

}`

@Lewitje Lewitje added the bug Something isn't working label May 23, 2023
@Lewitje
Copy link
Author

Lewitje commented May 23, 2023

Trying to create a snack to reproduce the error, but can't quite get it to work:
https://snack.expo.dev/@lewitje/bottom-sheet-v4-reproducible-issue-template?platform=web

@Lewitje
Copy link
Author

Lewitje commented May 23, 2023

#1367 This pr might fix it, waiting for merge

@Lewitje
Copy link
Author

Lewitje commented May 23, 2023

#1367 This pr might fix it, waiting for merge

Just tested, this doesn't fix the issue

@github-actions
Copy link

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.

@github-actions
Copy link

This issue was closed because it has been stalled for 5 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working no-issue-activity
Projects
None yet
Development

No branches or pull requests

1 participant