React-native-navigation: Larget Title Background Color [V4][iOS]

[captaincole]

Issue Description

Large Title ignores color attribute, and it also takes the background of whatever layout.backgroundColor attribute is set.

The most recent update allowed me to set the fontWeight of the largeTitle, and I have not seen an issue with a small title and large title showing up after upgrading to 4.0.6.

I found a much older similar issue to this by @mohammadalijf

Expected Behaviour

I expected the largeTitle background color to follow the background color I specified in the topBar attributes (rgba(60,60,60,70))

Steps to Reproduce / Code Snippets / Screenshots

const defaultOptions = {
  layout: {
    backgroundColor: 'rgba(60,60,60,70)', // This will now be the color of the largeTitle...
  },
  statusBar: {
    style: 'light',
  },
  topBar: {
    visible: true,
    color: 'white',
    background: {
      color: 'rgba(60,60,60,70)',
    },
    noBorder: false,
    title: {
      color: 'white',
      fontFamily: 'Avenir Next',
      fontWeight: 'bold',
      fontSize: 18,
    },
    largeTitle: {
      color: 'white',
      fontSize: 30,
      fontFamily: 'Avenir Next',
      fontWeight: 'bold',
    },
  },
};

Environment

• React Native Navigation version: 4.0.6
• React Native version: 0.61.1
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, iOS 13, iPhone 11 Pro

[Fawxy]

I've also just run into this issue - can't seem to change the background colour from no colour (shows as black) when largeTitle is visible.

[Fawxy]

As you can see the UIBarBackground color is nil

[ChristianKuhn]

Having the same problem.

[haneul512]

having the same issue as well

[captaincole]

@Fawxy Thanks, I might use that to take a stab at fixing this myself. But don't hold me to it, I haven't written a ton of react-native-navigation PRs.

[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.

[jrylan]

@stale this issue is still relevant.

[wfilleman]

Same here. We can't upgrade past 4.0.4. Using largeTitle on iOS results in a black header on all versions past 4.0.4.

[jarne]

Might this issue be related to this commit https://github.com/wix/react-native-navigation/commit/60f836e8a875534e1f40b02807f1902bdc2c6887 (@yogevbd @guyca)? As this commit was shortly after version 4.0.4, "Remove main window backgroundColor" is mentioned there and some TopBar background color functions are removed in this commit. Just a guess, wasn't able to investigate deeper 😉

[blueberry6401]

So is there any solution?

[yogevbd]

I found that topBar.drawBehind: true solves this.

topBar: {
  largeTitle: {
    visible: true
  },
  drawBehind: true
}

[korre]

I found that topBar.drawBehind: true solves this.

topBar: {
  largeTitle: {
    visible: true
  },
  drawBehind: true
}

Does it really? What happens when adding this property is that the large title background color is not drawn at all? It gets transparent.

topBar: {
            background: {
                color: '#00ff00'
              },
              largeTitle: {
                visible: true,
              },
              drawBehind: true
}

When having this setup I expect the top bar to have the background color: #00ff00 in large and small title mode and on android as well. Now it's transparent in large title mode and gets the correct color on small title mode and on android. Is that a correct behaviour?

[yogevbd]

@korre This is not the correct behaviour. I'm currently working on solving this 😊