[Suggestion] Implementing gifs for splash screen

[itsyogesh]

💻 My environment

• react-native-bootsplash version: 1.2.1
• react-native version: 0.61.5
• Platform: both
• OS version: OS X 10.14
• Device: Apple + iPhone 11
• Simulator: yes

🕵️‍♂️ Reproducing the issue

Explain what you did, what you expected to happen, and what actually happens.
Provide some code or screenshots if needed.

This is more of a suggestion, so I am not sure if this the right way to address it, but I am trying to create a splash screen gif animation. I've gone through the documentation and its pretty clear that on iOS we can't really have a controller assigned to a xib or launch screen storyboard. What I was thinking, and do correct me if I am wrong, is there a way to maybe take the user to a different UIView to load the gif animation and that acts as the default splash screen.

The reason why I don't want to move this to the native side is that I am not sure about the time it'll take for the JS bundle to load and grabbing the first frame of the gif to act as a splash screen and only show the gif on the JS side might be really tricky from a usability standpoint.

🤞Solution

For iOS, here is an implementation article I found. https://www.amerhukic.com/animating-launch-screen-using-gif

For android, maybe we could use like a gif view drawable to handle that, something like this. https://github.com/koral--/android-gif-drawable

I have no clue about the implementation details of this, so I am just looking at some ideas around how we can tackle this issue.

P.S Thank you for building this lib, it has really helped out making RN apps on par with the native ones.

[zoontek]

@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) 🙂

[itsyogesh]

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.

[zoontek]

@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 🙂

[itsyogesh]

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?

[zoontek]

@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.

[zoontek]

@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

[zoontek]

@itsyogesh Is this solution OK for you? 🙂