large title breaks when nested scrollview changes / it has multiple tabs with different scrollviews nested ?

[a-eid]

Description

basically what I have is a single Stack that has a single tabbar screen, the first tab's scrollview pushes the large title as expected but not the others. also I'm having weird issues when enabling freezeOnBlur, unmountOnBlur or lazy.

https://github.com/software-mansion/react-native-screens/assets/19273413/2ab8dea4-d00b-4588-859e-31038b8819c0

I posted a snack link, but for some reason the native stack is not working from either RNS or react navigation.

Steps to reproduce

1- create a native stack. 2- nest a tabbar as one of it's screens' 3- for each tabbar screen add a scrollview. ( properly ).

Snack or a link to a repository

https://snack.expo.dev/@aeid/ludicrous-blue-scones

Screens version

3.29.0

React Native version

0.72.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Paper (Old Architecture)

Build type

Debug mode

Device

iOS simulator

Device model

iPhone 14

Acknowledgements

Yes

[a-eid]

this code reproduces the bug as well without the need for tabbar navigator.

  const [index, setIndex] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setIndex((i) => i + 1);
    })

    return () => {
      clearInterval(interval);
    }
  }, [])

  return (
    <ScrollView contentInsetAdjustmentBehavior="automatic" key={index}>
      <Text style={{ marginTop: 50 }}>test</Text>
    </ScrollView>
  );

[tboba]

Hi @a-eid, thanks for submitting this issue! I can confirm this issue is reproducible for me. A few remarks I've discovered so far:

• The problem still exists while I was trying to replace the scroll view with other one after some small period of time - so the large header is not dependent on the scroll view
• Large header on bottom tabs on Fabric does not work at all, but that's because Scroll View is not the first child of a screen - probably that's because of some wrong flattening that happens in React Navigation code. The solution is to add collapsable={true} in Background and View that wraps the children here - https://github.com/react-navigation/react-navigation/blob/main/packages/elements/src/Screen.tsx (I'll submit a PR that fixes this 🫡)
• After fixing above problem, luckily on Fabric switching the tabs does work! But that's because of the view recykling - after turning off the view recykling (in my case I just commented the code from _enqueueComponentViewWithComponentHandle method from RCTComponentViewRegistry) gives the same result as on Paper.

Nonetheless, I still haven't got a solution about this bug, but I'll keep you informed 👍

[smontlouis]

@a-eid Did you find any workaround ?

[smontlouis]

Only soluton I found is to have each wrapped in a StackNavigator and apply headerLargeTitle. But even with this solution, the large title start collapsed for whatever reason

https://github.com/software-mansion/react-native-screens/assets/3509412/e4759571-2237-490b-9d15-466dbf65b319

[a-eid]

@a-eid Did you find any workaround ?

I have not, as you mentioned wrapping each tab in it's own navigation stack would solve the issue, however not very ideal for performance.