[change] Remove setNativeProps API

Previously deprecated, and not supported in the React Native Fabric
architecture.

Close #1935

packages/react-native-web-examples/pages/pan-responder/index.js

@@ -27,11 +27,9 @@ class DraggableCircle extends React.PureComponent {
  this._previousLeft = 20;
  this._previousTop = 84;
  this._circleStyles = {
- style: {
- left: this._previousLeft,
- top: this._previousTop,
- backgroundColor: 'green'
- }
+ left: this._previousLeft,
+ top: this._previousTop,
+ backgroundColor: 'green'
  };
  }
 
@@ -44,7 +42,7 @@ class DraggableCircle extends React.PureComponent {
  <View style={styles.container}>
  <View
  ref={this._setCircleRef}
- style={styles.circle}
+ style={[styles.circle, this._circleStyles]}
  {...this._panResponder.panHandlers}
  />
  </View>
@@ -56,17 +54,17 @@ class DraggableCircle extends React.PureComponent {
  };
 
  _highlight() {
- this._circleStyles.style.backgroundColor = 'blue';
+ this._circleStyles.backgroundColor = 'blue';
  this._updateNativeStyles();
  }
 
  _unHighlight() {
- this._circleStyles.style.backgroundColor = 'green';
+ this._circleStyles.backgroundColor = 'green';
  this._updateNativeStyles();
  }
 
  _updateNativeStyles() {
- this.circle && this.circle.setNativeProps(this._circleStyles);
+ this.forceUpdate();
  }
 
  _handleStartShouldSetPanResponder = (
@@ -90,8 +88,8 @@ class DraggableCircle extends React.PureComponent {
  };
 
  _handlePanResponderMove = (e: Object, gestureState: Object) => {
- this._circleStyles.style.left = this._previousLeft + gestureState.dx;
- this._circleStyles.style.top = this._previousTop + gestureState.dy;
+ this._circleStyles.left = this._previousLeft + gestureState.dx;
+ this._circleStyles.top = this._previousTop + gestureState.dy;
  this._updateNativeStyles();
  };
 

packages/react-native-web/src/exports/Pressable/__tests__/index-test.js

@@ -262,7 +262,6 @@ describe('components/Pressable', () => {
  expect(typeof node.measure === 'function');
  expect(typeof node.measureLayout === 'function');
  expect(typeof node.measureInWindow === 'function');
- expect(typeof node.setNativeProps === 'function');
  });
  });
 

packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js

@@ -93,7 +93,6 @@ describe('components/ScrollView', () => {
  expect(typeof node.measure === 'function').toBe(true);
  expect(typeof node.measureLayout === 'function').toBe(true);
  expect(typeof node.measureInWindow === 'function').toBe(true);
- expect(typeof node.setNativeProps === 'function').toBe(true);
  // Does it have the scrollview methods?
  expect(typeof node.getScrollResponder === 'function').toBe(true);
  expect(typeof node.getScrollableNode === 'function').toBe(true);

packages/react-native-web/src/exports/Text/__tests__/index-test.js

@@ -292,7 +292,6 @@ describe('components/Text', () => {
  expect(typeof node.measure === 'function');
  expect(typeof node.measureLayout === 'function');
  expect(typeof node.measureInWindow === 'function');
- expect(typeof node.setNativeProps === 'function');
  });
  });
 

packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap

@@ -163,49 +163,6 @@ exports[`components/View prop "pointerEvents" 1`] = `
 />
 `;
 
