diff --git a/packages/react-native-web-examples/pages/pan-responder/index.js b/packages/react-native-web-examples/pages/pan-responder/index.js
index b01dd9c3de..1c490d8f32 100644
--- a/packages/react-native-web-examples/pages/pan-responder/index.js
+++ b/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 {
@@ -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();
};
diff --git a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js b/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
index 87fc3aa1f9..5ff19e6539 100644
--- a/packages/react-native-web/src/exports/Pressable/__tests__/index-test.js
+++ b/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');
});
});
diff --git a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js b/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
index 68e4174df5..658b680a99 100644
--- a/packages/react-native-web/src/exports/ScrollView/__tests__/index-test.js
+++ b/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);
diff --git a/packages/react-native-web/src/exports/Text/__tests__/index-test.js b/packages/react-native-web/src/exports/Text/__tests__/index-test.js
index 6d893d6913..f97b991991 100644
--- a/packages/react-native-web/src/exports/Text/__tests__/index-test.js
+++ b/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');
});
});
diff --git a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
index fc57e3e0d0..57fa1d9728 100644
--- a/packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap
+++ b/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`] = `
-
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 2`] = `
-
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 3`] = `
-
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 4`] = `
-
-`;
-
-exports[`components/View prop "ref" setNativeProps method style updates as expected 5`] = `
-
-`;
-
-exports[`components/View prop "ref" setNativeProps method works with react-native props 1`] = `
-
-`;
-
exports[`components/View prop "style" value is set 1`] = `
{
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(
);
- 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(
-
- );
- 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(
);
- expect(container.firstChild).toMatchSnapshot();
- });
});
});
diff --git a/packages/react-native-web/src/modules/UnimplementedView/index.js b/packages/react-native-web/src/modules/UnimplementedView/index.js
index 7e81439965..f28147cb0c 100644
--- a/packages/react-native-web/src/modules/UnimplementedView/index.js
+++ b/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 (
diff --git a/packages/react-native-web/src/modules/usePlatformMethods/index.js b/packages/react-native-web/src/modules/usePlatformMethods/index.js
index 76497e108e..606b08d0fe 100644
--- a/packages/react-native-web/src/modules/usePlatformMethods/index.js
+++ b/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
}): (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
- );
- };
}
});
diff --git a/packages/react-native-web/src/types/index.js b/packages/react-native-web/src/types/index.js
index ede1f6bb91..528a05db13 100644
--- a/packages/react-native-web/src/types/index.js
+++ b/packages/react-native-web/src/types/index.js
@@ -73,5 +73,4 @@ export interface PlatformMethods {
onSuccess: LayoutCallback,
onFail: () => void
) => void;
- setNativeProps: (nativeProps: {}) => void;
}
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
index 81369ced18..62fe9ac945 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js
+++ b/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 {
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedValue.js b/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedValue.js
index a9a94a80b8..f34371ccda 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedValue.js
+++ b/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 => {
diff --git a/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js b/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
index 8c29482071..c37a00b622 100644
--- a/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
+++ b/packages/react-native-web/src/vendor/react-native/Animated/useAnimatedProps.js
@@ -67,27 +67,10 @@ export default function useAnimatedProps(
// 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);
diff --git a/packages/react-native-web/src/vendor/react-native/FlatList/index.js b/packages/react-native-web/src/vendor/react-native/FlatList/index.js
index 12950eb4b5..72360e5683 100644
--- a/packages/react-native-web/src/vendor/react-native/FlatList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/FlatList/index.js
@@ -400,12 +400,6 @@ class FlatList extends React.PureComponent, void> {
}
}
- setNativeProps(props: {[string]: mixed, ...}) {
- if (this._listRef) {
- this._listRef.setNativeProps(props);
- }
- }
-
constructor(props: Props) {
super(props);
this._checkProps(this.props);
diff --git a/packages/react-native-web/src/vendor/react-native/SectionList/index.js b/packages/react-native-web/src/vendor/react-native/SectionList/index.js
index d6957eb688..217fb488d7 100644
--- a/packages/react-native-web/src/vendor/react-native/SectionList/index.js
+++ b/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;
};
-}
\ No newline at end of file
+}
diff --git a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
index fe7ddf4f9e..6511a1f5e3 100644
--- a/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
+++ b/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js
@@ -586,12 +586,6 @@ class VirtualizedList extends React.PureComponent {
}
}
- setNativeProps(props: Object) {
- if (this._scrollRef) {
- this._scrollRef.setNativeProps(props);
- }
- }
-
_getCellKey(): string {
return this.context?.cellKey || 'rootList';
}