[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,12 +24,7 @@ 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);
@@ -82,17 +32,6 @@ export default function usePlatformMethods({
         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';
   }