-exports[`components/View prop "ref" setNativeProps method style updates as expected 1`] = `
-<div
- class="css-view-175oi2r r-color-howw7u"
- style="width: 10px;"
-/>
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 2`] = `
-<div
- class="css-view-175oi2r"
- style="width: 20px; color: rgb(255, 165, 0); height: 20px;"
-/>
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 3`] = `
-<div
- class="css-view-175oi2r r-color-howw7u"
- style="width: 30px;"
-/>
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 4`] = `
-<div
- class="css-view-175oi2r r-color-howw7u"
- style="width: 30px;"
-/>
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 5`] = `
-<div
- class="css-view-175oi2r r-color-howw7u"
- style="width: 40px;"
-/>
-`;
-
-exports[`components/View prop "ref" setNativeProps method works with react-native props 1`] = `
-<div
- aria-label="label"
- class="css-view-175oi2r r-pointerEvents-ah5dr5"
- style="margin-right: 10px; margin-left: 10px; box-shadow: 0px 0px 0px rgba(0,0,0,1.00); vertical-align: top;"
-/>
-`;
-
 exports[`components/View prop "style" value is set 1`] = `
 <div
  class="css-view-175oi2r"

packages/react-native-web/src/exports/View/__tests__/index-test.js

@@ -7,7 +7,6 @@
 
 import React from 'react';
 import View from '../';
-import StyleSheet from '../../StyleSheet';
 import { createEventTarget } from 'dom-event-testing-library';
 import { act, render } from '@testing-library/react';
 
@@ -252,52 +251,6 @@ describe('components/View', () => {
  expect(typeof node.measure === 'function');
  expect(typeof node.measureLayout === 'function');
  expect(typeof node.measureInWindow === 'function');
- expect(typeof node.setNativeProps === 'function');
- });
-
- describe('setNativeProps method', () => {
- test('works with react-native props', () => {
- const ref = React.createRef();
- const { container } = render(<View ref={ref} />);
- const node = ref.current;
- node.setNativeProps({
- accessibilityLabel: 'label',
- pointerEvents: 'box-only',
- style: {
- marginHorizontal: 10,
- shadowColor: 'black',
- shadowWidth: 2,
- textAlignVertical: 'top'
- }
- });
- expect(container.firstChild).toMatchSnapshot();
- });
-
- test('style updates as expected', () => {
- const ref = React.createRef();
- const styles = StyleSheet.create({ root: { color: 'red' } });
- // initial render
- const { container, rerender } = render(
- <View ref={ref} style={[styles.root, { width: 10 }]} />
- );
- const node = ref.current;
- expect(container.firstChild).toMatchSnapshot();
- // set native props
- node.setNativeProps({
- style: { color: 'orange', height: 20, width: 20 }
- });
- expect(container.firstChild).toMatchSnapshot();
- // set native props again
- node.setNativeProps({ style: { width: 30 } });
- expect(container.firstChild).toMatchSnapshot();
- node.setNativeProps({ style: { width: 30 } });
- node.setNativeProps({ style: { width: 30 } });
- node.setNativeProps({ style: { width: 30 } });
- expect(container.firstChild).toMatchSnapshot();
- // update render
- rerender(<View ref={ref} style={[styles.root, { width: 40 }]} />);
- expect(container.firstChild).toMatchSnapshot();
- });
  });
  });
 

packages/react-native-web/src/modules/UnimplementedView/index.js

@@ -16,10 +16,6 @@ import React from 'react';
  * Common implementation for a simple stubbed view.
  */
 class UnimplementedView extends React.Component<*, *> {
- setNativeProps() {
- // Do nothing.
- }
-
  render(): Node {
  return (
  <View style={[unimplementedViewStyles, this.props.style]}>

packages/react-native-web/src/modules/usePlatformMethods/index.js

@@ -11,52 +11,7 @@ import type { GenericStyleProp } from '../../types';
 import type { ViewProps } from '../../exports/View';
 
 import UIManager from '../../exports/UIManager';
-import createDOMProps from '../createDOMProps';
 import useStable from '../useStable';
-import { useRef } from 'react';
-
-let didWarn = false;
-const emptyObject = {};
-
-function setNativeProps(
- node,
- nativeProps,
- pointerEvents,
- style,
- previousStyleRef
-) {
- if (!didWarn) {
- console.warn(
- 'setNativeProps is deprecated. Please update props using React state instead.'
- );
- didWarn = true;
- }
-
- if (node != null && nativeProps) {
- const domProps = createDOMProps(null, {
- pointerEvents,
- ...nativeProps,
- style: [style, nativeProps.style]
- });
-
- const nextDomStyle = domProps.style;
-
- if (previousStyleRef.current != null) {
- if (domProps.style == null) {
- domProps.style = {};
- }
- for (const styleName in previousStyleRef.current) {
- if (domProps.style[styleName] == null) {
- domProps.style[styleName] = '';
- }
- }
- }
-
- previousStyleRef.current = nextDomStyle;
-
- UIManager.updateView(node, domProps);
- }
-}
 
 /**
  * Adds non-standard methods to the hode element. This is temporarily until an
@@ -69,30 +24,14 @@ export default function usePlatformMethods({
  style?: GenericStyleProp<*>,
  pointerEvents?: $PropertyType<ViewProps, 'pointerEvents'>
 }): (hostNode: any) => void {
- const previousStyleRef = useRef(null);
- const setNativePropsArgsRef = useRef(null);
- setNativePropsArgsRef.current = { pointerEvents, style };
-
- // Avoid creating a new ref on every render. The props only need to be
- // available to 'setNativeProps' when it is called.
+ // Avoid creating a new ref on every render.
  const ref = useStable(() => (hostNode: any) => {
  if (hostNode != null) {
  hostNode.measure = (callback) => UIManager.measure(hostNode, callback);
  hostNode.measureLayout = (relativeToNode, success, failure) =>
  UIManager.measureLayout(hostNode, relativeToNode, failure, success);
  hostNode.measureInWindow = (callback) =>
  UIManager.measureInWindow(hostNode, callback);
- hostNode.setNativeProps = (nativeProps) => {
- const { style, pointerEvents } =
- setNativePropsArgsRef.current || emptyObject;
- setNativeProps(
- hostNode,
- nativeProps,
- pointerEvents,
- style,
- previousStyleRef
- );
- };
  }
  });
 

packages/react-native-web/src/types/index.js

@@ -73,5 +73,4 @@ export interface PlatformMethods {
  onSuccess: LayoutCallback,
  onFail: () => void
  ) => void;
- setNativeProps: (nativeProps: {}) => void;
 }

packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js

@@ -115,8 +115,6 @@ class AnimatedStyle extends AnimatedWithChildren {
  style.__makeNative();
  styleConfig[styleKey] = style.__getNativeTag();
  }
- // Non-animated styles are set using `setNativeProps`, no need
- // to pass those as a part of the node config
  }
  NativeAnimatedHelper.validateStyles(styleConfig);
  return {

packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedValue.js

@@ -249,8 +249,7 @@ class AnimatedValue extends AnimatedWithChildren {
  animation.start(
  this._value,
  value => {
- // Natively driven animations will never call into that callback, therefore we can always
- // pass flush = true to allow the updated value to propagate to native with setNativeProps
+ // Natively driven animations will never call into that callback
  this._updateValue(value, true /* flush */);
  },
  result => {

packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js

@@ -67,27 +67,10 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
 
  // NOTE: This callback is only used by the JavaScript animation driver.
  onUpdateRef.current = () => {
- //if (
- // process.env.NODE_ENV === 'test' ||
- // typeof instance !== 'object' ||
- // typeof instance?.setNativeProps !== 'function' ||
- // isFabricInstance(instance)
- //) {
- // Schedule an update for this component to update `reducedProps`,
- // but do not compute it immediately. If a parent also updated, we
- // need to merge those new props in before updating.
- scheduleUpdate();
- //} else if (!node.__isNative) {
- // $FlowIgnore[not-a-function] - Assume it's still a function.
- // $FlowFixMe[incompatible-use]
- // instance.setNativeProps(node.__getAnimatedValue());
- //} else {
- // throw new Error(
- // 'Attempting to run JS driven animation on animated node ' +
- // 'that has been moved to "native" earlier by starting an ' +
- // 'animation with `useNativeDriver: true`',
- // );
- //}
+ // Schedule an update for this component to update `reducedProps`,
+ // but do not compute it immediately. If a parent also updated, we
+ // need to merge those new props in before updating.
+ scheduleUpdate();
  };
 
  const target = getEventTarget(instance);

packages/react-native-web/src/vendor/react-native/FlatList/index.js

@@ -400,12 +400,6 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
  }
  }
 
- setNativeProps(props: {[string]: mixed, ...}) {
- if (this._listRef) {
- this._listRef.setNativeProps(props);
- }
- }
-
  constructor(props: Props<ItemT>) {
  super(props);
  this._checkProps(this.props);

packages/react-native-web/src/vendor/react-native/SectionList/index.js

@@ -229,13 +229,6 @@ export default class SectionList<
  }
  }
 
- setNativeProps(props: Object) {
- const listRef = this._wrapperListRef && this._wrapperListRef.getListRef();
- if (listRef) {
- listRef.setNativeProps(props);
- }
- }
-
  render(): React.Node {
  const {
  stickySectionHeadersEnabled: _stickySectionHeadersEnabled,
@@ -258,4 +251,4 @@ export default class SectionList<
  _captureRef = ref => {
  this._wrapperListRef = ref;
  };
-}
+}

packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js

@@ -586,12 +586,6 @@ class VirtualizedList extends React.PureComponent<Props, State> {
  }
  }
 
- setNativeProps(props: Object) {
- if (this._scrollRef) {
- this._scrollRef.setNativeProps(props);
- }
- }
-
  _getCellKey(): string {
  return this.context?.cellKey || 'rootList';
  }