fix: Android animations

Author: okwasniewski

android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -1,6 +1,7 @@
 package com.rcttabview
 
 import android.content.Context
+import android.util.Log
 import android.view.Choreographer
 import android.view.MenuItem
 import android.view.View
@@ -10,45 +11,57 @@ import com.facebook.react.bridge.WritableMap
 import com.google.android.material.bottomnavigation.BottomNavigationView
 
 class ReactBottomNavigationView(context: Context) : BottomNavigationView(context) {
-  private var onTabSelectedListener: ((WritableMap) -> Unit)? = null
   var items: MutableList<TabInfo>? = null
+  var onTabSelectedListener: ((WritableMap) -> Unit)? = null
+  private var isAnimating = false
+  private val frameCallback = object : Choreographer.FrameCallback {
+    override fun doFrame(frameTimeNanos: Long) {
+      if (isAnimating) {
+        measureAndLayout(this@ReactBottomNavigationView)
+        this@ReactBottomNavigationView.viewTreeObserver.dispatchOnGlobalLayout();
+
+        Choreographer.getInstance().postFrameCallback(this)
+      }
+    }
+  }
 
   init {
-    // TODO: Refactor this outside of TabView (attach listener in ViewManager).
     setOnItemSelectedListener { item ->
       onTabSelected(item)
       true
     }
   }
 
-  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
-    super.onLayout(changed, left, top, right, bottom)
-    refreshViewChildrenLayout(this)
+  override fun requestLayout() {
+    super.requestLayout()
+    // Manually trigger measure & layout, as RN on Android skips those.
+    // See this issue: https://github.com/facebook/react-native/issues/17968#issuecomment-721958427
+    this.post {
+      measureAndLayout(this)
+    }
   }
 
   private fun onTabSelected(item: MenuItem) {
     val selectedItem = items?.first { it.title == item.title }
     if (selectedItem == null) {
       return
     }
+    startAnimation()
 
     val event = Arguments.createMap().apply {
       putString("key", selectedItem.key)
     }
     onTabSelectedListener?.invoke(event)
-
-    // Refresh TabView children to fix issue with animations.
-    // https://github.com/facebook/react-native/issues/17968#issuecomment-697136929
-    Choreographer.getInstance().postFrameCallback(object : Choreographer.FrameCallback {
-      override fun doFrame(frameTimeNanos: Long) {
-        refreshViewChildrenLayout(this@ReactBottomNavigationView)
-        Choreographer.getInstance().postFrameCallback(this)
-      }
-    })
   }
 
-  fun setOnTabSelectedListener(listener: (WritableMap) -> Unit) {
-    onTabSelectedListener = listener
+  // Refresh TabView children to fix issue with animations.
+  // https://github.com/facebook/react-native/issues/17968#issuecomment-697136929
+  private fun startAnimation() {
+    isAnimating = true
+    Choreographer.getInstance().postFrameCallback(frameCallback)
+    postDelayed({
+      isAnimating = false
+    }, 300)
   }
 
   fun updateItems(items: MutableList<TabInfo>) {
@@ -73,18 +86,18 @@ class ReactBottomNavigationView(context: Context) : BottomNavigationView(context
         removeBadge(index)
       }
     }
-
-    refreshViewChildrenLayout(this)
   }
 
-
   // Fixes issues with BottomNavigationView children layouting.
-  private fun refreshViewChildrenLayout(view: View) {
-    view.post {
-      view.measure(
-        View.MeasureSpec.makeMeasureSpec(view.width, View.MeasureSpec.EXACTLY),
-        View.MeasureSpec.makeMeasureSpec(view.height, View.MeasureSpec.EXACTLY))
-      view.layout(view.left, view.top, view.right, view.bottom)
-    }
+  private fun measureAndLayout(view: View) {
+      measure(
+        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY))
+      layout(left, top, right, bottom)
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    isAnimating = false
   }
 }

android/src/main/java/com/rcttabview/RCTTabViewViewManager.kt

@@ -60,8 +60,8 @@ class RCTTabViewViewManager :
   public override fun createViewInstance(context: ThemedReactContext): ReactBottomNavigationView {
     eventDispatcher = context.getNativeModule(UIManagerModule::class.java)!!.eventDispatcher
     val view = ReactBottomNavigationView(context)
-    view.setOnTabSelectedListener { data ->
-     data.getString("key")?.let {
+    view.onTabSelectedListener = { data ->
+      data.getString("key")?.let {
         eventDispatcher.dispatchEvent(PageSelectedEvent(viewTag = view.id, key = it ))
       }
     }