Topbar custom background overlay the title

[nhatth219]

What happened?

Im using the custom background for tabbar background. Root configuration:

  Navigation.setDefaultOptions({
    sideMenu: {
      left: {
        visible: false,
      },
    },
    topBar: {
      background: {
        component: { name: RouterComponentNames.TOP_BAR_BACKGROUND },
      },
})

Background Component:

const TopBarBackgroundView: FC<TTopBarBackgroundProps> = () => {
  return (
    <LinearGradient
      colors={['#99A1D5', '#11CBCA', '#E554AE']}
      style={{ flex: 1 }}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 0 }}
    ></LinearGradient>
  )
}
TopBarBackground.name = RouterComponentNames.TOP_BAR_BACKGROUND

Issue:

What was the expected behaviour?

Title show in both android and ios

Was it tested on latest react-native-navigation?

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

Help us reproduce this issue!

No response

In what environment did this happen?

React Native Navigation version: 7.32.1 React Native version: 0.71.6 Has Fabric (React Native's new rendering system) enabled: (yes/no) yes Node version: v16.14.0 Device model: Iphone 11 iOS version: Ios 15.5

[thaycacac]

I got the same problem :'(

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[tyson90]

+1

[mykyta-rusyn]

The same for me. RNN - 7.38.3, RN - 0.72.12