React-native-navigation: [V2][iOS] - Custom topBar component is not displayed in iOS devices / simulators.

[emilioheinz]

Issue Description

I have a custom header in my app with the logo of my brand and I want to display it as the title, in Android by passing a custom component to the topBar title works but in iOS not.

Steps to Reproduce / Code Snippets / Screenshots

When the app starts I'm setting as a default option the custom header:

Navigation.setDefaultOptions({
      bottomTab: {
        iconColor: UNACTIVE_BOOTOM_TAB_COLOR,
        textColor: UNACTIVE_BOOTOM_TAB_COLOR,
        selectedIconColor: ACTIVE_BOTTOM_TAB_COLOR,
        selectedTextColor: ACTIVE_BOTTOM_TAB_COLOR,
      },
      bottomTabs: {
        titleDisplayMode: 'alwaysShow',
      },
      topBar: {
        title: {
          component: {
            name: 'customHeader',
            alignment: 'center',
          }
        }
      }
    });

Custom header component:

import React from 'react'
import { View, Text  } from 'react-native'

import styles from './styles'

export function CustomHeader() {
  return (
    <View style={styles.container}>
      <Text>
        TITLE
      </Text>
    </View>
  )
}

The result in both devices:

---

Environment

• React Native Navigation version: 2.27.5
• React Native version: 0.59.10
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Happens in all iOS devices and simulators.

[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 Detox and report back. Thank you for your contributions.

[emilioheinz]

That is not stale, still relevant.

[jinshin1013]

Would you be able to provide a reproduction? I'm able to use custom component for both iOS and Android. Although give this a quick try for your custom title component container style:

container: {
  flex: 1,
  width: '100%'
}

[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 Detox and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.