diff --git a/.changeset/shaky-rules-sing.md b/.changeset/shaky-rules-sing.md new file mode 100644 index 00000000..71793ee9 --- /dev/null +++ b/.changeset/shaky-rules-sing.md @@ -0,0 +1,5 @@ +--- +'react-native-bottom-tabs': patch +--- + +feat: report tab bar measurements on Android diff --git a/apps/example/src/Screens/Contacts.tsx b/apps/example/src/Screens/Contacts.tsx index 92eadc86..64871c98 100644 --- a/apps/example/src/Screens/Contacts.tsx +++ b/apps/example/src/Screens/Contacts.tsx @@ -125,7 +125,7 @@ export function Contacts({ query, ...rest }: Props) { renderItem={renderItem} ItemSeparatorComponent={ItemSeparator} /> - + ); } diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt index 4719d1d8..7ed9d535 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabView.kt +++ b/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 = mutableListOf() private val iconSources: MutableMap = 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) diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt index 50cb328d..424e27ff 100644 --- a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/RCTTabViewImpl.kt +++ b/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") ) } diff --git a/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/events/OnTabBarMeasuredEvent.kt b/packages/react-native-bottom-tabs/android/src/main/java/com/rcttabview/events/OnTabBarMeasuredEvent.kt new file mode 100644 index 00000000..6c1354d6 --- /dev/null +++ b/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(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) + } +} diff --git a/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt index 5d919760..48a03f27 100644 --- a/packages/react-native-bottom-tabs/android/src/newarch/RCTTabViewManager.kt +++ b/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 } diff --git a/packages/react-native-bottom-tabs/android/src/oldarch/RCTTabViewManager.kt b/packages/react-native-bottom-tabs/android/src/oldarch/RCTTabViewManager.kt index 1f07658e..96599036 100644 --- a/packages/react-native-bottom-tabs/android/src/oldarch/RCTTabViewManager.kt +++ b/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 eventDispatcher.dispatchEvent(OnNativeLayoutEvent(viewTag = view.id, width, height)) } + + view.onTabBarMeasuredListener = { height -> + eventDispatcher.dispatchEvent(OnTabBarMeasuredEvent(viewTag = view.id, height)) + } return view }