React-native-navigation: [V3] Topbar with large title still shows small title

[axpro]

Issue Description

When largeTitle is enabled the small title should be hidden and only shown on scroll. Right now they are both visible.

Other issues related to the largeScreen option:

• On first render the large title is scrolled up (hidden under the small title)
• If you scroll to view the large title and then push to another screen, that screen doesn't have a title. If you push without scrolling first, the pushed screen title is visible.

Steps to Reproduce / Code Snippets / Screenshots

Add largeTitle to any screen (can be reproduced in playground):

largeTitle: {
  visible: true
}

Other issues:

---

Environment

• React Native Navigation version: 3.1.2 (the issue didn't present itself on 3.0.0-alpha.2)
• React Native version: 0.60.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone X - 12.2

[cesarm16]

same here

[carlitosspot]

yes, noticing the same issue as well. Has anyone tried a temp fix?

[djschilling]

I have the same issue, a fix would be greatly appreciated.

[nbolender]

+1

[ivan3177]

+1

[axxag]

Same. A dirty horrible workaround is to set the topbar title color the same as the topbar background color. Though this also prevents the small title from being visible on scroll.

topBar: {
    largeTitle: { visible: true },
    background: {
      color: '#F7F7F7'
    },
    title: {
      color: '#F7F7F7'
    },
  },

[patrickschmelter]

Issue still persists:

React Native Navigation version: 3.6.0 (last working is 3.1.0)
React Native version: 0.61.4
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone 8 - 13.2.2

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

[djschilling]

Issue still exists

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

[patrickschmelter]

Still not stale

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

[djschilling]

still an issue

[nbolender]

Death to stalebot!

[joshfarrant]

Has anyone found a fix/workaround for this? Maybe something that could be applied through patch-package 😄

[guyca]

This is fixed in 6.1.0

[jaredegan]

This is still happening to me.

React Native Navigation version: 6.3.0
React Native version: 0.61.5
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Debug. Both device & Sim. iPhone 11 Pro, iOS 13.3.1. iPhone 8 Simulator, iOS 13.3.

[jaredegan]

Here is a gif of the issue.

[jaredegan]

If I don't have a ScrollView as first view, then the large title shows up by default. However, since the full view isn't scrollable, it's locked to be large.

Here the component being returned:

return (
    <ScrollView>
      <Text>uhhh</Text>
      <Text>uhhh</Text>
      <Text>uhhh</Text>
</ScrollView>

[jaredegan]

Sorry for the rush of comments, but this workaround fixes the issue for me, should be a strong clue about what the real issue is. This is using useNavigationComponentDidAppear from react-native-navigation-hooks.

const MyScreen: React.FC<MyScreenProps> = (props) => {

  const [didAppear, setDidAppear] = useState(false);

  useNavigationComponentDidAppear((didAppearEvent) => {
    setDidAppear(true);
  }, props.componentId);

  if (!didAppear) {
    return (<View />);
  }

  return (
    <ScrollView
      style={{
        width: '100%',
      }}
      contentContainerStyle={{
        alignItems: 'center',
        flex: 1,
      }}
    >
      <Text>My View Goes Here</Text>
    </ScrollView>
  );
};

[kanzitelli]

If anyone is still facing this issue, try out these workarounds.