[Suggestion] Implementing gifs for splash screen about react-native-bootsplash HOT 7 CLOSED

@itsyogesh I published it here: https://github.com/zoontek/react-native-bootsplash-lottie-example

Unfortunately, there currently no way to be sure that the animation is loaded in lottie-react-native(see lottie-react-native/lottie-react-native#316), but in release mode by referencing the filename and not parsing the animation JSON at runtime, it should be quite quick!

I published a video on Youtube (1080p encoding is still processing for now): https://www.youtube.com/watch?v=8Mgqk05O-4w

from react-native-bootsplash.

@itsyogesh Hi 👋 Sorry I'm not a big fan of gif because the ratio weight / image quality is horrible 😞

But you can create a continuity between the splash screen and the logo animation, like in the example project and use use Lottie with react-native-lottie to create kick-ass animations (instead of Animated. It requires some After Effects skills, but it's totally doable regardless of the platform (iOS / Android) 🙂

from react-native-bootsplash.

Hey, yup I agree completely with the image quality (and the size for good quality ones), but you gotta start somewhere 😅. What I can't seem to wrap my head around is how would you go about building that continuity screen, the one you show after the splash.

Okay so after some digging, I did find that we could use Lottie directly as an XML (http://airbnb.io/lottie/#/android?id=from-xml), is there a way we could use that as a basis for the RNBootSplashActivity, otherwise there would be another huge issue around deep linking stuff if we create a new activity that acts as a continuous screen from the splash page.

For iOS, I have no clue at all, from the article it seems that in the Bootsplash Controller bootsplash.m, we need to add a viewDidShow and then inside that we call the AnimationView (http://airbnb.io/lottie/#/ios?id=animation-view) and load it there.

I hope I am making some sense. I have zero experience with native dev so all these questions might seem rudimentary or out of place.

from react-native-bootsplash.

@itsyogesh I would recommend not to implement them on the native side, it's too much complexity for a very small gain. I will create a small repository tomorrow using an animation from https://lottiefiles.com so you can understand how it can be done 🙂

from react-native-bootsplash.

Oh interesting, so my only worry with doing it on the JS side was that the time taken to load the JS bundle would be unpredictable and the animation won't start until the bundle is loaded. Do you think the asset loading would make it instant?

from react-native-bootsplash.

@itsyogesh As I know, it's possible to reference assets from /assets dir on Android or NSBundle on iOS so only the filename will cross the bridge, not the full json.

from react-native-bootsplash.

@itsyogesh Is this solution OK for you? 🙂

from react-native-bootsplash.