feat: add imperative setScrollEnabled method (#119)

* feat: add imperative setScrollEnabled method

* Update ios/ReactViewPagerManager.m

Co-Authored-By: troZee <[email protected]>

* Update ios/ReactViewPagerManager.m

Co-Authored-By: troZee <[email protected]>

* fix: github bad manual merge

Author: ferrannp

android/src/main/java/com/reactnativecommunity/viewpager/ReactViewPagerManager.java

@@ -30,6 +30,7 @@ public class ReactViewPagerManager extends ViewGroupManager<ReactViewPager> {
 
   private static final int COMMAND_SET_PAGE = 1;
   private static final int COMMAND_SET_PAGE_WITHOUT_ANIMATION = 2;
+  private static final int COMMAND_SET_SCROLL_ENABLED = 3;
 
   @Override
   public String getName() {
@@ -70,7 +71,9 @@ public Map<String,Integer> getCommandsMap() {
         "setPage",
         COMMAND_SET_PAGE,
         "setPageWithoutAnimation",
-        COMMAND_SET_PAGE_WITHOUT_ANIMATION);
+        COMMAND_SET_PAGE_WITHOUT_ANIMATION,
+        "setScrollEnabled",
+        COMMAND_SET_SCROLL_ENABLED);
   }
 
   @Override
@@ -89,6 +92,10 @@ public void receiveCommand(
         viewPager.setCurrentItemFromJs(args.getInt(0), false);
         return;
       }
+      case COMMAND_SET_SCROLL_ENABLED: {
+        viewPager.setScrollEnabled(args.getBoolean(0));
+        return;
+      }
       default:
         throw new IllegalArgumentException(String.format(
             "Unsupported command %d received by %s.",

example/ios/Podfile.lock

@@ -182,7 +182,7 @@ PODS:
     - React-cxxreact (= 0.61.4)
     - React-jsi (= 0.61.4)
   - React-jsinspector (0.61.4)
-  - react-native-viewpager (2.0.2):
+  - react-native-viewpager (3.1.0):
     - React
   - React-RCTActionSheet (0.61.4):
     - React-Core/RCTActionSheetHeaders (= 0.61.4)
@@ -326,7 +326,7 @@ SPEC CHECKSUMS:
   React-jsi: ca921f4041505f9d5197139b2d09eeb020bb12e8
   React-jsiexecutor: 8dfb73b987afa9324e4009bdce62a18ce23d983c
   React-jsinspector: d15478d0a8ada19864aa4d1cc1c697b41b3fa92f
-  react-native-viewpager: 88f4269c19d626d2ccd5f7c7f5f7f76422ddb9e3
+  react-native-viewpager: 66c02e8a18d2d11eef08c84ed9a406b149791751
   React-RCTActionSheet: 7369b7c85f99b6299491333affd9f01f5a130c22
   React-RCTAnimation: d07be15b2bd1d06d89417eb0343f98ffd2b099a7
   React-RCTBlob: 8e0b23d95c9baa98f6b0e127e07666aaafd96c34

ios/ReactViewPagerManager.m

@@ -32,6 +32,21 @@ - (void) goToPage
     }];
 }
 
+- (void) changeScrollEnabled
+: (nonnull NSNumber *)reactTag enabled
+: (BOOL)enabled {
+    [self.bridge.uiManager addUIBlock:^(
+                                        RCTUIManager *uiManager,
+                                        NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+        ReactNativePageView *view = (ReactNativePageView *)viewRegistry[reactTag];
+        if (!view || ![view isKindOfClass:[ReactNativePageView class]]) {
+            RCTLogError(@"Cannot find ReactNativePageView with tag #%@", reactTag);
+            return;
+        }
+        [view shouldScroll:enabled];
+    }];
+}
+
 RCT_EXPORT_METHOD(setPage
                   : (nonnull NSNumber *)reactTag index
                   : (nonnull NSNumber *)index) {
@@ -44,6 +59,13 @@ - (void) goToPage
     [self goToPage:reactTag index:index animated:false];
 }
 
+RCT_EXPORT_METHOD(setScrollEnabled
+                  : (nonnull NSNumber *)reactTag enabled
+                  : (nonnull NSNumber *)enabled) {
+    BOOL isEnabled = [enabled boolValue];
+    [self changeScrollEnabled:reactTag enabled:isEnabled];
+}
+
 RCT_CUSTOM_VIEW_PROPERTY(scrollEnabled, BOOL, ReactNativePageView) {
     [view shouldScroll:[RCTConvert BOOL:json]];
 }

js/ViewPager.js

@@ -146,6 +146,19 @@ class ViewPager extends React.Component<ViewPagerProps> {
     );
   };
 
+  /**
+   * A helper function to enable/disable scroll imperatively
+   * The recommended way is using the scrollEnabled prop, however, there might be a case where a
+   * imperative solution is more useful (e.g. for not blocking an animation)
+   */
+  setScrollEnabled = (scrollEnabled: boolean) => {
+    UIManager.dispatchViewManagerCommand(
+      ReactNative.findNodeHandle(this),
+      getViewManagerConfig(VIEW_MANAGER_NAME).Commands.setScrollEnabled,
+      [scrollEnabled],
+    );
+  };
+
   render() {
     return (
       <NativeViewPager