Absolute elements jump on the screen with a large title when scrolling

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

[timothyac]

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>

[ArekChr]

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