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'; }