feat: support horizontal bounces for PagerScoll to make it looks like iOS component (#722)

Author: azurechen

example/src/TopBarIconExample.js

@@ -69,6 +69,7 @@ export default class TopBarIconExample extends React.Component<*, State> {
         renderScene={this._renderScene}
         renderTabBar={this._renderTabBar}
         onIndexChange={this._handleIndexChange}
+        bounces // only iOS
       />
     );
   }

example/src/TopBarTextExample.js

@@ -73,6 +73,7 @@ export default class TopBarTextExample extends React.Component<*, State> {
         renderTabBar={this._renderTabBar}
         onIndexChange={this._handleIndexChange}
         initialLayout={initialLayout}
+        bounces // only iOS
       />
     );
   }

src/PagerScroll.js

@@ -32,6 +32,7 @@ export default class PagerScroll<T: *> extends React.Component<
 
   static defaultProps = {
     canJumpToTab: () => true,
+    bounces: false,
   };
 
   constructor(props: Props<T>) {
@@ -140,6 +141,7 @@ export default class PagerScroll<T: *> extends React.Component<
       navigationState,
       onSwipeStart,
       onSwipeEnd,
+      bounces,
     } = this.props;
 
     return (
@@ -153,8 +155,8 @@ export default class PagerScroll<T: *> extends React.Component<
         scrollToOverflowEnabled
         scrollEnabled={this.props.swipeEnabled}
         automaticallyAdjustContentInsets={false}
-        bounces={false}
-        alwaysBounceHorizontal={false}
+        bounces={bounces}
+        alwaysBounceHorizontal={bounces}
         scrollsToTop={false}
         showsHorizontalScrollIndicator={false}
         scrollEventThrottle={1}

src/PropTypes.js

@@ -40,6 +40,7 @@ export const PagerRendererPropType = {
   jumpTo: PropTypes.func.isRequired,
   animationEnabled: PropTypes.bool,
   swipeEnabled: PropTypes.bool,
+  bounces: PropTypes.bool.isRequired,
   useNativeDriver: PropTypes.bool,
   onSwipeStart: PropTypes.func,
   onSwipeEnd: PropTypes.func,

src/TabBar.js

@@ -213,8 +213,8 @@ export default class TabBar<T: *> extends React.Component<Props<T>, State> {
     const translateX = Animated.multiply(
       Animated.multiply(
         position.interpolate({
-          inputRange: [0, navigationState.routes.length - 1],
-          outputRange: [0, navigationState.routes.length - 1],
+          inputRange: [-1, navigationState.routes.length],
+          outputRange: [-1, navigationState.routes.length],
           extrapolate: 'clamp',
         }),
         width

src/TypeDefinitions.js

@@ -46,6 +46,7 @@ export type PagerRendererProps<T> = PagerCommonProps<T> & {
 export type PagerCommonProps<T> = {
   animationEnabled?: boolean,
   swipeEnabled?: boolean,
+  bounces?: boolean,
   onSwipeStart?: () => mixed,
   onSwipeEnd?: () => mixed,
   onAnimationEnd?: () => mixed,