Skip to content

Commit

Permalink
fix: useAnimatedProps on input component not working on web (#6964)
Browse files Browse the repository at this point in the history
## Summary

Fixes #6202.
Due to React Native's `_valueTracker`, using `useAnimatedProps` won't
work on input component. Before when using `react-native-web` <= 18 we
were able to set `text` props using `setNativeProps` legacy function.
Currently on newer `react-native-web`, (and due to the `_valueTracker`),
we were trying to `setAttribute` `text` on input component
-unsuccessfully.
This PR implements fix that checks whether current component is `input`
with a prop `text`, if so it updates props directly on it.

With a support from this
[PR](#6691).

## Test plan

Run **JS props** or **Amount** in `web-example`

---------

Co-authored-by: Tomek Zawadzki <tomasz.zawadzki@swmansion.com>
  • Loading branch information
patrycjakalinska and tomekzaw authored Feb 14, 2025
1 parent 4c5b836 commit bb447bd
Showing 1 changed file with 8 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,14 @@ const updatePropsDOM = (

for (const key in domStyle) {
if (isAnimatedProps) {
(component as HTMLElement).setAttribute(key, domStyle[key]);
// We need to explicitly set the 'text' property on input component because React Native's
// internal _valueTracker (https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/inputValueTracking.js)
// prevents updates when only modifying attributes.
if ((component as HTMLElement).nodeName === 'INPUT' && key === 'text') {
(component as HTMLInputElement).value = domStyle[key] as string;
} else {
(component as HTMLElement).setAttribute(key, domStyle[key]);
}
} else {
(component.style as StyleProps)[key] = domStyle[key];
}
Expand Down

0 comments on commit bb447bd

Please sign in to comment.