Comments (4)
@necolas I appreciate the technical concerns here—thank you!—and I'm sure it's not easy to convey without the reader already having some context around the implementation.
From my point of view, setNativeProps
in RNW (0.18) works well-enough for styles (which might be because of how styles work in RNW 0.18) but more importantly works for setting text input values without round-tripping via the React lifecycle. My use case is for things like formatted text inputs between focus/blur.
I have previously tried to remove setNativeProps
in favour of the suggested state-based approaches, but I ran into update cascades/loops (certainly in the native code), and overall introduces more complexity and fragility than setNativeProps
for these types of tasks. For style updates—such as handling hover—setNativeProps
is perceptibly more responsive than the state round-trip.
Do you think there's some way forward where a "use at own risk" type API is introduced for setNativeProps
for these difficult edge cases? Or is this a hard line from your point of view?
from react-native-web.
@jonathanj For now I think you could use Platform.OS
forks to use setNativeProps
on native and direct manipulation on web. Eventually RN will support the same direct manipulation APIs as web, and will support sync updates that make things like managing text input content better than it is today.
from react-native-web.
setNativeProps never worked correctly on web and had undefined behaviour on native. If the fabric implementation has defined behaviour, there's still no reliable way to implement it on web while styles are not simply inline styles. The primary use case of setNativeProps was updating styles without a render, but it's just not reliable on web. Things like text input animations aren't done this way on web either. The new RN architecture will eventually allow for sync events and sync updates, providing the same event loop model as web, so the setNativeProps pattern will likely have fewer reasons to be used on native
from react-native-web.
Add setNativeProps to Fabric
Summary:
changelog: Introduce setNativeProps to FabricAdd support for
setNativeProps
in Fabric for backwards compatibility. It is still recommended to move away fromsetNativeProps
because the API will not work with future features.We can make step Migrating off setNativeProps in migration guide optional.
Reviewed By: yungsters, mdvacca
Differential Revision: D41521523
fbshipit-source-id: 4d9bbd6304b8c5ee24a36b33039ed33ae1fc21f8
from react-native-web.
Related Issues (20)
- Pressable triggers onPress twice, when activated via Enter key and set to disabled HOT 1
- Pointer event is not applied for grand-children
- Module build failed HOT 2
- `accessibilityRole="search"` should map to element `<search>`
- In webview Input box is not working As expected HOT 1
- Styles are wrong when used inside a shadow root HOT 4
- react native bottom tab not found in react native web no render
- Breaks with libraries that use NativeModules, like react-native-randombytes HOT 3
- PanResponder is not working with scale/zoom
- No documentation about shadow* style props being deprecated HOT 2
- Wrong measureInWindow value while using transform
- Avoid react updates on each animation frame HOT 2
- react-native-web on webOS HOT 2
- Confusion with `@react-native/normalize-colors` vs. `@react-native/normalize-color` HOT 1
- ColumnWrapperStyle not supported for single column lists
- react-native-web Server API Support HOT 1
- Text component inline style overrides global style [color] HOT 3
- Is 50ms press delay really necessary? Can't be configurable? HOT 1
- Typescript support HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-web.