React-native-screens: Scrollview doesn't calculated header height while scrollTo function

[ArekChr]

This error occurs in transparent headers, I tested it on a large title header when I call the function scrollRef.current.scrollTo({ x: 0, y: 0}) then it scroll content undertone header by y position of a header height. Scroll position Y at the beginning with expanded large header is
-140 points, so I bet that is header height, and I can't scrollTo({y: -140}) it also scroll under header.
probably scroll position is incorrect (-140) with expanded large title header, workaround with scroll to negative y position doesn't work.

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

platform: iOS
mode: Debug
Device: iPhone XS
OS version: 13.4.5

[WoLewicki]

Can you provide a repo/snack with minimal configuration needed to reproduce the issue?

[ArekChr]

please note that headerTranslucent: true makes this broken

please follow this repo https://github.com/ArekChr/ReactNativeScreensExamples/blob/master/ReactNativeScreensBugs.tsx

or code here:

import {NavigationContainer} from '@react-navigation/native';
import React, {useRef} from 'react';
import {ScrollView, StyleSheet, Text, View, Button} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';

export const NativeStack = createNativeStackNavigator();

export function ScrollViewBugScreen() {
  const someContent = Array.from({length: 50}, (v, i) => i);

  const scrollRef = useRef<ScrollView>(null);

  function onPress() {
    scrollRef.current?.scrollTo({animated: true, y: 0});
  }

  return (
    <ScrollView ref={scrollRef} contentInsetAdjustmentBehavior="automatic">
      {someContent.map((x) => (
        <TouchableOpacity key={x} onPress={onPress} style={styles.button}>
          <Text>Scroll to 0</Text>
        </TouchableOpacity>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  button: {
    padding: 5,
    borderBottomColor: 'gray',
    borderBottomWidth: 0.5,
    backgroundColor: 'lightblue',
    flex: 1,
  },
});

export function ReactNativeScreensBugs() {
  return (
    <NavigationContainer>
      <NativeStack.Navigator
        screenOptions={{
          headerTranslucent: true,
          headerStyle: {backgroundColor: 'rgba(255,255,255, 0.1)'},
          headerTitleStyle: {color: 'white'},
        }}>
        <NativeStack.Screen
          options={({navigation}) => ({
            headerLargeTitle: true,
          })}
          name="ScrollTo"
          component={ScrollViewBugScreen}
        />
      </NativeStack.Navigator>
    </NavigationContainer>
  );
}

[Evan-Younan]

Just came across this issue.

[WoLewicki]

You should specify scrollToOverflowEnabled={true} if you want to apply negative values of scrollTo, otherwise they will be set to 0. You can see it here: https://github.com/facebook/react-native/blob/master/React/Views/ScrollView/RCTScrollView.m#L511. Does it solve your issue?

[Evan-Younan]

I should have noticed that. Thanks!

[WoLewicki]

I am closing this issue then. Feel free to comment if you have any questions.

[ArekChr]

How to get large title header height to apply it as negative value of scrollTo?

[WoLewicki]

The large header's height is 116.

[Evan-Younan]

@WoLewicki it is 140 in my cases. 116 may not be the correct value.

[WoLewicki]

My bad then. It seems that on the bigger phones it is 140 due to notch. You can look at this thread to see updates on exposing the header's height: https://github.com/software-mansion/react-native-screens/issues/430.