[Android] ScrollView with TextInput not detecting Scroll Gesture

ReactAndroid/src/main/java/com/facebook/react/views/textinput/ReactEditText.java

@@ -90,6 +90,10 @@ public class ReactEditText extends AppCompatEditText
   protected int mNativeEventCount;
 
   private static final int UNSET = -1;
+  private static final int LEFT = -1;
+  private static final int UP = -1;
+  private static final int RIGHT = 1;
+  private static final int DOWN = 1;
 
   private @Nullable ArrayList<TextWatcher> mListeners;
   private @Nullable TextWatcherDelegator mTextWatcherDelegator;
@@ -111,6 +115,10 @@ public class ReactEditText extends AppCompatEditText
   private int mFontStyle = ReactTypefaceUtils.UNSET;
   private boolean mAutoFocus = false;
   private boolean mDidAttachToWindow = false;
+  private float mPreviousYCoordinates;
+  private float mPreviousXCoordinates;
+  private boolean mMultiLine = false;
+  private boolean mGravityReset = false;
 
   private ReactViewBackgroundManager mReactBackgroundManager;
 
@@ -202,20 +210,31 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto
   public boolean onTouchEvent(MotionEvent ev) {
     switch (ev.getAction()) {
       case MotionEvent.ACTION_DOWN:
+        mPreviousYCoordinates = ev.getY();
+        mPreviousXCoordinates = ev.getX();
         mDetectScrollMovement = true;
         // Disallow parent views to intercept touch events, until we can detect if we should be
         // capturing these touches or not.
         this.getParent().requestDisallowInterceptTouchEvent(true);
         break;
       case MotionEvent.ACTION_MOVE:
-        if (mDetectScrollMovement) {
-          if (!canScrollVertically(-1)
-              && !canScrollVertically(1)
-              && !canScrollHorizontally(-1)
-              && !canScrollHorizontally(1)) {
-            // We cannot scroll, let parent views take care of these touches.
-            this.getParent().requestDisallowInterceptTouchEvent(false);
-          }
+        float horizontalScroll = mPreviousXCoordinates - ev.getX();
+        float verticalScroll = mPreviousYCoordinates - ev.getY();
+        boolean enableParentScroll = false;
+        boolean isSwipeVertical = Math.abs(verticalScroll) > Math.abs(horizontalScroll);
+        if (isSwipeVertical) {
+          boolean scrollDirectionUp = verticalScroll < 0;
+          boolean enableParentScrollUp = scrollDirectionUp && !canScrollVertically(UP);
+          boolean enableParentScrollDown = !scrollDirectionUp && !canScrollVertically(DOWN);
+          enableParentScroll = enableParentScrollDown || enableParentScrollUp;
+        } else {
+          boolean scrollDirectionRight = horizontalScroll > 0;
+          boolean enableParentScrollRight = scrollDirectionRight && !canScrollHorizontally(RIGHT);
+          boolean enableParentScrollLeft = !scrollDirectionRight && !canScrollHorizontally(LEFT);
+          enableParentScroll = enableParentScrollRight || enableParentScrollLeft;
+        }
+        if (mDetectScrollMovement && enableParentScroll) {
+          this.getParent().requestDisallowInterceptTouchEvent(false);
           mDetectScrollMovement = false;
         }
         break;
@@ -237,7 +256,6 @@ public boolean onKeyUp(int keyCode, KeyEvent event) {
   @Override
   protected void onScrollChanged(int horiz, int vert, int oldHoriz, int oldVert) {
     super.onScrollChanged(horiz, vert, oldHoriz, oldVert);
-
     if (mScrollWatcher != null) {
       mScrollWatcher.onScrollChanged(horiz, vert, oldHoriz, oldVert);
     }
@@ -361,6 +379,15 @@ protected void onFocusChanged(boolean focused, int direction, Rect previouslyFoc
     if (focused && mSelectionWatcher != null) {
       mSelectionWatcher.onSelectionChanged(getSelectionStart(), getSelectionEnd());
     }
+    boolean resetGravity = getGravity() == Gravity.CENTER && mMultiLine == false;
+    if (focused && resetGravity) {
+      setGravity(Gravity.LEFT);
+      mGravityReset = true;
+    };
+    if (!focused && mGravityReset) {
+      setGravity(Gravity.CENTER);
+      mGravityReset = false;
+    };
   }
 
   public void setSelectionWatcher(SelectionWatcher selectionWatcher) {

packages/rn-tester/js/examples/ScrollView/ScrollViewTextInputExample.js

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+const {ScrollView, Text, TextInput} = require('react-native');
+
+exports.title = 'ScrollView with TextInputs';
+exports.description = 'Displays a list of TextInputs in a ScrollView';
+exports.examples = [
+  {
+    title: 'ScrollView with TextInputs - vertical',
+    description:
+      'Displays a list of scrollable TextInputs in a vertical ScrollView',
+    render: function(): React.Node {
+      return (
+        <ScrollView nestedScrollEnabled style={{height: 150}}>
+          <TextInput
+            style={{
+              marginTop: 100,
+              height: 150,
+              width: 200,
+              textAlign: 'center',
+              fontSize: 50,
+              backgroundColor: 'yellow',
+            }}
+            multiline
+            scrollEnabled
+            value="WORD1 WORD2 WORD3"
+          />
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+        </ScrollView>
+      );
+    },
+  },
+  {
+    title: 'ScrollView with TextInputs - horizontal',
+    description:
+      'Displays a list of scrollable TextInputs in a horizontal ScrollView',
+    render(): React.Element<any> {
+      return (
+        <ScrollView horizontal style={{height: 90}}>
+          <TextInput
+            style={{
+              marginLeft: 300,
+              height: 90,
+              width: 200,
+              textAlign: 'center',
+              fontSize: 50,
+              backgroundColor: 'red',
+            }}
+            value="WORD1 WORD2 WORD3"
+          />
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+          <Text>Normal Text</Text>
+        </ScrollView>
+      );
+    },
+  },
+];

packages/rn-tester/js/utils/RNTesterList.android.js

@@ -79,6 +79,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'Basic',
     module: require('../examples/ScrollView/ScrollViewAnimatedExample'),
   },
+  {
+    key: 'ScrollViewTextInputExample',
+    category: 'Basic',
+    module: require('../examples/ScrollView/ScrollViewTextInputExample'),
+  },
   {
     key: 'SectionList-onEndReached',
     module: require('../examples/SectionList/SectionList-onEndReached'),