* fix(android): Nested ViewPagers with same orientation are not scrollable(#303)

Author: NiuGuohui

android/src/main/java/com/reactnativepagerview/NestedScrollableHost.kt

@@ -0,0 +1,96 @@
+package com.reactnativepagerview
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewConfiguration
+import android.widget.FrameLayout
+import androidx.viewpager2.widget.ViewPager2
+import androidx.viewpager2.widget.ViewPager2.ORIENTATION_HORIZONTAL
+import kotlin.math.absoluteValue
+import kotlin.math.sign
+
+/**
+ * Layout to wrap a scrollable component inside a ViewPager2. Provided as a solution to the problem
+ * where pages of ViewPager2 have nested scrollable elements that scroll in the same direction as
+ * ViewPager2. The scrollable element needs to be the immediate and only child of this host layout.
+ *
+ * This solution has limitations when using multiple levels of nested scrollable elements
+ * (e.g. a horizontal RecyclerView in a vertical RecyclerView in a horizontal ViewPager2).
+ */
+class NestedScrollableHost : FrameLayout {
+  constructor(context: Context) : super(context)
+  constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
+
+  private var touchSlop = 0
+  private var initialX = 0f
+  private var initialY = 0f
+  private val parentViewPager: ViewPager2?
+    get() {
+      var v: View? = parent as? View
+      while (v != null && v !is ViewPager2) {
+        v = v.parent as? View
+      }
+      return v as? ViewPager2
+    }
+
+  private val child: View? get() = if (childCount > 0) getChildAt(0) else null
+
+  init {
+    touchSlop = ViewConfiguration.get(context).scaledTouchSlop
+  }
+
+  private fun canChildScroll(orientation: Int, delta: Float): Boolean {
+    val direction = -delta.sign.toInt()
+    return when (orientation) {
+      0 -> child?.canScrollHorizontally(direction) ?: false
+      1 -> child?.canScrollVertically(direction) ?: false
+      else -> throw IllegalArgumentException()
+    }
+  }
+
+  override fun onInterceptTouchEvent(e: MotionEvent): Boolean {
+    handleInterceptTouchEvent(e)
+    return super.onInterceptTouchEvent(e)
+  }
+
+  private fun handleInterceptTouchEvent(e: MotionEvent) {
+    val orientation = parentViewPager?.orientation ?: return
+
+    // Early return if child can't scroll in same direction as parent
+    if (!canChildScroll(orientation, -1f) && !canChildScroll(orientation, 1f)) {
+      return
+    }
+
+    if (e.action == MotionEvent.ACTION_DOWN) {
+      initialX = e.x
+      initialY = e.y
+      parent.requestDisallowInterceptTouchEvent(true)
+    } else if (e.action == MotionEvent.ACTION_MOVE) {
+      val dx = e.x - initialX
+      val dy = e.y - initialY
+      val isVpHorizontal = orientation == ORIENTATION_HORIZONTAL
+
+      // assuming ViewPager2 touch-slop is 2x touch-slop of child
+      val scaledDx = dx.absoluteValue * if (isVpHorizontal) .5f else 1f
+      val scaledDy = dy.absoluteValue * if (isVpHorizontal) 1f else .5f
+
+      if (scaledDx > touchSlop || scaledDy > touchSlop) {
+        if (isVpHorizontal == (scaledDy > scaledDx)) {
+          // Gesture is perpendicular, allow all parents to intercept
+          parent.requestDisallowInterceptTouchEvent(false)
+        } else {
+          // Gesture is parallel, query child if movement in that direction is possible
+          if (canChildScroll(orientation, if (isVpHorizontal) dx else dy)) {
+            // Child can scroll, disallow all parents to intercept
+            parent.requestDisallowInterceptTouchEvent(true)
+          } else {
+            // Child cannot scroll, allow all parents to intercept
+            parent.requestDisallowInterceptTouchEvent(false)
+          }
+        }
+      }
+    }
+  }
+}

android/src/main/java/com/reactnativepagerview/PagerViewViewManager.kt

@@ -1,6 +1,7 @@
 package com.reactnativepagerview
 
 import android.view.View
+import android.view.ViewGroup
 import androidx.viewpager2.widget.ViewPager2
 import androidx.viewpager2.widget.ViewPager2.OnPageChangeCallback
 import com.facebook.infer.annotation.Assertions
@@ -17,14 +18,17 @@ import com.reactnativepagerview.event.PageScrollStateChangedEvent
 import com.reactnativepagerview.event.PageSelectedEvent
 
 
-class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
+class PagerViewViewManager : ViewGroupManager<NestedScrollableHost>() {
   private lateinit var eventDispatcher: EventDispatcher
 
   override fun getName(): String {
     return REACT_CLASS
   }
 
-  override fun createViewInstance(reactContext: ThemedReactContext): ViewPager2 {
+  override fun createViewInstance(reactContext: ThemedReactContext): NestedScrollableHost {
+    val host = NestedScrollableHost(reactContext)
+    host.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)
+    host.isSaveEnabled = false
     val vp = ViewPager2(reactContext)
     vp.adapter = ViewPagerAdapter()
     //https://github.com/callstack/react-native-viewpager/issues/183
@@ -36,13 +40,13 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
         override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
           super.onPageScrolled(position, positionOffset, positionOffsetPixels)
           eventDispatcher.dispatchEvent(
-                  PageScrollEvent(vp.id, position, positionOffset))
+                  PageScrollEvent(host.id, position, positionOffset))
         }
 
         override fun onPageSelected(position: Int) {
           super.onPageSelected(position)
           eventDispatcher.dispatchEvent(
-                  PageSelectedEvent(vp.id, position))
+                  PageSelectedEvent(host.id, position))
         }
 
         override fun onPageScrollStateChanged(state: Int) {
@@ -54,25 +58,34 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
             else -> throw IllegalStateException("Unsupported pageScrollState")
           }
           eventDispatcher.dispatchEvent(
-                  PageScrollStateChangedEvent(vp.id, pageScrollState))
+                  PageScrollStateChangedEvent(host.id, pageScrollState))
         }
       })
 
