feat: allow passing additional props to pager

In cases when TabView is used along with another handler of react-native-gesture-handler, it's required to pass additional props to underlying PanGestureHandler, such as various refs to wait for/simultaneously work with etc. Different people need to pass different props, so I decided to accept and spread just an object of props instead of listing each of "allowed" additional props. There are no Flow typedefs in react-native-gesture-handler, so the type of pagerProps is just Object.

Author: lebedev

README.md

@@ -348,6 +348,17 @@ Style to apply to the view wrapping each screen. You can pass this to override s
 
 Style to apply to the tab view container.
 
+##### `gestureHandlerProps`
+
+An object with props to be passed to undelying [`PanGestureHandler`](https://kmagiera.github.io/react-native-gesture-handler/docs/handler-pan.html#properties). For example:
+
+```js
+pagerProps={{
+  maxPointers: 1,
+  waitFor: [someRef]
+}}
+```
+
 ### `TabBar`
 
 Material design themed tab bar. To customize the tab bar, you'd need to use the `renderTabBar` prop of `TabView` to render the `TabBar` and pass additional props.

src/Pager.tsx

@@ -35,6 +35,7 @@ type Props<T extends Route> = PagerCommonProps & {
       jumpTo: (key: string) => void;
     }
   ) => React.ReactNode;
+  gestureHandlerProps: React.ComponentProps<typeof PanGestureHandler>;
 };
 
 const {
@@ -595,6 +596,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
       swipeEnabled,
       children,
       removeClippedSubviews,
+      gestureHandlerProps,
     } = this.props;
 
     const translateX = this.getTranslateX(
@@ -615,6 +617,7 @@ export default class Pager<T extends Route> extends React.Component<Props<T>> {
           onHandlerStateChange={this.handleGestureEvent}
           activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
           failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
+          {...gestureHandlerProps}
         >
           <Animated.View
             removeClippedSubviews={removeClippedSubviews}

src/TabView.tsx

@@ -6,6 +6,7 @@ import {
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import TabBar, { Props as TabBarProps } from './TabBar';
 import Pager from './Pager';
@@ -39,6 +40,7 @@ type Props<T extends Route> = PagerCommonProps & {
   removeClippedSubviews?: boolean;
   sceneContainerStyle?: StyleProp<ViewStyle>;
   style?: StyleProp<ViewStyle>;
+  gestureHandlerProps: React.ComponentProps<typeof PanGestureHandler>;
 };
 
 type State = {
@@ -61,6 +63,7 @@ export default class TabView<T extends Route> extends React.Component<
     removeClippedSubviews: false,
     springConfig: {},
     timingConfig: {},
+    gestureHandlerProps: {},
   };
 
   state = {
@@ -111,6 +114,7 @@ export default class TabView<T extends Route> extends React.Component<
       renderLazyPlaceholder,
       sceneContainerStyle,
       style,
+      gestureHandlerProps,
     } = this.props;
     const { layout } = this.state;
 
@@ -129,6 +133,7 @@ export default class TabView<T extends Route> extends React.Component<
           onSwipeEnd={onSwipeEnd}
           onIndexChange={this.jumpToIndex}
           removeClippedSubviews={removeClippedSubviews}
+          gestureHandlerProps={gestureHandlerProps}
         >
           {({ position, render, addListener, removeListener, jumpTo }) => {
             // All of the props here must not change between re-renders