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

Bottom sheet does not become visible if handleComponent is null #217

Closed
mskri opened this issue Jan 20, 2021 · 4 comments · Fixed by #224
Closed

Bottom sheet does not become visible if handleComponent is null #217

mskri opened this issue Jan 20, 2021 · 4 comments · Fixed by #224
Assignees
Labels
bug Something isn't working v2 Written in Reanimated v1 v3 Written in Reanimated v2

Comments

@mskri
Copy link

mskri commented Jan 20, 2021

Bug

Setting handleComponent to null breaks the bottom sheet.

  • Causes expand and snapTo methods to not make bottom sheet visible
  • Causes initial index snap point which should show bottom sheet, e.g. 50%, to show nothing (bottom sheet is not visible)
  • Causes backdrop to block rest of the screen if you add also backdropComponent={BottomSheetBackdrop} to props
    • This causes for example ScrollView in the screen to not work
    • If you set initial index to a snap point which should show bottom sheet you will see backdrop but not the bottom sheet

Environment info

Library Version
@gorhom/bottom-sheet 3.2.0
react-native 0.63.2
react-native-reanimated 2.0.0-rc.2
react-native-gesture-handler 1.9.0

Steps To Reproduce

Bottom sheet not displaying properly

When using following props bottom sheet displays nothing when it is expanded

<Button title="Expand" onPress={() => ref.current?.expand()} />
<BottomSheet
    ref={ref}
    index={-1}
    snapPoints={[0, '50%']}
    handleComponent={null}>
        <Text>test<Text>
</BottomSheet>
  1. Create a bottom sheet without a handle by using handleComponent={null}
  2. Add ref and make a button which triggers ref.current?.expand()
    => expand method does not make bottom sheet visible

Describe what you expected to happen:

When you call expand method the bottom sheet should be visible.

Backdrop showing when using initial index that should show bottom sheet

When using following props backdrop is visible but bottom sheet displays nothing

<BottomSheet
    ref={ref}
    index={1}
    snapPoints={[0, '50%']}
    handleComponent={null}
    backdropComponent={BottomSheetBackdrop}>
        <Text>test<Text>
</BottomSheet>
  1. ScrollView's in the screen stop working
  2. Bottom sheet is not visible (even if you use expand)

Describe what you expected to happen:

Bottom sheet should be visible and display text. Backdrop doesn't block rest of the screen.

Reproducible sample code

See above section for the used props.

@mskri mskri added the bug Something isn't working label Jan 20, 2021
@github-actions
Copy link

@mskri: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

@gorhom
Copy link
Owner

gorhom commented Jan 21, 2021

thanks @mskri for spotting and submitting this issue

@gorhom
Copy link
Owner

gorhom commented Jan 21, 2021

this should be resolved with v2.0.5 & v3.2.1 🎉

@danieloi
Copy link

Just confirmed the fix. Thanks a ton!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working v2 Written in Reanimated v1 v3 Written in Reanimated v2
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants