Android ScrollView: Add scrollBy method

Currently, React Native allows you to scroll a ScrollView to a particular position using `scrollTo`. If instead you want to scroll by a delta, you could try to do this using `scrollTo` (add the delta to the current scroll position) but this doesn't always work out as intended due to the async nature of React Native (what you think is the current scroll position might be a stale value). This change introduces a `scrollBy` API to solve this problem. `scrollBy` takes a delta to scroll by and native takes care of doing the arithmetic because it knows the latest scroll position.

Libraries/Components/ScrollResponder.js

@@ -438,6 +438,21 @@ var ScrollResponderMixin = {
     );
   },
 
+  /**
+   * A helper function to scroll by a specific offset in the ScrollView.
+   * This is useful when you want to change the size of the content view and scroll
+   * position at the same time. Syntax:
+   *
+   * scrollResponderScrollBy(options: {deltaX: number = 0; deltaY: number = 0; animated: boolean = true})
+   */
+  scrollResponderScrollBy: function(options : {deltaX?: number, deltaY?: number, animated?: boolean}) {
+    UIManager.dispatchViewManagerCommand(
+      this.scrollResponderGetScrollableNode(),
+      UIManager.RCTScrollView.Commands.scrollBy,
+      [options.deltaX || 0, options.deltaY || 0, options.animated !== false],
+    );
+  },
+
   /**
    * Deprecated, do not use.
    */

Libraries/Components/ScrollView/ScrollView.js

@@ -530,6 +530,19 @@ const ScrollView = createReactClass({
     });
   },
 
+  /**
+   * Scrolls by a given offset, either immediately or with a smooth animation.
+   *
+   * Syntax:
+   *
+   * `scrollBy(options: {deltaX: number = 0; deltaY: number = 0; animated: boolean = true})`
+   */
+  scrollBy: function(options: { deltaX?: number, deltaY?: number, animated?: boolean } ) {
+    const data = {deltaX: options.deltaX || 0, deltaY: options.deltaY || 0,
+      animated: options.animated !== false};
+    this.getScrollResponder().scrollResponderScrollBy(data);
+  },
+
   /**
    * Deprecated, use `scrollTo` instead.
    */

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java

@@ -149,6 +149,19 @@ public void scrollToEnd(
     }
   }
 
+  @Override
+  public void scrollBy(
+      ReactHorizontalScrollView scrollView,
+      ReactScrollViewCommandHelper.ScrollByCommandData data) {
+    int x = scrollView.getScrollX() + data.mDeltaX;
+    int y = scrollView.getScrollY() + data.mDeltaY;
+    if (data.mAnimated) {
+      scrollView.smoothScrollTo(x, y);
+    } else {
+      scrollView.scrollTo(x, y);
+    }
+  }
+
   /**
    * When set, fills the rest of the scrollview with a color to avoid setting a background and
    * creating unnecessary overdraw.

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewCommandHelper.java

@@ -26,10 +26,12 @@ public class ReactScrollViewCommandHelper {
 
   public static final int COMMAND_SCROLL_TO = 1;
   public static final int COMMAND_SCROLL_TO_END = 2;
+  public static final int COMMAND_SCROLL_BY = 3;
 
   public interface ScrollCommandHandler<T> {
     void scrollTo(T scrollView, ScrollToCommandData data);
     void scrollToEnd(T scrollView, ScrollToEndCommandData data);
+    void scrollBy(T scrollView, ScrollByCommandData data);
   }
 
   public static class ScrollToCommandData {
@@ -53,12 +55,26 @@ public static class ScrollToEndCommandData {
     }
   }
 
+  public static class ScrollByCommandData {
+
+    public final int mDeltaX, mDeltaY;
+    public final boolean mAnimated;
+
+    ScrollByCommandData(int deltaX, int deltaY, boolean animated) {
+      mDeltaX = deltaX;
+      mDeltaY = deltaY;
+      mAnimated = animated;
+    }
+  }
+
   public static Map<String,Integer> getCommandsMap() {
     return MapBuilder.of(
         "scrollTo",
         COMMAND_SCROLL_TO,
         "scrollToEnd",
-        COMMAND_SCROLL_TO_END);
+        COMMAND_SCROLL_TO_END,
+        "scrollBy",
+        COMMAND_SCROLL_BY);
   }
 
   public static <T> void receiveCommand(
@@ -82,6 +98,14 @@ public static <T> void receiveCommand(
         viewManager.scrollToEnd(scrollView, new ScrollToEndCommandData(animated));
         return;
       }
+      case COMMAND_SCROLL_BY: {
+        int deltaX = Math.round(PixelUtil.toPixelFromDIP(args.getDouble(0)));
+        int deltaY = Math.round(PixelUtil.toPixelFromDIP(args.getDouble(1)));
+        boolean animated = args.getBoolean(2);
+
+        viewManager.scrollBy(scrollView, new ScrollByCommandData(deltaX, deltaY, animated));
+        return;
+      }
       default:
         throw new IllegalArgumentException(String.format(
             "Unsupported command %d received by %s.",

ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactScrollViewManager.java

@@ -210,6 +210,19 @@ public void scrollToEnd(
     }
   }
 
+  @Override
+  public void scrollBy(
+      ReactScrollView scrollView,
+      ReactScrollViewCommandHelper.ScrollByCommandData data) {
+    int x = scrollView.getScrollX() + data.mDeltaX;
+    int y = scrollView.getScrollY() + data.mDeltaY;
+    if (data.mAnimated) {
+      scrollView.smoothScrollTo(x, y);
+    } else {
+      scrollView.scrollTo(x, y);
+    }
+  }
+
   @Override
   public @Nullable Map getExportedCustomDirectEventTypeConstants() {
     return createExportedCustomDirectEventTypeConstants();