rive-app / rive-react-native

MIT License
511 stars 35 forks source link

How should Rive integration be more seemless through Expo & React-native For Web and Native #257

Open t1gu1 opened 2 months ago

t1gu1 commented 2 months ago

Bullets point of things

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) image

Here a small exemple for the native (P.S. Note that I didn't map all props for the moment, but it WORKS) image

And there for the web: image

And created my types on a separate file that is shared between the 2 components: image

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.

t1gu1 commented 2 months ago

A lot related with that issue: https://github.com/rive-app/rive-react-native/issues/163