Overflowed part of the right topBarButton is not visible

[manakuro]

What happened?

The overflowed part of the button in the upper right corner is not visible after the PR has been merged with 7.38.4.

7.40.1	7.38.0

When the PR is reverted, it works fine.

lib/android/app/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/ButtonBar.kt

    override fun onViewAdded(child: View) {
        super.onViewAdded(child)
+        enableOverflowForReactButtonViews(child)
+    }
+
+   private fun enableOverflowForReactButtonViews(child: View) {
+        if (child is ActionMenuView) {
+            (child as ViewGroup).clipChildren = false
+        }
+    }

What was the expected behaviour?

The overflowed part should be visible.

Was it tested on latest react-native-navigation?

• I have tested this issue on the latest react-native-navigation release and it still reproduces.

Help us reproduce this issue!

Add a custom button to right top bars and build on 7.40.1.

The custom button component would be like so:

import React from 'react';
import {
  Platform,
  StyleSheet,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

export const Component = () => {
  return (
    <View style={styles.iconContainer}>
      <TouchableOpacity style={[styles.container]}>
        <View style={[styles.unreadCount]}>
          <Text style={styles.text}>{2}</Text>
        </View>
        <View>
          <Text>text</Text>
        </View>
      </TouchableOpacity>
      <TouchableOpacity style={[styles.container]}>
        <View style={[styles.unreadCount]}>
          <Text style={styles.text}>{146}</Text>
        </View>
        <View>
          <Text>text</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: Platform.select({ ios: 40, android: 50 }),
    position: 'relative',
  },
  iconContainer: {
    flexDirection: 'row',
  },
  unreadCount: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    right: Platform.select({ ios: -5, android: 1 }),
    top: Platform.select({ ios: -5, android: -5 }),
    width: 23,
    height: 23,
    borderRadius: 23 / 2,
    backgroundColor: '#3CABAD',
    zIndex: 1000,
  },
  text: {
    color: '#ffffff',
  },
});

In what environment did this happen?

React Native Navigation version: 7.40.1
React Native version: 0.73 and 0.74
Has Fabric (React Native's new rendering system) enabled: (yes/no) no
Node version: 20.12.2
Device model: Pixel 8a
Android version: 14