Fix Text and ScrollView payloads that Props 2.0 sends wrong or drops (#59080)

[bartlomiejbloniarz]

Summary:
With Props 2.0 on Android (enableExclusivePropsUpdateAndroid and the related flags), the Text and ScrollView payloads come from getDiffProps. Some props come out wrong:

• A removed Text letterSpacing: sent as NaN, which Java ignores, so the old spacing stays.
• scrollsChildToFocus: never sent.
• snapToAlignment: an explicit "start" is not sent on mount, and removing another alignment sends "start".
• decelerationRate={0.998}: not sent, because the C++ default is the iOS rate, 0.998. Android ScrollViews start at 0.985.
• A removed nestedScrollEnabled or sendMomentumEvents: stays on.

This PR sends null for a removed letterSpacing, adds scrollsChildToFocus on Android, makes snapToAlignment optional, defaults decelerationRate to 0.985 on Android, and resets the two booleans to false. iOS keeps its defaults. Nothing changes on Android with the flags off.

One difference from the flags-off path is intended. A removed decelerationRate now restores 0.985. With the flags off it reaches Java as null, which the setter reads as 0, so a fling stops at once.

Changelog:

[ANDROID] [FIXED] - Fix Text letterSpacing and ScrollView scrollsChildToFocus, snapToAlignment, decelerationRate, nestedScrollEnabled and sendMomentumEvents with Props 2.0

Test Plan:

• New ParagraphPropsDiffTest and ScrollViewPropsDiffTest, using the payload helper from Fix Image payloads that Props 2.0 sends wrong or drops (#59077) #59077. Each test fails on main. Built with the NDK and run on an Android emulator (there is no open-source gtest target).
• RNTester on an Android emulator with the Props 2.0 flags forced on: the Playground screen below.

Remove letterSpacing: 8

Before	After
letterspacing-before-props2.mp4	letterspacing-after-props2.mp4

Focus an input below the fold with scrollsChildToFocus={false}

Before	After
c10-before-props2.mp4	c10-after-props2.mp4

Paging ScrollView with snapToAlignment="start"

Before	After
snapstart-before-props2.mp4	snapstart-after-props2.mp4

Remove snapToAlignment="center"

Before	After
snapcenter-before-props2.mp4	snapcenter-after-props2.mp4

One fling with decelerationRate={0.998}

Before	After
decel-before-props2.mp4	decel-after-props2.mp4

Remove nestedScrollEnabled from the inner ScrollView

Before	After
nested-before-props2.mp4	nested-after-props2.mp4

Remove sendMomentumEvents

Before	After
momentum-before-props2.mp4	momentum-after-props2.mp4

RNTesterPlayground.js: paste into packages/rn-tester/js/examples/Playground/RNTesterPlayground.js and open Playground.

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * flow strict-local
 * format
 */

import type {RNTesterModuleExample} from '../../types/RNTesterTypes';

import * as React from 'react';
import {useRef, useState} from 'react';
import {
  Button,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import ScrollViewNativeComponent from 'react-native/Libraries/Components/ScrollView/ScrollViewNativeComponent';

function log(demo: string, data: {...}) {
  console.log('P49 ' + JSON.stringify({demo, ...data}));
}

const COLORS = ['#ffcdd2', '#c8e6c9', '#bbdefb', '#fff9c4', '#e1bee7'];

function Items({count, height}: {count: number, height: number}) {
  return Array.from({length: count}, (_, i) => (
    <View
      key={i}
      style={{height, backgroundColor: COLORS[i % COLORS.length]}}
      collapsable={false}>
      <Text style={styles.itemText}>
        item {i}, top {i * height}
      </Text>
    </View>
  ));
}

// pagingEnabled, items 180 tall in a 400 tall ScrollView. A slow drag of
// ~290 then release snaps to the nearest: item top (start: 360), item centred
// (center: 250) or a viewport page (disabled: 400).
function Snap({initial, next}: {initial: ?string, next: ?string}) {
  const ref = useRef<?React.ElementRef<typeof ScrollView>>(null);
  const [alignment, setAlignment] = useState<?string>(initial);
  const [y, setY] = useState(0);
  const [endY, setEndY] = useState<?number>(null);
  const name = 'snap-' + String(initial);
  return (
    <View>
      <Button
        testID="toggle"
        title={
          initial === next
            ? 'Reset to top'
            : `snapToAlignment: ${String(alignment)} -> ${String(
                alignment === initial ? next : initial,
              )}, reset`
        }
        onPress={() => {
          const value =
            initial === next || alignment !== initial ? initial : next;
          setAlignment(value);
          setEndY(null);
          ref.current?.scrollTo({y: 0, animated: false});
          log(name, {event: 'toggle', snapToAlignment: String(value)});
        }}
      />
      <Text
        testID="state"
        onPress={() => ref.current?.scrollTo({y: 0, animated: false})}>
        snapToAlignment={String(alignment)} y={y} momentumEnd=
        {String(endY)}
      </Text>
      <ScrollView
        ref={ref}
        style={styles.snapScroll}
        pagingEnabled={true}
        // $FlowFixMe[incompatible-type]
        snapToAlignment={alignment ?? undefined}
        scrollEventThrottle={16}
        onScroll={e => setY(Math.round(e.nativeEvent.contentOffset.y))}
        onScrollEndDrag={e =>
          log(name, {
            event: 'endDrag',
            y: Math.round(e.nativeEvent.contentOffset.y),
          })
        }
        onMomentumScrollEnd={e => {
          const v = Math.round(e.nativeEvent.contentOffset.y);
          setEndY(v);
          log(name, {
            event: 'momentumEnd',
            snapToAlignment: String(alignment),
            y: v,
          });
        }}>
        <Items count={20} height={180} />
      </ScrollView>
    </View>
  );
}

function Deceleration({initial}: {initial: ?number}) {
  const ref = useRef<?React.ElementRef<typeof ScrollView>>(null);
  const [rate, setRate] = useState<?number>(initial);
  const [y, setY] = useState(0);
  const [endY, setEndY] = useState<?number>(null);
  const name = 'decel-' + String(initial);
  return (
    <View>
      <Button
        testID="toggle"
        title={
          initial == null
            ? 'Reset to top'
            : `decelerationRate: ${String(rate)} -> ${String(
                rate == null ? initial : undefined,
              )}, reset`
        }
        onPress={() => {
          const value = initial == null || rate == null ? initial : undefined;
          setRate(value);
          setEndY(null);
          ref.current?.scrollTo({y: 0, animated: false});
          log(name, {event: 'toggle', decelerationRate: String(value)});
        }}
      />
      <Text
        testID="state"
        onPress={() => ref.current?.scrollTo({y: 0, animated: false})}>
        decelerationRate={String(rate)} y={y} momentumEnd={String(endY)}
      </Text>
      <ScrollView
        ref={ref}
        style={styles.decelScroll}
        decelerationRate={rate ?? undefined}
        scrollEventThrottle={16}
        onScroll={e => setY(Math.round(e.nativeEvent.contentOffset.y))}
        onMomentumScrollEnd={e => {
          const v = Math.round(e.nativeEvent.contentOffset.y);
          setEndY(v);
          log(name, {
            event: 'momentumEnd',
            decelerationRate: String(rate),
            y: v,
          });
        }}>
        <Items count={400} height={100} />
      </ScrollView>
    </View>
  );
}

function Nested() {
  const outer = useRef<?React.ElementRef<typeof ScrollView>>(null);
  const inner = useRef<?React.ElementRef<typeof ScrollView>>(null);
  const [nested, setNested] = useState(true);
  const [outerY, setOuterY] = useState(0);
  const [innerY, setInnerY] = useState(0);
  return (
    <View>
      <Button
        testID="toggle"
        title={
          nested
            ? 'Remove nestedScrollEnabled, reset'
            : 'Set nestedScrollEnabled, reset'
        }
        onPress={() => {
          setNested(v => !v);
          outer.current?.scrollTo({y: 0, animated: false});
          inner.current?.scrollTo({y: 0, animated: false});
          setOuterY(0);
          setInnerY(0);
          log('nested', {event: 'toggle', nestedScrollEnabled: !nested});
        }}
      />
      <Text testID="state">
        nestedScrollEnabled={nested ? 'true' : 'unset'} outerY={outerY} innerY=
        {innerY}
      </Text>
      <ScrollView
        ref={outer}
        style={styles.outerScroll}
        scrollEventThrottle={16}
        onScroll={e => {
          const v = Math.round(e.nativeEvent.contentOffset.y);
          setOuterY(v);
          log('nested', {event: 'scroll', which: 'outer', y: v});
        }}>
        <View style={styles.outerHeader}>
          <Text>Outer ScrollView</Text>
        </View>
        <ScrollView
          ref={inner}
          style={styles.innerScroll}
          // $FlowFixMe[incompatible-type]
          nestedScrollEnabled={nested ? true : undefined}
          scrollEventThrottle={16}
          onScroll={e => {
            const v = Math.round(e.nativeEvent.contentOffset.y);
            setInnerY(v);
            log('nested', {event: 'scroll', which: 'inner', y: v});
          }}>
          <Items count={15} height={100} />
        </ScrollView>
        <View style={styles.outerFooter}>
          <Text>Outer content below the inner ScrollView</Text>
        </View>
      </ScrollView>
    </View>
  );
}

// The public ScrollView always passes sendMomentumEvents as a boolean, so the
// prop is removed on the native component directly.
function Momentum() {
  const [send, setSend] = useState(true);
  const [counts, setCounts] = useState({begin: 0, end: 0});
  return (
    <View>
      <Button
        testID="toggle"
        title={
          send
            ? 'Remove sendMomentumEvents, reset counts'
            : 'Set sendMomentumEvents, reset counts'
        }
        onPress={() => {
          setSend(v => !v);
          setCounts({begin: 0, end: 0});
          log('momentum', {event: 'toggle', sendMomentumEvents: !send});
        }}
      />
      <Text testID="state">
        sendMomentumEvents={send ? 'true' : 'unset'} begin={counts.begin} end=
        {counts.end}
      </Text>
      <ScrollViewNativeComponent
        style={[styles.decelScroll, styles.clip]}
        // $FlowFixMe[incompatible-type]
        sendMomentumEvents={send ? true : undefined}
        onMomentumScrollBegin={() => {
          setCounts(c => ({...c, begin: c.begin + 1}));
          log('momentum', {event: 'momentumBegin'});
        }}
        onMomentumScrollEnd={() => {
          setCounts(c => ({...c, end: c.end + 1}));
          log('momentum', {event: 'momentumEnd'});
        }}>
        <View collapsable={false}>
          <Items count={100} height={100} />
        </View>
      </ScrollViewNativeComponent>
    </View>
  );
}

function TextProps() {
  const [on, setOn] = useState(true);
  return (
    <View>
      <Button
        testID="toggle"
        title={
          on ? 'Remove opacity, letterSpacing' : 'Set opacity, letterSpacing'
        }
        onPress={() => setOn(v => !v)}
      />
      <Text testID="state">
        {on ? 'opacity 0.3, letterSpacing 8' : 'opacity, letterSpacing unset'}
      </Text>
      <View style={styles.row}>
        <Text
          testID="text"
          style={[styles.bigText, on && {opacity: 0.3, letterSpacing: 8}]}>
          Hello text
        </Text>
      </View>
    </View>
  );
}

function ScrollFocus() {
  const input = useRef<?React.ElementRef<typeof TextInput>>(null);
  const [y, setY] = useState(0);
  return (
    <View>
      <Button
        testID="toggle"
        title="Focus the input below the fold"
        onPress={() => input.current?.focus()}
      />
      <Text testID="state">scrollsChildToFocus=false, scrollY: {y}</Text>
      <ScrollView
        style={styles.scroll}
        scrollsChildToFocus={false}
        scrollEventThrottle={16}
        onScroll={e => {
          const v = Math.round(e.nativeEvent.contentOffset.y);
          setY(v);
          log('focus', {event: 'scroll', y: v});
        }}>
        <View style={styles.spacer}>
          <Text>Top of the ScrollView</Text>
        </View>
        <TextInput
          ref={input}
          showSoftInputOnFocus={false}
          style={styles.input}
          placeholder="input"
        />
      </ScrollView>
    </View>
  );
}

const demos = {
  snapStart: () => <Snap initial="start" next="start" />,
  snapCenter: () => <Snap initial="center" next={null} />,
  decel: () => <Deceleration initial={0.998} />,
  decelUnset: () => <Deceleration initial={null} />,
  nested: Nested,
  momentum: Momentum,
  text: TextProps,
  focus: ScrollFocus,
};

function Playground() {
  const [demo, setDemo] = useState<$Keys<typeof demos>>('snapStart');
  const Demo = demos[demo];
  return (
    <View style={styles.container}>
      <View style={styles.tabs}>
        {Object.keys(demos).map(name => (
          <Button
            key={name}
            testID={'tab-' + name}
            title={name}
            onPress={() => setDemo(name)}
          />
        ))}
      </View>
      <Demo key={demo} />
    </View>
  );
}

const styles = StyleSheet.create({
  bigText: {fontSize: 40},
  clip: {overflow: 'hidden'},
  container: {padding: 10},
  decelScroll: {borderColor: 'gray', borderWidth: 1, height: 400, marginTop: 8},
  innerScroll: {borderColor: 'blue', borderWidth: 2, height: 250},
  input: {borderColor: 'gray', borderWidth: 1, height: 48},
  itemText: {fontSize: 18, padding: 6},
  outerFooter: {backgroundColor: '#eeeeee', height: 1500},
  outerHeader: {backgroundColor: '#eeeeee', height: 80},
  outerScroll: {borderColor: 'gray', borderWidth: 1, height: 450, marginTop: 8},
  row: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginTop: 24,
  },
  scroll: {borderColor: 'gray', borderWidth: 1, height: 200, marginTop: 12},
  snapScroll: {borderColor: 'gray', borderWidth: 1, height: 400, marginTop: 8},
  spacer: {backgroundColor: '#e3f2fd', height: 600},
  tabs: {flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 8},
});

export default {
  title: 'Playground',
  name: 'playground',
  description: 'Test out new features and ideas.',
  render: (): React.Node => <Playground />,
} as RNTesterModuleExample;

Differential Revision: D125438443

Pulled By: bartlomiejbloniarz

[meta-codesync]

@bartlomiejbloniarz has imported this pull request. If you are a Meta employee, you can view this in D125438443.

[meta-codesync]

@bartlomiejbloniarz has exported this pull request. If you are a Meta employee, you can view the originating Diff in D125438443.