feat(ios): disable/enable scroll bounces (#274)

arekkubaczkowski · Arkadiusz Kubaczkowski · troZee · web-flow · commit cf88452d5bce · 2021-01-14T14:12:55.000+01:00
* chore: add prop to disable/enable scroll bounces

* chore: add readme and control button

* chore: generate types

Co-authored-by: Arkadiusz Kubaczkowski &lt;arek.kubaczkowski@callstak.com&gt;
Co-authored-by: Piotr Trocki &lt;pan.stroncky@gmail.com&gt;
diff --git a/README.md b/README.md
@@ -137,6 +137,7 @@ const styles = StyleSheet.create({
 |`showPageIndicator: boolean`|Shows the dots indicator at the bottom of the view|iOS
 |`overScrollMode: OverScollMode`|Used to override default value of overScroll mode. Can be `auto`, `always` or `never`. Defaults to `auto`|Android
 |`offscreenPageLimit: number`|Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0.|Android
+|`overdrag: boolean`|Allows for overscrolling after reaching the end or very beginning or pages|iOS
 
 ## Preview
 
diff --git a/example/src/BasicViewPagerExample.tsx b/example/src/BasicViewPagerExample.tsx
@@ -18,6 +18,7 @@ export function BasicViewPagerExample() {
         ref={ref}
         style={styles.viewPager}
         initialPage={0}
+        overdrag={navigationPanel.overdragEnabled}
         scrollEnabled={navigationPanel.scrollEnabled}
         onPageScroll={navigationPanel.onPageScroll}
         onPageSelected={navigationPanel.onPageSelected}
@@ -40,6 +41,7 @@ export function BasicViewPagerExample() {
           [navigationPanel.pages]
         )}
       </AnimatedViewPager>
+
       <NavigationPanel {...navigationPanel} />
     </SafeAreaView>
   );
diff --git a/example/src/component/NavigationPanel/ControlPanel.tsx b/example/src/component/NavigationPanel/ControlPanel.tsx
@@ -13,12 +13,14 @@ export function ControlsPanel({
   dotsEnabled,
   progress,
   disablePagesAmountManagement,
+  overdragEnabled,
   setPage,
   addPage,
   removePage,
   toggleScroll,
   toggleDots,
   toggleAnimation,
+  toggleOverdrag,
 }: NavigationPanelProps) {
   const firstPage = useCallback(() => setPage(0), [setPage]);
   const prevPage = useCallback(() => setPage(activePage - 1), [
@@ -33,6 +35,7 @@ export function ControlsPanel({
     pages.length,
     setPage,
   ]);
+
   return (
     <>
       <View style={styles.buttons}>
@@ -45,13 +48,19 @@ export function ControlsPanel({
           text={dotsEnabled ? 'Hide dots' : 'Show dots'}
           onPress={toggleDots}
         />
+        <Button
+          style={styles.buttonAdjustment}
+          text={overdragEnabled ? 'Overdrag Enabled' : 'Overdrag Disabled'}
+          onPress={() => toggleOverdrag()}
+        />
       </View>
       {!disablePagesAmountManagement ? (
         <View style={styles.buttons}>
           <Button text="Add new page" onPress={addPage} />
           <Button text="Remove last page" onPress={removePage} />
         </View>
       ) : null}
+
       <View style={styles.buttons}>
         <Button
           text={isAnimated ? 'Turn off animations' : 'Turn animations back on'}
diff --git a/example/src/hook/useNavigationPanel.ts b/example/src/hook/useNavigationPanel.ts
@@ -29,6 +29,7 @@ export function useNavigationPanel(
   );
   const [activePage, setActivePage] = useState(0);
   const [isAnimated, setIsAnimated] = useState(true);
+  const [overdragEnabled, setOverdragEnabled] = useState(false);
   const [scrollEnabled, setScrollEnabled] = useState(true);
   const [scrollState, setScrollState] = useState('idle');
   const [dotsEnabled, setDotsEnabled] = useState(false);
@@ -70,6 +71,10 @@ export function useNavigationPanel(
     () => setDotsEnabled((enabled) => !enabled),
     []
   );
+  const toggleOverdrag = useCallback(
+    () => setOverdragEnabled((enabled) => !enabled),
+    []
+  );
 
   const onPageScroll = useMemo(
     () =>
@@ -144,6 +149,7 @@ export function useNavigationPanel(
     scrollEnabled,
     dotsEnabled,
     progress,
+    overdragEnabled,
     setPage,
     addPage,
     removePage,
@@ -154,6 +160,7 @@ export function useNavigationPanel(
     onPageScroll,
     onPageSelected,
     onPageScrollStateChanged,
+    toggleOverdrag,
     logs,
   };
 }
diff --git a/ios/ReactNativePageView.h b/ios/ReactNativePageView.h
@@ -20,6 +20,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property(nonatomic, copy) RCTDirectEventBlock onPageSelected;
 @property(nonatomic, copy) RCTDirectEventBlock onPageScroll;
 @property(nonatomic, copy) RCTDirectEventBlock onPageScrollStateChanged;
+@property(nonatomic) BOOL overdrag;
 
 
 - (void)goTo:(NSInteger)index animated:(BOOL)animated;
diff --git a/ios/ReactNativePageView.m b/ios/ReactNativePageView.m
@@ -41,6 +41,7 @@ - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher {
         _coalescingKey = 0;
         _eventDispatcher = eventDispatcher;
         _cachedControllers = [NSHashTable weakObjectsHashTable];
+        _overdrag = YES;
     }
     return self;
 }
@@ -95,9 +96,9 @@ - (void)embed {
             self.scrollView = (UIScrollView *)subview;
         }
     }
-        
+    
     self.reactPageViewController = pageViewController;
-        
+    
     UIPageControl *pageIndicatorView = [self createPageIndicator];
     
     pageIndicatorView.numberOfPages = self.reactSubviews.count;
@@ -210,17 +211,17 @@ - (void)goTo:(NSInteger)index animated:(BOOL)animated {
     if (numberOfPages == 0 || index < 0) {
         return;
     }
-        
+    
     UIPageViewControllerNavigationDirection direction = (index > self.currentIndex) ? UIPageViewControllerNavigationDirectionForward : UIPageViewControllerNavigationDirectionReverse;
     
     NSInteger indexToDisplay = index < numberOfPages ? index : numberOfPages - 1;
     
     UIView *viewToDisplay = self.reactSubviews[indexToDisplay];
     UIViewController *controllerToDisplay = [self findAndCacheControllerForView:viewToDisplay];
-
+    
     self.reactPageIndicatorView.numberOfPages = numberOfPages;
     self.reactPageIndicatorView.currentPage = indexToDisplay;
-        
+    
     [self setReactViewControllers:indexToDisplay
                              with:controllerToDisplay
                         direction:direction
@@ -233,12 +234,12 @@ - (UIViewController *)findAndCacheControllerForView:(UIView *)viewToDisplay {
     
     UIViewController *controllerToDisplay = [self findCachedControllerForView:viewToDisplay];
     UIViewController *current = [self currentlyDisplayed];
-
+    
     if (!controllerToDisplay && current.view.reactTag == viewToDisplay.reactTag) {
         controllerToDisplay = current;
     }
     if (!controllerToDisplay) {
-         controllerToDisplay = [[UIViewController alloc] initWithView:viewToDisplay];
+        controllerToDisplay = [[UIViewController alloc] initWithView:viewToDisplay];
     }
     [self.cachedControllers addObject:controllerToDisplay];
     
@@ -255,7 +256,7 @@ - (UIViewController *)nextControllerForController:(UIViewController *)controller
     }
     
     direction == UIPageViewControllerNavigationDirectionForward ? index++ : index--;
-
+    
     if (index < 0 || (index > (numberOfPages - 1))) {
         return nil;
     }
@@ -334,6 +335,14 @@ - (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
 
 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset {
     [self.eventDispatcher sendEvent:[[RCTOnPageScrollStateChanged alloc] initWithReactTag:self.reactTag state:@"settling" coalescingKey:_coalescingKey++]];
+    
+    if (!_overdrag) {
+        if (_currentIndex == 0 && scrollView.contentOffset.x <= scrollView.bounds.size.width) {
+            *targetContentOffset = CGPointMake(scrollView.bounds.size.width, 0);
+        } else if (_currentIndex == _reactPageIndicatorView.numberOfPages -1 && scrollView.contentOffset.x >= scrollView.bounds.size.width) {
+            *targetContentOffset = CGPointMake(scrollView.bounds.size.width, 0);
+        }
+    }
 }
 
 - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
@@ -343,6 +352,15 @@ - (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
     CGPoint point = scrollView.contentOffset;
     float offset = 0;
+    
+    if (!_overdrag) {
+        if (_currentIndex == 0 && scrollView.contentOffset.x < scrollView.bounds.size.width) {
+            scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
+        } else if (_currentIndex == _reactPageIndicatorView.numberOfPages - 1 && scrollView.contentOffset.x > scrollView.bounds.size.width) {
+            scrollView.contentOffset = CGPointMake(scrollView.bounds.size.width, 0);
+        }
+    }
+    
     if (self.orientation == UIPageViewControllerNavigationOrientationHorizontal) {
         if (self.frame.size.width != 0) {
             offset = (point.x - self.frame.size.width)/self.frame.size.width;
diff --git a/ios/ReactViewPagerManager.m b/ios/ReactViewPagerManager.m
@@ -15,6 +15,8 @@ @implementation ReactViewPagerManager
 RCT_EXPORT_VIEW_PROPERTY(onPageSelected, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPageScroll, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onPageScrollStateChanged, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(overdrag, BOOL)
+
 
 - (void) goToPage
                   : (nonnull NSNumber *)reactTag index
diff --git a/lib/typescript/example/src/component/NavigationPanel/ControlPanel.d.ts b/lib/typescript/example/src/component/NavigationPanel/ControlPanel.d.ts
@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { NavigationPanelProps } from './types';
-export declare function ControlsPanel({ activePage, isAnimated, pages, scrollState, scrollEnabled, dotsEnabled, progress, disablePagesAmountManagement, setPage, addPage, removePage, toggleScroll, toggleDots, toggleAnimation, }: NavigationPanelProps): JSX.Element;
+export declare function ControlsPanel({ activePage, isAnimated, pages, scrollState, scrollEnabled, dotsEnabled, progress, disablePagesAmountManagement, overdragEnabled, setPage, addPage, removePage, toggleScroll, toggleDots, toggleAnimation, toggleOverdrag, }: NavigationPanelProps): JSX.Element;
diff --git a/lib/typescript/example/src/hook/useNavigationPanel.d.ts b/lib/typescript/example/src/hook/useNavigationPanel.d.ts
@@ -19,6 +19,7 @@ export declare function useNavigationPanel(pagesAmount?: number, onPageSelectedC
         position: number;
         offset: number;
     };
+    overdragEnabled: boolean;
     setPage: (page: number) => void;
     addPage: () => void;
     removePage: () => void;
@@ -32,5 +33,6 @@ export declare function useNavigationPanel(pagesAmount?: number, onPageSelectedC
     onPageScroll: (...args: any[]) => void;
     onPageSelected: (...args: any[]) => void;
     onPageScrollStateChanged: (e: PageScrollStateChangedNativeEvent) => void;
+    toggleOverdrag: () => void;
     logs: EventLog[];
 };
diff --git a/lib/typescript/src/types.d.ts b/lib/typescript/src/types.d.ts
@@ -95,4 +95,9 @@ export interface ViewPagerProps {
      * Android only
      */
     overScrollMode?: OverScrollMode;
+    /**
+     * Determines whether it's possible to overscroll a bit
+     * after reaching end or very beginning of pages.
+     */
+    overdrag?: boolean;
 }
diff --git a/src/types.ts b/src/types.ts
@@ -112,4 +112,9 @@ export interface ViewPagerProps {
    * Android only
    */
   overScrollMode?: OverScrollMode;
+  /**
+   * Determines whether it's possible to overscroll a bit
+   * after reaching end or very beginning of pages.
+   */
+  overdrag?: boolean;
 }
