fix(android): set initial page natively (#407)

Author: mikeqcp

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

@@ -52,31 +52,37 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
     //https://github.com/callstack/react-native-viewpager/issues/183
     vp.isSaveEnabled = false
     eventDispatcher = reactContext.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
-    vp.registerOnPageChangeCallback(object : OnPageChangeCallback() {
-      override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
-        super.onPageScrolled(position, positionOffset, positionOffsetPixels)
-        eventDispatcher.dispatchEvent(
-          PageScrollEvent(vp.id, position, positionOffset))
-      }
 
-      override fun onPageSelected(position: Int) {
-        super.onPageSelected(position)
-        eventDispatcher.dispatchEvent(
-          PageSelectedEvent(vp.id, position))
-      }
+    vp.post {
+      vp.registerOnPageChangeCallback(object : OnPageChangeCallback() {
+        override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
+          super.onPageScrolled(position, positionOffset, positionOffsetPixels)
+          eventDispatcher.dispatchEvent(
+                  PageScrollEvent(vp.id, position, positionOffset))
+        }
 
-      override fun onPageScrollStateChanged(state: Int) {
-        super.onPageScrollStateChanged(state)
-        val pageScrollState: String = when (state) {
-          ViewPager2.SCROLL_STATE_IDLE -> "idle"
-          ViewPager2.SCROLL_STATE_DRAGGING -> "dragging"
-          ViewPager2.SCROLL_STATE_SETTLING -> "settling"
-          else -> throw IllegalStateException("Unsupported pageScrollState")
+        override fun onPageSelected(position: Int) {
+          super.onPageSelected(position)
+          eventDispatcher.dispatchEvent(
+                  PageSelectedEvent(vp.id, position))
         }
-        eventDispatcher.dispatchEvent(
-          PageScrollStateChangedEvent(vp.id, pageScrollState))
-      }
-    })
+
+        override fun onPageScrollStateChanged(state: Int) {
+          super.onPageScrollStateChanged(state)
+          val pageScrollState: String = when (state) {
+            ViewPager2.SCROLL_STATE_IDLE -> "idle"
+            ViewPager2.SCROLL_STATE_DRAGGING -> "dragging"
+            ViewPager2.SCROLL_STATE_SETTLING -> "settling"
+            else -> throw IllegalStateException("Unsupported pageScrollState")
+          }
+          eventDispatcher.dispatchEvent(
+                  PageScrollStateChangedEvent(vp.id, pageScrollState))
+        }
+      })
+
+      eventDispatcher.dispatchEvent(PageSelectedEvent(vp.id, vp.currentItem))
+    }
+
     return vp
   }
 
@@ -139,6 +145,13 @@ class PagerViewViewManager : ViewGroupManager<ViewPager2>() {
     viewPager.isUserInputEnabled = value
   }
 
+  @ReactProp(name = "initialPage", defaultInt = 0)
+  fun setInitialPage(viewPager: ViewPager2, value: Int) {
+    viewPager.post {
+      setCurrentItem(viewPager, value, false)
+    }
+  }
+
   @ReactProp(name = "orientation")
   fun setOrientation(viewPager: ViewPager2, value: String) {
     viewPager.orientation = if (value == "vertical") ViewPager2.ORIENTATION_VERTICAL else ViewPager2.ORIENTATION_HORIZONTAL

src/PagerView.tsx

@@ -55,26 +55,8 @@ import { getViewManagerConfig, PagerViewViewManager } from './PagerViewNative';
 
 export class PagerView extends React.Component<PagerViewProps> {
   private isScrolling = false;
-  private animationFrameRequestId?: number;
   private PagerView = React.createRef<typeof PagerViewViewManager>();
 
-  componentWillUnmount() {
-    if (this.animationFrameRequestId !== undefined) {
-      cancelAnimationFrame(this.animationFrameRequestId);
-    }
-  }
-
-  componentDidMount() {
-    // On iOS we do it directly on the native side
-    if (Platform.OS === 'android' && this.props.initialPage !== undefined) {
-      this.animationFrameRequestId = requestAnimationFrame(() => {
-        if (this.props.initialPage !== undefined) {
-          this.setPageWithoutAnimation(this.props.initialPage);
-        }
-      });
-    }
-  }
-
   public getInnerViewNode = (): ReactElement => {
     return this.PagerView.current!.getInnerViewNode();
   };