feat: report tab bar height on Android

Author: okwasniewski

.changeset/shaky-rules-sing.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: report tab bar measurements on Android

apps/example/src/Screens/Contacts.tsx

@@ -125,7 +125,7 @@ export function Contacts({ query, ...rest }: Props) {
         renderItem={renderItem}
         ItemSeparatorComponent={ItemSeparator}
       />
-      <MusicControl bottomOffset={tabBarHeight} />
+      <MusicControl bottomOffset={Platform.OS === 'ios' ? tabBarHeight : 0} />
     </SafeAreaView>
   );
 }

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt

@@ -41,6 +41,7 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
   var onTabSelectedListener: ((key: String) -> Unit)? = null
   var onTabLongPressedListener: ((key: String) -> Unit)? = null
   var onNativeLayoutListener: ((width: Double, height: Double) -> Unit)? = null
+  var onTabBarMeasuredListener: ((height: Int) -> Unit)? = null
   var disablePageAnimations = false
   var items: MutableList<TabInfo> = mutableListOf()
   private val iconSources: MutableMap<Int, ImageSource> = mutableMapOf()
@@ -90,6 +91,9 @@ class ReactBottomNavigationView(context: Context) : LinearLayout(context) {
         val newWidth = right - left
         val newHeight = bottom - top
 
+        // Notify about tab bar height.
+        onTabBarMeasuredListener?.invoke(Utils.convertPixelsToDp(context, bottomNavigation.height).toInt())
+
         if (newWidth != lastReportedSize?.width || newHeight != lastReportedSize?.height) {
           val dpWidth = Utils.convertPixelsToDp(context, layoutHolder.width)
           val dpHeight = Utils.convertPixelsToDp(context, layoutHolder.height)

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt

@@ -6,6 +6,7 @@ import android.view.ViewGroup
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.common.MapBuilder
 import com.rcttabview.events.OnNativeLayoutEvent
+import com.rcttabview.events.OnTabBarMeasuredEvent
 import com.rcttabview.events.PageSelectedEvent
 import com.rcttabview.events.TabLongPressEvent
 
@@ -91,7 +92,9 @@ class RCTTabViewImpl {
       TabLongPressEvent.EVENT_NAME,
       MapBuilder.of("registrationName", "onTabLongPress"),
       OnNativeLayoutEvent.EVENT_NAME,
-      MapBuilder.of("registrationName", "onNativeLayout")
+      MapBuilder.of("registrationName", "onNativeLayout"),
+      OnTabBarMeasuredEvent.EVENT_NAME,
+      MapBuilder.of("registrationName", "onTabBarMeasured")
     )
   }
 

packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/events/OnTabBarMeasuredEvent.kt

@@ -0,0 +1,24 @@
+package com.rcttabview.events
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+
+class OnTabBarMeasuredEvent(viewTag: Int, private val height: Int) :
+  Event<TabLongPressEvent>(viewTag) {
+
+  companion object {
+    const val EVENT_NAME = "onTabBarMeasured"
+  }
+
+  override fun getEventName(): String {
+    return EVENT_NAME
+  }
+
+  override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+    val event = Arguments.createMap().apply {
+      putInt("height", height)
+    }
+    rctEventEmitter.receiveEvent(viewTag, eventName, event)
+  }
+}

packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt

@@ -12,6 +12,7 @@ import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNCTabViewManagerDelegate
 import com.facebook.react.viewmanagers.RNCTabViewManagerInterface
 import com.rcttabview.events.OnNativeLayoutEvent
+import com.rcttabview.events.OnTabBarMeasuredEvent
 import com.rcttabview.events.PageSelectedEvent
 import com.rcttabview.events.TabLongPressEvent
 
@@ -39,6 +40,9 @@ class RCTTabViewManager(context: ReactApplicationContext) :
     view.onNativeLayoutListener = { width, height ->
       eventDispatcher?.dispatchEvent(OnNativeLayoutEvent(viewTag = view.id, width, height))
     }
+    view.onTabBarMeasuredListener = { height ->
+      eventDispatcher?.dispatchEvent(OnTabBarMeasuredEvent(viewTag = view.id, height))
+    }
     return view
 
   }

packages/react-native-bottom-tabs/android/src/oldarch/RCTTabViewManager.kt

@@ -10,6 +10,7 @@ import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.uimanager.UIManagerModule
 import com.facebook.react.uimanager.ViewGroupManager
 import com.rcttabview.events.OnNativeLayoutEvent
+import com.rcttabview.events.OnTabBarMeasuredEvent
 import com.rcttabview.events.PageSelectedEvent
 import com.rcttabview.events.TabLongPressEvent
 
@@ -36,6 +37,10 @@ class RCTTabViewManager(context: ReactApplicationContext) : ViewGroupManager<Rea
     view.onNativeLayoutListener = { width, height ->
       eventDispatcher.dispatchEvent(OnNativeLayoutEvent(viewTag = view.id, width, height))
     }
+
+    view.onTabBarMeasuredListener = { height ->
+      eventDispatcher.dispatchEvent(OnTabBarMeasuredEvent(viewTag = view.id, height))
+    }
     return view
   }