Fix View style payloads that Props 2.0 sends wrong or drops (#59078)

[bartlomiejbloniarz]

Summary:
With Props 2.0 on Android (enableExclusivePropsUpdateAndroid and the related flags), ReactViewManager receives the payload from HostPlatformViewProps::getDiffProps. Some style props come out wrong:

• backgroundSize, backgroundPosition, backgroundRepeat: never sent, so a tiled gradient fills the whole view.
• A perspective transform: sent as perspectiveX, which Android ignores.
• A removed side border width: sent as 0 instead of falling back to borderWidth.
• boxShadow or drop-shadow without a color: transparent instead of black.
• A removed shadowColor: sent as 0, so the elevation shadow disappears.
• A gradient color hint, as in linear-gradient(red, 20%, blue): drawn as a transparent stop.

This PR sends each of them the way the Java side reads them. Nothing changes with the flags off, except that the animation backend shares the transform code and now also sends perspective.

Changelog:

[ANDROID] [FIXED] - Fix View background, perspective, border width, shadow and gradient props with Props 2.0

Test Plan:

• New ViewPropsDiffTest, 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 BackgroundImage example and the Playground screen below.

Gradient with Background Repeat

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

Flip a card with perspective: 400

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

Remove borderLeftWidth (borderWidth: 8)

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

boxShadow and drop-shadow without a color

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

Remove shadowColor (elevation: 24)

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

Add a 20% color hint

Before	After
gradient-before-props2.mp4	gradient-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 {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

function Perspective() {
  const [on, setOn] = useState(false);
  return (
    <View>
      <Button
        testID="toggle"
        title={on ? 'Flip back' : 'Flip card'}
        onPress={() => setOn(v => !v)}
      />
      <Text testID="state">
        transform: perspective 400, rotateY {on ? '60deg' : '0deg'}
      </Text>
      <View style={styles.row}>
        <View
          style={[
            styles.card,
            {transform: [{perspective: 400}, {rotateY: on ? '60deg' : '0deg'}]},
          ]}>
          <Text style={styles.cardText}>CARD</Text>
        </View>
      </View>
    </View>
  );
}

function Border() {
  const [on, setOn] = useState(true);
  return (
    <View>
      <Button
        testID="toggle"
        title={on ? 'Remove borderLeftWidth' : 'Set borderLeftWidth'}
        onPress={() => setOn(v => !v)}
      />
      <Text testID="state">
        borderWidth 8{on ? ', borderLeftWidth 32' : ''}
      </Text>
      <View style={styles.row}>
        <View style={[styles.bordered, on && {borderLeftWidth: 32}]} />
      </View>
    </View>
  );
}

function Shadows() {
  const [on, setOn] = useState(true);
  return (
    <View>
      <Button
        testID="toggle"
        title={on ? 'Remove shadows' : 'Set shadows'}
        onPress={() => setOn(v => !v)}
      />
      <Text testID="state">
        {on ? 'boxShadow, drop-shadow: no color' : 'no shadows'}
      </Text>
      <View style={styles.row}>
        <View style={[styles.box, on && {boxShadow: '0 12px 16px'}]}>
          <Text>boxShadow</Text>
        </View>
        <View style={[styles.box, on && {filter: 'drop-shadow(0 12px 6px)'}]}>
          <Text>drop-shadow</Text>
        </View>
      </View>
    </View>
  );
}

function ShadowColor() {
  const [on, setOn] = useState(true);
  return (
    <View>
      <Button
        testID="toggle"
        title={on ? 'Remove shadowColor' : 'Set shadowColor'}
        onPress={() => setOn(v => !v)}
      />
      <Text testID="state">
        elevation 24, shadowColor {on ? 'red' : 'unset'}
      </Text>
      <View style={styles.row}>
        <View style={[styles.box, styles.elevated, on && {shadowColor: 'red'}]}>
          <Text>elevation</Text>
        </View>
      </View>
    </View>
  );
}

function Gradient() {
  const [hint, setHint] = useState(false);
  return (
    <View>
      <Button
        testID="toggle"
        title={hint ? 'Remove the 20% hint' : 'Add a 20% hint'}
        onPress={() => setHint(v => !v)}
      />
      <Text testID="state">
        linear-gradient(red, {hint ? '20%, ' : ''}blue)
      </Text>
      <View style={styles.row}>
        <View
          style={[
            styles.gradient,
            {
              backgroundImage: hint
                ? 'linear-gradient(red, 20%, blue)'
                : 'linear-gradient(red, blue)',
            },
          ]}
        />
      </View>
    </View>
  );
}

const demos = {
  perspective: Perspective,
  border: Border,
  shadows: Shadows,
  shadowColor: ShadowColor,
  gradient: Gradient,
};

function Playground() {
  const [demo, setDemo] = useState<$Keys<typeof demos>>('perspective');
  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({
  bordered: {
    backgroundColor: '#ffd54f',
    borderColor: '#1a237e',
    borderWidth: 8,
    height: 120,
    width: 200,
  },
  box: {
    alignItems: 'center',
    backgroundColor: 'white',
    borderRadius: 12,
    height: 120,
    justifyContent: 'center',
    margin: 16,
    width: 140,
  },
  card: {
    alignItems: 'center',
    backgroundColor: '#1e88e5',
    height: 140,
    justifyContent: 'center',
    width: 200,
  },
  cardText: {color: 'white', fontSize: 28, fontWeight: 'bold'},
  container: {padding: 10},
  elevated: {elevation: 24},
  gradient: {height: 160, width: 240},
  row: {
    alignItems: 'center',
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'center',
    marginTop: 24,
  },
  tabs: {flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 12},
});

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

Differential Revision: D125438461

Pulled By: bartlomiejbloniarz

[meta-codesync]

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

[meta-codesync]

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