How should Rive integration be more seemless through Expo & React-native For Web and Native
Opened this issue · 1 comments
Bullets point of things
- Should be compatible on web, ios, android in one package
- Should not required to manually duplicate and move files into assets folder manually (Should be a config in the app.json)
- As you made these change, put Rive as a reference directly into the Expo documentation as Lottie
Description
When using Rive and seeing the Expo configuration here: https://rive.app/community/doc/adding-rive-to-expo/docFSwIlblYi
I was thinking that it would work on every plateform seemlessly.
Got that wrong since it was only for IOS and Android and didn't works also for the Web.
I mean I made it works at the end creating my own adapter since you got the web version. (@rive-app/react-canvas)
Why not just adapting you package to make that works out of the box?
In react-native you can execute code depending of the extension file and the platform executed.
.web.ts Will be use for the web and the other will be use for the others builds. (This is something build in: https://docs.expo.dev/router/advanced/platform-specific-modules/#platform-specific-extensions)
Here a small exemple for the native (P.S. Note that I didn't map all props for the moment, but it WORKS)
And there for the web:
And created my types on a separate file that is shared between the 2 components:
Also the logic about using expo if you want to get at the same point of the competition, is to make it seemless for the newbies of these world and to be super easy to use and install. (https://docs.expo.dev/versions/latest/sdk/lottie/)
Another small detail i got to care about using Rive into EXPO was to push the assets Correctly on IOS and Android.
BUT the logic of expo is to not touching these native folders of IOS/Android. (Users should .gitignore these folders ideally to not having to maintain it and just using side custom script to edit these)
So i use a nice package of a nice dude to respond to this part of the problem: https://github.com/Malaa-tech/expo-custom-assets
Conclusion
Just trying to help here cause I think Rive is really nice and want to see more people using it.
I expose my irritants here on my journey adding rive into our React-native/Expo project that build our IOS/Android and web app.