Overlay nested touchables (#6234)

* initial commit

* Fix nested touchables in Overlay

When nesting Touchable components in an Overlay, under certain conditions, the outer most Touchable component consumed all touch events.

Fixes #5184

Co-authored-by: Yogev Ben David <yogev132@gmail.com>

e2e/Overlay.test.js

@@ -35,6 +35,17 @@ describe('Overlay', () => {
     await expect(elementById(TestIDs.OVERLAY_ALERT_HEADER)).toBeVisible();
   });
 
+  fit('nested touchables work as expected', async () => {
+    await elementById(TestIDs.TOAST_BTN).tap();
+    await elementById(TestIDs.TOAST_OK_BTN_INNER).tap();
+    await expect(elementByLabel('Inner button clicked')).toBeVisible();
+    await elementById(TestIDs.OK_BUTTON).tap();
+
+    await elementById(TestIDs.TOAST_BTN).tap();
+    await elementById(TestIDs.TOAST_OK_BTN_OUTER).tap();
+    await expect(elementByLabel('Outer button clicked')).toBeVisible();
+  });
+
   xtest('overlay pass touches - false', async () => {
     await elementById(TestIDs.SHOW_OVERLAY_BUTTON).tap();
     await expect(elementById(TestIDs.SHOW_OVERLAY_BUTTON)).toBeVisible();

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/IReactView.java

@@ -1,7 +1,7 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.view.MotionEvent;
-import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 
@@ -9,7 +9,7 @@ public interface IReactView extends Destroyable {
 
     boolean isReady();
 
-    View asView();
+    ViewGroup asView();
 
     void sendOnNavigationButtonPressed(String buttonId);
 

lib/android/app/src/main/java/com/reactnativenavigation/views/ComponentLayout.java

@@ -3,7 +3,7 @@ package com.reactnativenavigation.views;
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.view.MotionEvent;
-import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
@@ -27,7 +27,7 @@ public class ComponentLayout extends CoordinatorLayout implements ReactComponent
 		super(context);
 		this.reactView = reactView;
         addView(reactView.asView(), matchParentLP());
-        touchDelegate = new OverlayTouchDelegate(reactView);
+        touchDelegate = new OverlayTouchDelegate(this, reactView);
     }
 
     @Override
@@ -36,7 +36,7 @@ public class ComponentLayout extends CoordinatorLayout implements ReactComponent
     }
 
     @Override
-    public View asView() {
+    public ViewGroup asView() {
         return this;
     }
 
@@ -94,4 +94,8 @@ public class ComponentLayout extends CoordinatorLayout implements ReactComponent
     public boolean onInterceptTouchEvent(MotionEvent ev) {
         return touchDelegate.onInterceptTouchEvent(ev);
     }
+
+    public boolean superOnInterceptTouchEvent(MotionEvent event) {
+        return super.onInterceptTouchEvent(event);
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/views/touch/OverlayTouchDelegate.java

@@ -1,59 +1,49 @@
 package com.reactnativenavigation.views.touch;
 
 import android.graphics.Rect;
-import androidx.annotation.VisibleForTesting;
 import android.view.MotionEvent;
 import android.view.View;
-import android.view.ViewGroup;
 
 import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.NullBool;
 import com.reactnativenavigation.viewcontrollers.IReactView;
+import com.reactnativenavigation.views.ComponentLayout;
+
+import androidx.annotation.VisibleForTesting;
 
 public class OverlayTouchDelegate {
-    private enum TouchLocation {Outside, Inside}
     private final Rect hitRect = new Rect();
-    private IReactView reactView;
     private Bool interceptTouchOutside = new NullBool();
+    private ComponentLayout component;
+    private IReactView reactView;
 
     public void setInterceptTouchOutside(Bool interceptTouchOutside) {
         this.interceptTouchOutside = interceptTouchOutside;
     }
 
-    public OverlayTouchDelegate(IReactView reactView) {
+    public OverlayTouchDelegate(ComponentLayout component, IReactView reactView) {
+        this.component = component;
         this.reactView = reactView;
     }
 
     public boolean onInterceptTouchEvent(MotionEvent event) {
-        if (interceptTouchOutside instanceof NullBool) return false;
-        switch (event.getActionMasked()) {
-            case MotionEvent.ACTION_DOWN:
-                return handleDown(event);
-            default:
-                reactView.dispatchTouchEventToJs(event);
-                return false;
-
-        }
+        return interceptTouchOutside.hasValue() && event.getActionMasked() == MotionEvent.ACTION_DOWN ?
+                handleDown(event) :
+                component.superOnInterceptTouchEvent(event);
     }
 
     @VisibleForTesting
     public boolean handleDown(MotionEvent event) {
-        TouchLocation location = getTouchLocation(event);
-        if (location == TouchLocation.Inside) {
-            reactView.dispatchTouchEventToJs(event);
-            return false;
-        }
-        return interceptTouchOutside.isFalseOrUndefined();
+        if (isTouchInsideOverlay(event)) return component.superOnInterceptTouchEvent(event);
+        return interceptTouchOutside.isFalse();
     }
 
-    private TouchLocation getTouchLocation(MotionEvent ev) {
-        getView((ViewGroup) reactView.asView()).getHitRect(hitRect);
-        return hitRect.contains((int) ev.getRawX(), (int) ev.getRawY()) ?
-                TouchLocation.Inside :
-                TouchLocation.Outside;
+    private boolean isTouchInsideOverlay(MotionEvent ev) {
+        getOverlayView().getHitRect(hitRect);
+        return hitRect.contains((int) ev.getRawX(), (int) ev.getRawY());
     }
 
-    private View getView(ViewGroup view) {
-        return view.getChildCount() > 0 ? view.getChildAt(0) : view;
+    private View getOverlayView() {
+        return reactView.asView().getChildCount() > 0 ? reactView.asView().getChildAt(0) : reactView.asView();
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/mocks/SimpleOverlay.java

@@ -2,7 +2,7 @@ package com.reactnativenavigation.mocks;
 
 import android.content.Context;
 import android.view.MotionEvent;
-import android.view.View;
+import android.view.ViewGroup;
 import android.widget.FrameLayout;
 import android.widget.RelativeLayout;
 
@@ -20,7 +20,7 @@ public class SimpleOverlay extends RelativeLayout implements IReactView {
     }
 
     @Override
-    public View asView() {
+    public ViewGroup asView() {
         FrameLayout root = new FrameLayout(getContext());
         FrameLayout overlay = new FrameLayout(getContext());
         root.addView(overlay);

lib/android/app/src/test/java/com/reactnativenavigation/mocks/TestComponentLayout.java

@@ -2,7 +2,7 @@ package com.reactnativenavigation.mocks;
 
 import android.content.Context;
 import android.view.MotionEvent;
-import android.view.View;
+import android.view.ViewGroup;
 
 import com.reactnativenavigation.interfaces.ScrollEventListener;
 import com.reactnativenavigation.parse.Options;
@@ -26,7 +26,7 @@ public class TestComponentLayout extends ComponentLayout implements TitleBarButt
     }
 
     @Override
-    public View asView() {
+    public ViewGroup asView() {
         return this;
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/views/TouchDelegateTest.java

@@ -8,6 +8,7 @@ import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.views.touch.OverlayTouchDelegate;
 
 import org.junit.Test;
+import org.mockito.Mockito;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.Mockito.spy;
@@ -21,12 +22,14 @@ public class TouchDelegateTest extends BaseTest {
     private final MotionEvent downEvent = MotionEvent.obtain(0, 0, MotionEvent.ACTION_DOWN, x, y, 0);
     private final MotionEvent upEvent = MotionEvent.obtain(0, 0, MotionEvent.ACTION_UP, x, y, 0);
     private SimpleOverlay reactView;
+    private ComponentLayout component;
 
     @Override
     public void beforeEach() {
         super.beforeEach();
         reactView = spy(new SimpleOverlay(newActivity()));
-        uut = spy(new OverlayTouchDelegate(reactView));
+        component = Mockito.mock(ComponentLayout.class);
+        uut = spy(new OverlayTouchDelegate(component, reactView));
     }
 
     @Test
@@ -50,9 +53,9 @@ public class TouchDelegateTest extends BaseTest {
     }
 
     @Test
-    public void nonDownEventsDispatchTouchEventsToJs() {
+    public void nonDownEventsInvokeSuperImplementation() {
         uut.setInterceptTouchOutside(new Bool(true));
         uut.onInterceptTouchEvent(upEvent);
-        verify(reactView, times(1)).dispatchTouchEventToJs(upEvent);
+        verify(component).superOnInterceptTouchEvent(upEvent);
     }
 }

playground/src/screens/OptionsScreen.js

@@ -1,6 +1,5 @@
 const React = require('react');
 const {Component} = require('react');
-import {Platform} from 'react-native';
 const Root = require('../components/Root');
 const Button = require('../components/Button')
 const Navigation = require('../services/Navigation');

playground/src/screens/OverlayScreen.js

@@ -7,7 +7,8 @@ const {
   SHOW_OVERLAY_BTN,
   SHOW_TOUCH_THROUGH_OVERLAY_BTN,
   ALERT_BUTTON,
-  SET_ROOT_BTN
+  SET_ROOT_BTN,
+  TOAST_BTN
 } = require('../testIDs');
 const Screens = require('./Screens');
 
@@ -25,6 +26,7 @@ class OverlayScreen extends React.Component {
   render() {
     return (
       <Root componentId={this.props.componentId}>
+        <Button label='Toast' testID={TOAST_BTN} onPress={this.toast} />
         <Button label='Alert' testID={ALERT_BUTTON} onPress={() => alert('Alert displayed')} />
         <Button label='Show overlay' testID={SHOW_OVERLAY_BTN} onPress={() => this.showOverlay(true)} />
         <Button label='Show touch through overlay' testID={SHOW_TOUCH_THROUGH_OVERLAY_BTN} onPress={() => this.showOverlay(false)} />
@@ -34,6 +36,8 @@ class OverlayScreen extends React.Component {
     );
   }
 
+  toast = () => Navigation.showOverlay(Screens.Toast);
+
   showOverlay = (interceptTouchOutside) => Navigation.showOverlay(Screens.OverlayAlert, {
     layout: { componentBackgroundColor: 'transparent' },
     overlay: { interceptTouchOutside }

playground/src/screens/ScrollViewOverlay.js

@@ -10,7 +10,14 @@ const colors = [
   '#D9644A',
   '#CF262F',
   '#8B1079',
-  '#48217B'
+  '#48217B',
+  '#8B1079',
+  '#CF262F',
+  '#D9644A',
+  '#E2902B',
+  '#00A65F',
+  '#00AAAF',
+  '#3182C8',
 ];
 
 class ScrollViewOverlay extends PureComponent {
@@ -27,7 +34,7 @@ class ScrollViewOverlay extends PureComponent {
     );
   }
 
-  renderRow = (color) => <Text key={color} style={[styles.row, { backgroundColor: color }]}>{color}</Text>
+  renderRow = (color) => <Text key={color + Math.random()} style={[styles.row, { backgroundColor: color }]}>{color}</Text>
 }
 
 const styles = StyleSheet.create({

playground/src/screens/Toast.js

@@ -2,16 +2,27 @@ const React = require('react');
 const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
 const Colors = require('../commons/Colors');
 const Navigation = require('../services/Navigation');
+const {
+  TOAST_OK_BTN_INNER,
+  TOAST_OK_BTN_OUTER
+} = require('../testIDs');
 
 const Toast = function ({componentId}) {
+  const dismiss = (txt) => {
+    alert(txt)
+    Navigation.dismissOverlay(componentId);
+  }
+
   return (
     <View style={styles.root}>
-      <View style={styles.toast}>
-        <Text style={styles.text}>This a very important message!</Text>
-        <TouchableOpacity style={styles.button} onPress={() => Navigation.dismissOverlay(componentId)}>
-          <Text style={styles.buttonText}>OK</Text>
-        </TouchableOpacity>
-      </View>
+      <TouchableOpacity testID={TOAST_OK_BTN_OUTER} onPress={() => dismiss('Outer button clicked')}>
+        <View style={styles.toast}>
+          <Text style={styles.text}>This a very important message!</Text>
+          <TouchableOpacity testID={TOAST_OK_BTN_INNER} style={styles.button} onPress={() => dismiss('Inner button clicked')}>
+            <Text style={styles.buttonText}>OK</Text>
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
     </View>
   )
 }
@@ -21,7 +32,6 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column-reverse',
     backgroundColor: 0x3e434aa1
-    // backgroundColor: 'red'
   },
   toast: {
     elevation: 2,

playground/src/testIDs.js

@@ -98,6 +98,9 @@ module.exports = {
   ADD_BUTTON: 'ADD_BUTTON',
   TAB_BASED_APP_BUTTON: `TAB_BASED_APP_BUTTON`,
   TAB_BASED_APP_SIDE_BUTTON: `TAB_BASED_APP_SIDE_BUTTON`,
+  TOAST_BTN: 'TOAST_BTN',
+  TOAST_OK_BTN_OUTER: 'TOAST_OK_BTN_OUTER',
+  TOAST_OK_BTN_INNER: 'TOAST_OK_BTN_INNER',
   PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,
   PUSH_CONTEXT_SCREEN_BUTTON: `PUSH_CONTEXT_SCREEN_BUTTON`,
   PUSH_OPTIONS_BUTTON: `PUSH_OPTIONS_BUTTON`,