search

osdnk / react-native-reanimated-bottom-sheet

Highly configurable bottom sheet component made with react-native-reanimated and react-native-gesture-handler
MIT License
3.33k stars 328 forks source link

No buttons in renderInner and renderHeader work when bottomSheet is open and placed on page content #298

Open akbari6776 opened 3 years ago

akbari6776 commented 3 years ago

Hello My page content for test create with View and inside of View i have Text, when bottomSheet is open i can slideUp and SlideDown but every buttons in the renderHeader or renderInner is not working because I realized that only the part of the bottomSheet that is on the view and text does not work , It looks like the view or text puts a hidden overlay on that part of the bottomSheet and this prevents the buttons from that part from being pressed.(my english is bad sorry)

akbari6776 commented 3 years ago

2PM 1PM in second image, close button on the top-left is not working because it is on the discover text

It will work if I lower the height of the bottonSheet and the close button is not placed on the discover text

text content style : content:{ paddingLeft: 10, paddingRight: 10, }

captainkishore21 commented 3 years ago

In the bottomSheet add --> enabledContentGestureInteraction={false}

Below is the bottom sheet which I implemented. It works

  <BottomSheet
    ref={sheetRef}
    snapPoints={[200, 0]}
    initialSnap={1}
    enabledGestureInteraction={true}
    enabledContentGestureInteraction={false}
    renderHeader={renderHead}
    renderContent={renderContent}
  />
eqlion commented 3 years ago

@captainkishore21 This way it would be impossible to move the BottomSheet with swipes. The actual solution is to import Touchables from react-native-gesture-handler and not from react-native. Take a look here: #219