`setNativeProps` ignores previous style changes

[piaskowyk]

The problem

Update react-native-web from 0.12.3 to 0.13.0 broke setNativeProps function, and next call setNativeProps override previously applayed style.

For example. I have component:

<View
  ref={viewRef}
  style={{ width: 100, height: 100, background: "#333" }}
/>

I want to change the style of the component.
Operation:

viewRef.setNativeProps({ style: { width: 200 } });
viewRef.setNativeProps({ style: { height: 200 } })

Result in version 0.12.3:
view style = { width: 200, height: 200 }

Result in version 0.13.0 (and newer):
view style = { width: 100, height: 200 }

How to reproduce

Just run both apps

Example in version 0.12.3: https://codesandbox.io/s/rnw-12-y11uy
Example in version 0.13.0: https://codesandbox.io/s/rnw-13-sbuto

Steps to reproduce:

1. Run both examples
2. Click a couple of times on the button
3. Observe differences

Expected behavior

I expect behavior like was in version 0.12.3

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.13.0
• React (version): 17.01
• Browser: 17.01

Additional context

In react-native-reanimated we use setNativeProps to apply changed style during an animation. But after upgrade react-native-web, we have strange issues on the web version if one animation is longer than another component back to the initial style.

Example issue:

• withSpring is behaving weirdly software-mansion/react-native-reanimated#1804
• interpolateColor and withTiming with duration < 250ms dont work in web software-mansion/react-native-reanimated#1450

I made a little investigation and confirmed that setNativeProps doesn't change the initial styles of component:

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

Lines 29 to 40 in c47bec7

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

I can prepare PR to apply changes to the initial style, but I'm not sure how this can affect other components.

Thanks for any help!

[necolas]

Sure, you can make a PR. Just be aware that the behavior of setNativeProps is undefined in RN and complicated to implement on web.

[necolas]

This patch is available in 0.15.2

[necolas]

c0abdbf

[nandorojo]

Thank you both for the quick fix here.

[necolas]

Re-opening as the patch caused a regression and has been reverted in 0.15.7

[necolas]

This will be very hard if not impossible to match react native. The good news is that this API will eventually be deprecated and removed from RN. The bad news is that the way React DOM updates, combined with the way RN style is converted to RDOM className + style, means that React DOM updates won't always clear away styles set using setNativeProps. Ideally an API like this would be integrated with the platform renderer. Same is true for touching the DOM outside of render, e.g., during style injection. I've brought this up many times with the React team but there is no progress because they're all focused on trying to get concurrent mode out.

Ultimately, I think React DOM is not the ideal renderer, but we need to use it for compat with the existing ecosystem. One day we might be able to build a new renderer with no backwards compat for React DOM and it would be a lot more efficient and powerful