-      eventDispatcher.dispatchEvent(PageSelectedEvent(vp.id, vp.currentItem))
+      eventDispatcher.dispatchEvent(PageSelectedEvent(host.id, vp.currentItem))
     }
+    host.addView(vp)
+    return host
+  }
 
-    return vp
+  private fun getViewPager(view: NestedScrollableHost): ViewPager2 {
+    if (view.getChildAt(0) is ViewPager2) {
+      return view.getChildAt(0) as ViewPager2
+    } else {
+      throw ClassNotFoundException("Could not retrieve ViewPager2 instance")
+    }
   }
 
   private fun setCurrentItem(view: ViewPager2, selectedTab: Int, scrollSmooth: Boolean) {
     refreshViewChildrenLayout(view)
     view.setCurrentItem(selectedTab, scrollSmooth)
   }
 
-  override fun addView(parent: ViewPager2, child: View?, index: Int) {
+  override fun addView(host: NestedScrollableHost, child: View?, index: Int) {
     if (child == null) {
       return
     }
+    val parent = getViewPager(host)
 
     (parent.adapter as ViewPagerAdapter?)?.addChild(child, index);
 
@@ -85,68 +98,71 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
     }
   }
 
-  override fun getChildCount(parent: ViewPager2): Int {
-    return parent.adapter?.itemCount ?: 0;
-  }
+  override fun getChildCount(parent: NestedScrollableHost) = getViewPager(parent).adapter?.itemCount ?: 0
 
