Description

setEnableScrollInteraction should be called in onFinalizeUpdates because its logic depends on the position in the components hierarchy, which isn't established when onPropsChanged is called.

Changes

• fix nested scroll behavior being sometimes different than on other platforms

Test Plan

The behavior of the following reproducer should be more similar to Android. This MR is a partial fix.

import {ScrollView, Text, useWindowDimensions, View} from 'react-native';
import Animated, {useAnimatedStyle} from 'react-native-reanimated';

const LOADING_HEIGHT = 48;

export default function NestedScrollView() {
  const {height: windowHeight} = useWindowDimensions();

  const animatedStyles = useAnimatedStyle(() => {
    'worklet';
    return {
      transform: [
        {
          translateY: 32,
        },
      ],
    };
  });

  return (
    <View style={[{height: windowHeight, paddingTop: 88}]}>
      <View style={{flex: 1}}>
        <ScrollView
          style={{backgroundColor: 'cyan'}}
          scrollEventThrottle={1}
          bounces={false}
          showsVerticalScrollIndicator={false}>
          <View style={{borderWidth: 1}}>
            {Array(20)
              .fill(1)
              .map((_, index) => (
                <Text key={index}>{index}</Text>
              ))}
          </View>
          <View
            style={{
              height: windowHeight - 88,
              flexDirection: 'row',
            }}>
            <View
              style={{
                height: '100%',
                width: 1,
                backgroundColor: 'black',
              }}
            />
            <View style={{flex: 1}}>
              <Animated.View
                style={[
                  {
                    height: LOADING_HEIGHT,
                    position: 'absolute',
                    top: -LOADING_HEIGHT,
                    width: 100,
                    backgroundColor: 'green',
                    zIndex: 2,
                    display: 'flex',
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    transform: [{translateY: -32}],
                  },
                  animatedStyles,
                ]}
              />
              <ScrollView
                style={{
                  backgroundColor: 'pink',
                  flex: 1,
                  height: '100%',
                }}
                bounces={false}
                nestedScrollEnabled={false}
                scrollEventThrottle={1}
                showsVerticalScrollIndicator={false}>
                {Array(100)
                  .fill(1)
                  .map((_, index) => (
                    <Text key={index}>{index}</Text>
                  ))}
              </ScrollView>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
}

Checklist

• Does not involve incompatible changes; if involved, has been reviewed accordingly.
• Does not impact performance, or performance testing has been conducted without degradation.
• Complies with the relevant coding standards.
• Does not involve documentation updates, or the documentation has been updated.
• Meets testability requirements with necessary self-test cases, appropriate logging, or trace information added.
• No illegal file inclusions exist, such as images or code.