React-native-screens: Absolute elements jump on the screen with a large title when scrolling

[ArekChr]

After scrolling 'faster', the position of the screen and/or button changes position more, in a clean application with simple empty screen it occurs less often, while in a larger app it occurs almost every time.

Code:

function First({ navigation }) {
    return (
        <>
            <ScrollView style={{ backgroundColor: 'pink', flex: 1 }}>
                <Text>First</Text>
            </ScrollView>
            <Text style={{ position: 'absolute', padding: 30, backgroundColor: 'red', bottom: 100, alignSelf: 'center' }}>Some Absolute Text</Text>
        </>
    );
}

export function BugStack() {
    return (
        <NativeStack.Navigator>
            <NativeStack.Screen name='First' component={First} options={{ headerLargeTitle: true }} />
        </NativeStack.Navigator>
    );
}

Gif with 0.5x speed:

- @react-navigation/native: 5.2.6
- @react-navigation/stack: 5.3.1
- react-native-screens: 2.7.0

platform: iOS
mode: Debug and Release (issue on both)
Device: iPhone XS
OS version: 13.4.1

[WoLewicki]

Can you reproduce this issue with headerTranslucent: true? Seems like an issue with the layout of headerLargeTitle + ScrollView when the header changes its size along with the scrolling of ScrollView.

[ArekChr]

With transculent true there is no issue but this isn’t perfect workaround, transculent header brokes another behavior

[WoLewicki]

If you mean sticky indices by another behavior, it is managed by react-native and is in the scope of another issue. Not using a translucent large header with ScrollView and contentInsetAdjustmentBehavior="automatic" is not recommended and may cause glitches like this one. I am closing this issue then. Feel free to comment if you have any questions.

[SunstroUS]

I seem to be having the same problem, but not understanding the solution or fix? I have a tab stack embedded inside a screen stack, and when I use a scroll view, the tab bar seems to be jumpy. Sorry if I'm just not understanding or reading incorrectly.

[SunstroUS]

Nevermind I see what has to be done. For anybody else that is having the same problem but hasn't read the docs fully (me. <= bad). Your ScrollView needs to have contentInsetAdjustmentBehavior="automatic" and your Screen needs to have headerTranslucent: true just like @WoLewicki said.

<Stack.Screen
  name="Example"
  component={Example}
  options={() => ({
  headerLargeTitle: true,
  headerTranslucent: true,
 })}
/>

Example.tsx

<ScrollView contentInsetAdjustmentBehavior="automatic" >
 ...
</ScrollView>