Large Title is hidden in bottom Tabs

[ArekChr]

Large title is hidden on every bottom tab screen except first while opening app.

You can reproduce it on playground by setting options:

        largeTitle: {
            visible: true,
        },

in Layouts and Options tabs

RNN version: 7.2.0

[jinshin1013]

@ArekChr Hey there 👋 Just making sure whether you meant that the TopBar on Options and Navigation tabs are not initially appearing as Large Title?

I've investigated a little and found that (setting topBar.largeTitle.visible = true in default options):

• When initialising BottomTabs Layout, the initial screen will always display largeTitle correctly.
• On other tabs, if ScrollView is used, the topBar will not be displayed as a largeTitle initially.
• On other tabs, if View or SafeAreaView is used, the topBar will be displayed as a largeTitle initially.

[ArekChr]

Hey @jinshin1013, Yes.
Im using ScrollView, and I don't won't to use SafeAreaView because it breaks header translucent behavior (blur effect).

[jinshin1013]

@ArekChr Yeah this is indeed an unexpected behaviour. Just not sure if this is a bug from react-native-navigation or react-native.

[ArekChr]

@jinshin1013 I think react-native. Maybe this will help software-mansion/react-native-screens#645
This issue probably occur since iOS 14

[kanzitelli]

@ArekChr @jinshin1013 I have faced the same issue while updating expo-rnn-starter and came up with a small workaround, it's a bit ugly but works for now. It might cause a bit of a delay on old models but didn't test.

Here is what I do:

const SomeScreen: NavigationFunctionComponent = ({
  componentId,
  ...
}) => {
  const [contentHidden, setContentHidden] = useState(Platform.OS === 'ios'); // as we do it only for iOS

  useNavigationComponentDidAppear(() => {
    setContentHidden(false);
  }, componentId);

  ...

  return contentHidden ? null : <SomeScreenContent />
}

SomeScreen.options = props => ({
  topBar: {
    title: {
      text: "SomeScreen",
    },
    largeTitle: {
      visible: true,
    }
  },
});

So the basic idea here is to have the whole content hidden so the navigation bar will become large and once our screen triggers componentDidAppear() (it didn't work with useEffect()) we show the content and the navigation bar remains large and acts as usual. It is the least harmful way I could achieve for now after the research, and thanks for the link above. Btw for a more detailed example, you can check here.

[kanzitelli]

@guyca @jinshin1013 hi guys!
I have been playing around with the Large Title issue mentioned here and can confirm that the workaround above works for me. An example could be found here.

However, I have faced the other issue which relates to the weird behavior when you set the Large Title with ScrollView. I have found several issues which were opened and closed without the solution:
#5403
#5454
#5565

I have come up with a workaround that helps to achieve the expected behavior. The basic idea is to wrap the ScrollView with SafeAreaView by default and hide it in useEffect() after some time. So it won't affect the UI of a screen and won't cause any delays. Here is a small example:

const SomeScreen: NavigationFunctionComponent = ({
  componentId,
  ...
}) => {
  const [safeAreaHidden, setSafeAreaHidden] = useState(false);

  useEffect(() => {
    setTimeout(() => setSafeAreaHidden(true), 500);
  }, [componentId]);

  const Content = () => {
    const content = (
      <ScrollView>
        { your content }
      </ScrollView>
    );

    return (
      safeAreaHidden
        ? content
        : (
          <SafeAreaView>
            { content }
          </SafeAreaView>
        )
    );
  }

  return <Content />
}

SomeScreen.options = props => ({
  topBar: {
    title: {
      text: "SomeScreen",
    },
    largeTitle: {
      visible: true,
    }
  },
});

A more detailed example could be found here.

[a-eid]

the large title works for the first tab which is focused by default, other it doesn't work until you scroll down.

reproducible repo:

https://github.com/a-eid/rnn/tree/bug/largetitle

Gif

[jinshin1013]

Hey guys, I'm closing this issue as this is not react-native-navigation specific problem and is the issue with the react-native's scrollview implementation. There seems to be a quick patch fix you can apply software-mansion/react-native-screens#649 (comment).