react-native-animateable-text
react-native-animateable-text copied to clipboard
76 support + New Arch + Web Support + Chore Enhancements
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++ asdynamic 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.