-  override fun getChildAt(parent: ViewPager2, index: Int): View {
-    return (parent.adapter as ViewPagerAdapter?)!!.getChildAt(index)
+  override fun getChildAt(parent: NestedScrollableHost, index: Int): View {
+    val view = getViewPager(parent)
+    return (view.adapter as ViewPagerAdapter?)!!.getChildAt(index)
   }
 
-  override fun removeView(parent: ViewPager2, view: View) {
-    (parent.adapter as ViewPagerAdapter?)?.removeChild(view)
+  override fun removeView(parent: NestedScrollableHost, view: View) {
+    val pager = getViewPager(parent)
+    (pager.adapter as ViewPagerAdapter?)?.removeChild(view)
 
     // Required so ViewPager actually animates the removed view right away (otherwise 
     // a white screen is shown until the next user interaction).
     // https://github.com/facebook/react-native/issues/17968#issuecomment-697136929
-    refreshViewChildrenLayout(parent)
+    refreshViewChildrenLayout(pager)
   }
 
-  override fun removeAllViews(parent: ViewPager2) {
-    parent.isUserInputEnabled = false
-    val adapter = parent.adapter as ViewPagerAdapter?
+  override fun removeAllViews(parent: NestedScrollableHost) {
+    val pager = getViewPager(parent)
+    pager.isUserInputEnabled = false
+    val adapter = pager.adapter as ViewPagerAdapter?
     adapter?.removeAll()
   }
 
-  override fun removeViewAt(parent: ViewPager2, index: Int) {
-    val adapter = parent.adapter as ViewPagerAdapter?
+  override fun removeViewAt(parent: NestedScrollableHost, index: Int) {
+    val pager = getViewPager(parent)
+    val adapter = pager.adapter as ViewPagerAdapter?
     adapter?.removeChildAt(index)
 
     // Required so ViewPager actually animates the removed view right away (otherwise 
     // a white screen is shown until the next user interaction).
     // https://github.com/facebook/react-native/issues/17968#issuecomment-697136929
-    refreshViewChildrenLayout(parent)
+    refreshViewChildrenLayout(pager)
   }
 
   override fun needsCustomLayoutForChildren(): Boolean {
     return true
   }
 
   @ReactProp(name = "scrollEnabled", defaultBoolean = true)
-  fun setScrollEnabled(viewPager: ViewPager2, value: Boolean) {
-    viewPager.isUserInputEnabled = value
+  fun setScrollEnabled(host: NestedScrollableHost, value: Boolean) {
+    getViewPager(host).isUserInputEnabled = value
   }
 
   @ReactProp(name = "initialPage", defaultInt = 0)
-  fun setInitialPage(viewPager: ViewPager2, value: Int) {
-    viewPager.post {
-      setCurrentItem(viewPager, value, false)
+  fun setInitialPage(host: NestedScrollableHost, value: Int) {
+    val view = getViewPager(host)
+    view.post {
+      setCurrentItem(view, value, false)
     }
   }
 
   @ReactProp(name = "orientation")
-  fun setOrientation(viewPager: ViewPager2, value: String) {
-    viewPager.orientation = if (value == "vertical") ViewPager2.ORIENTATION_VERTICAL else ViewPager2.ORIENTATION_HORIZONTAL
+  fun setOrientation(host: NestedScrollableHost, value: String) {
+    getViewPager(host).orientation = if (value == "vertical") ViewPager2.ORIENTATION_VERTICAL else ViewPager2.ORIENTATION_HORIZONTAL
   }
 
   @ReactProp(name = "offscreenPageLimit", defaultInt = ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT)
-  operator fun set(viewPager: ViewPager2, value: Int) {
-    viewPager.offscreenPageLimit = value
+  operator fun set(host: NestedScrollableHost, value: Int) {
+    getViewPager(host).offscreenPageLimit = value
   }
 
   @ReactProp(name = "overScrollMode")
-  fun setOverScrollMode(viewPager: ViewPager2, value: String) {
-    val child = viewPager.getChildAt(0)
+  fun setOverScrollMode(host: NestedScrollableHost, value: String) {
+    val child = getViewPager(host).getChildAt(0)
     when (value) {
         "never" -> {
           child.overScrollMode = ViewPager2.OVER_SCROLL_NEVER
@@ -161,13 +177,14 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
   }
 
   @ReactProp(name = "layoutDirection")
-  fun setLayoutDirection(viewPager: ViewPager2, value: String) {
+  fun setLayoutDirection(host: NestedScrollableHost, value: String) {
+    val view = getViewPager(host)
     when (value) {
       "rtl" -> {
-        viewPager.layoutDirection = View.LAYOUT_DIRECTION_RTL
+        view.layoutDirection = View.LAYOUT_DIRECTION_RTL
       }
       else -> {
-        viewPager.layoutDirection = View.LAYOUT_DIRECTION_LTR
+        view.layoutDirection = View.LAYOUT_DIRECTION_LTR
       }
     }
   }
@@ -189,24 +206,25 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
       COMMAND_SET_SCROLL_ENABLED)
   }
 
-  override fun receiveCommand(root: ViewPager2, commandId: Int, args: ReadableArray?) {
+  override fun receiveCommand(root: NestedScrollableHost, commandId: Int, args: ReadableArray?) {
     super.receiveCommand(root, commandId, args)
-    Assertions.assertNotNull(root)
+    val view = getViewPager(root)
+    Assertions.assertNotNull(view)
     Assertions.assertNotNull(args)
-    val childCount = root.adapter?.itemCount
+    val childCount = view.adapter?.itemCount
 
     when (commandId) {
       COMMAND_SET_PAGE, COMMAND_SET_PAGE_WITHOUT_ANIMATION -> {
         val pageIndex = args!!.getInt(0)
         val canScroll = childCount != null && childCount > 0 && pageIndex >= 0 && pageIndex < childCount
         if (canScroll) {
           val scrollWithAnimation = commandId == COMMAND_SET_PAGE
-          setCurrentItem(root, pageIndex, scrollWithAnimation)
+          setCurrentItem(view, pageIndex, scrollWithAnimation)
           eventDispatcher.dispatchEvent(PageSelectedEvent(root.id, pageIndex))
         }
       }
       COMMAND_SET_SCROLL_ENABLED -> {
-        root.isUserInputEnabled = args!!.getBoolean(0)
+        view.isUserInputEnabled = args!!.getBoolean(0)
       }
       else -> throw IllegalArgumentException(String.format(
         "Unsupported command %d received by %s.",
@@ -216,7 +234,8 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
   }
 
   @ReactProp(name = "pageMargin", defaultFloat = 0F)
-  fun setPageMargin(pager: ViewPager2, margin: Float) {
+  fun setPageMargin(host: NestedScrollableHost, margin: Float) {
+    val pager = getViewPager(host)
     val pageMargin = PixelUtil.toPixelFromDIP(margin).toInt()
     /**
      * Don't use MarginPageTransformer to be able to support negative margins

example/src/App.tsx

@@ -10,6 +10,7 @@ import { ScrollablePagerViewExample } from './ScrollablePagerViewExample';
 import { ScrollViewInsideExample } from './ScrollViewInsideExample';
 import HeadphonesCarouselExample from './HeadphonesCarouselExample';
 import PaginationDotsExample from './PaginationDotsExample';
+import { NestPagerView } from './NestPagerView';
 
 const examples = [
   { component: BasicPagerViewExample, name: 'Basic Example' },
@@ -26,6 +27,10 @@ const examples = [
     component: ScrollViewInsideExample,
     name: 'ScrollView inside PagerView Example',
   },
+  {
+    component: NestPagerView,
+    name: 'Nest PagerView Example',
+  },
 ];
 
 // const examples = [{ component: BasicPagerViewExample, name: 'Basic Example' }];