fix: useAnimatedProps text not working on web

[5ZYSZ3K]

fix: web-example not starting because of metro-resolver version mismatch
feature: Add AnimatedPathExample to the repo

Summary

• Fixed an issue that on web you were not able to use useAnimatedProps to animate text on TextInput (useAnimatedProps not updating on web #6202)
• Fixed the version mismatch for web-example app

Test plan

You can check example app. Examples:

• AmountExample
• JSPropsExample

[patrycjakalinska]

Hi @5ZYSZ3K, thanks for creating this pull request c: Can you split it so one PR would have only one responsibility? Currently we have 2 fixes and one feature, ideally each one of these would be separate.

About fix: web-example not starting because of metro-resolver version mismatch - i think currently the web-example is starting (kudos to @tomekzaw and this PR), so no need for that.

[oxbits]

Hello @5ZYSZ3K and @patrycjakalinska

We see our issue has been referenced in this pull request.

We see another pull request has been referenced but we do not think it fixes the issue we are experiencing.

Summary

• Fixed an issue that on web you were not able to use useAnimatedProps to animate text on TextInput (useAnimatedProps not updating on web #6202)

[5ZYSZ3K]

Hi @5ZYSZ3K, thanks for creating this pull request c: Can you split it so one PR would have only one responsibility? Currently we have 2 fixes and one feature, ideally each one of these would be separate.

About fix: web-example not starting because of metro-resolver version mismatch - i think currently the web-example is starting (kudos to @tomekzaw and this PR), so no need for that.

Hi, I've rebased it and got rid of an additional example - now it's just the fix + a showcase on already existing examples (which were affected by the bug)

[5ZYSZ3K]

Hello @5ZYSZ3K and @patrycjakalinska

We see our issue has been referenced in this pull request.

We see another pull request has been referenced but we do not think it fixes the issue we are experiencing.

Summary

• Fixed an issue that on web you were not able to use useAnimatedProps to animate text on TextInput (useAnimatedProps not updating on web #6202)

If you meant that my fix is not working in your case, could you try it again, but with the textAdapter passed to useAnimatedProps?
The textAdapter should be created like that:

const textAdapter = createAnimatedPropAdapter(
  (props: Record<string, unknown>) => {
    props._setAttributeDirectly = true;
    props.value = props.text;
  },
  ['value']
);

[5ZYSZ3K]

A quick explanation on why it wasn't working:
Updating text prop on TextInput won't work because React implements _valueTracker there, so I added the possibility to set a value directly
facebook/react#11488
https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/inputValueTracking.js

[patrycjakalinska]

hi @5ZYSZ3K, thanks for finding the underlying issue in RN _valueTracker, big big kudos. Your quick fix was okay (as we talked!) but I've opened a PR with different approach, that would be easier for us to maintain. Again big thanks!