Skip to content

Commit

Permalink
feat: add simultaneousHandlers prop
Browse files Browse the repository at this point in the history
Hi! I've faced an issue with Lists inside BottomSheet, and I could not manage to make them work without adding simultaneousHandlers to every GH.
Maybe I misunderstood sth but I've tried to play around with innerGestureHandlerRefs but still, I could not make FlatList scrollable unless enabledGestureInteraction was false.

Expo example with broken and working FlatList: https://snack.expo.io/@dsznajder/bottomsheet-with-flatlist
  • Loading branch information
Damian Sznajder authored and osdnk committed Jun 25, 2019
1 parent db80164 commit 41b289f
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Expand Up @@ -71,6 +71,7 @@ class Example extends React.Component {
| overdragResistanceFactor | no | 0 | `Defines how violently sheet has to stopped while overdragging. 0 means no overdrag |
| springConfig | no | `{ }` | Overrides config for spring animation |
| innerGestureHandlerRefs | no | | Refs for gesture handlers used for building bottom sheet. The array consists fo three refs. The first for PanGH used for inner content scrolling. The second for PanGH used for header. The third for TapGH used for stopping scrolling the content. |
| simultaneousHandlers | no | | Accepts a react ref object or an array of refs to handler components. |


## Methods
Expand Down
8 changes: 8 additions & 0 deletions src/index.tsx
Expand Up @@ -64,6 +64,11 @@ type Props = {
*/
overdragResistanceFactor: number

/**
* Array of Refs passed to gesture handlers for simultaneous event handling
*/
simultaneousHandlers: Array<React.RefObject<any>> | React.RefObject<any>

/**
* Overrides config for spring animation
*/
Expand Down Expand Up @@ -708,6 +713,7 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
waitFor={this.panRef}
onGestureEvent={this.handleMasterPan}
onHandlerStateChange={this.handleMasterPan}
simultaneousHandlers={this.props.simultaneousHandlers}
>
<Animated.View
style={{
Expand All @@ -732,12 +738,14 @@ export default class BottomSheetBehavior extends React.Component<Props, State> {
ref={this.panRef}
onGestureEvent={this.handlePan}
onHandlerStateChange={this.handlePan}
simultaneousHandlers={this.props.simultaneousHandlers}
>
<Animated.View>
<TapGestureHandler
ref={this.tapRef}
enabled={this.props.enabledGestureInteraction}
onHandlerStateChange={this.handleTap}
simultaneousHandlers={this.props.simultaneousHandlers}
>
<Animated.View
style={{
Expand Down

2 comments on commit 41b289f

@saleksandras
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dsznajder Hey,
I noticed issue with this commit.
In README you describe simultaneousHandlers as not required.
but in src/index.tsx:70 you declare it as NOT optional.

Here is the error I'm getting while using version alpha.12:

error TS2741: Property 'simultaneousHandlers' is missing in type '{ ref: (modalRef: BottomSheetBehavior | null) => void; snapPoints: ReactText[]; renderHeader: () => ReactNode; renderContent: () => ReactNode; enabledGestureInteraction: boolean; callbackNode: AnimatedValue<...>; enabledInnerScrolling: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "snapPoints" | "renderContent" | "renderHeader" | "enabledManualSnapping" | "callbackNode" | "contentPosition" | "headerPosition" | "simultaneousHandlers">'.

26               <BottomSheetBehavior
                  ~~~~~~~~~~~~~~~~~~~

  node_modules/reanimated-bottom-sheet/lib/typescript/index.d.ts:53:5
    53     simultaneousHandlers: Array<React.RefObject<any>> | React.RefObject<any>;
           ~~~~~~~~~~~~~~~~~~~~
    'simultaneousHandlers' is declared here.

@chillios-dev
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Och, sorry! I've forgot to make this prop optional.

Please sign in to comment.