react-native-animateable-text icon indicating copy to clipboard operation
react-native-animateable-text copied to clipboard

76 support + New Arch + Web Support + Chore Enhancements

Open WadhahEssam opened this issue 4 months ago • 0 comments

This PR mainly includes 3 features:

  • New arch renderer (Fabric) support. #42
  • Old arch renderer improvements.
  • Web support. #33
  • Example app improvements.

New Arch Support (Fabric)

  • Supporting fabric for this package is not quite straight forward, as the cpp (shadow tree) layer should be manually implemented to match the behaviour of react-native core <Text /> component. however getting there is possible and this PR currently fully supports it

  • Since both andorid/iOS should both be using the same c++ implementation, in theory the same code that works in iOS should also work in Android too, but for some limitation on react-native 75, android doesn't fully expose its internal c++ as dynamic modules so that devs to link their packages against it. However starting from react-native 76 it will be officially supported 🚀.

  • New arch support for react native 76 is done. but it simply means that new-arch support will be limited to react native 76 and beyond. here is a demo

https://github.com/user-attachments/assets/1b07a6bc-9d0e-4af9-8963-4e70385f449d

Old Arch Improvements:

  • In the old arch support, the package has been implemented by forking most of the core <Text /> component native files with very minor changes to achieve the desired behaviour. with a bit of tinkering we were able to achieve the same result with a much less amount of code. (there was no magic in there, but instead of duplicating files, we went to use the core classes and extending them with the modified behaviour)

This achieves a better maintainability experience where we (hopefully) wouldn't need to upgrade the package with every new react-native release.

Web Support

  • Added basic web support, since Reanimated is running differently on web than it runs on mobile, using a setText trick would be more than enough to achieve the web support. (without forking anything) here is a demo.

https://github.com/user-attachments/assets/820f7681-eab9-49ce-8895-51333ada2e76

Example app improvements.

  • Lastly we switched the example to use expo instead of react-native-cli which will improve the process of switching react-native versions or switching between old/new arch. and to follow the new standard of expo being the default way of building react-native apps.

Testing

if you would like to test the new arch support early, make sure you are on react-native 76. and then replace react-native-animateable-text in your package.json with the following

    "react-native-animateable-text": "0.14.0-beta.0",

here is a an full example repo (https://github.com/WadhahEssam/LatestRN)

What is left to do:

  • [x] Fix typescript warnings.
  • [x] Docs improvements.

WadhahEssam avatar Oct 15 '24 19:10 WadhahEssam