React Native How To Set Gif Image at Splash Screen?

user_9230790 0
Viewed 9593

I have created new react native mobile application and I need to set gif image to the splash screen. any example or source code can help me to do that.

render() {
    return (
      <View style={styles.container}>
        {/*<BackgroundImage source={Images.splashScreen}*/}
        {/*       style = {{width: 315, height: 383}} />*/}

        <Image
            style={{width: 300, height: 200}}
            source={{uri: 'http://gifsstore.com/public/upload/gifs/15609427721560942769.gif'}} />
      </View>
    );
  }
react-native-ios react-native
3 Answers

These answers here seem a bit misleading. The question asks how to add this to a splash screen with react native. The solutions say how to add gifs to the project but not how to add them to a splashscreen.

A splash screen is meant to be loaded before the JS bundle loads IE the render methods from react native will not be accessible before the JS bundle loads.

Solution: Android

Can actually have a gif directly in the splashscreen

Resources: Can I Add GIF format Image as a Splash Screen

Look at this repo as an example of integrating a gif into your splashscreen. https://github.com/koral--/android-gif-drawable

I got it working tonight (4/12/2020) with react native 0.62

Steps:.

  1. Follow the react-native-splash-screen tutorial to create /layout/launch_screen/xml
  2. Add in the android-gif-drawable api
  3. Bring a gif into the drawable folder and then link it like this:

layout/launch_screen.xml the @drawable/tutorial is my gif titled tutorial.gif

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@color/splashscreen_bg"
    android:layout_height="match_parent">
    <pl.droidsonroids.gif.GifImageView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:src="@drawable/tutorial"
    />
</RelativeLayout>

styles.xml

I was able to hide the white screen flash by using <item name="android:windowDisablePreview">true</item>

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
                <!-- Add the following line to set the default status bar color for all the app. -->

        <item name="android:statusBarColor">@color/app_bg</item>
        <!-- Add the following line to set the default status bar text color for all the app 
        to be a light color (false) or a dark color (true) -->
        <item name="android:windowLightStatusBar">false</item>
        <!-- Add the following line to set the default background color for all the app. -->
        <item name="android:windowBackground">@color/app_bg</item>
        <!-- Prevents white screen from appearing when opening the app -->
        <item name="android:windowDisablePreview">true</item>
    </style>
</resources>

Solution: iOS

  1. Create a static splash screen with a static logo asset
  2. After launch render an identical screen with the animated version of the logo

Hope this helps everyone!

user_48879930

GIF and WebP support on Android

When building your own native code, GIF and WebP are not supported by default on Android.

You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.10.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:1.10.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:1.10.0'
  implementation 'com.facebook.fresco:webpsupport:1.10.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:1.10.0'
}

Also, if you use GIF with ProGuard, you will need to add this rule in proguard-rules.pro :

-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {
  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier);
}

example

<Image source={require('./path/to/image/loading.gif')} />

OR

<Image source={{uri: 'http://www.urltogif/image.gif'}} />

Apply Link to GIF

user_112120740

you can also use FastImage for that functionality. It also gives support for gif files

you can also try below code

import FastImage from 'react-native-fast-image'

   <FastImage
            style={{ width: "100%", height: "100%" }}
            source={{
              uri: "your URL", //give your url here
              priority: FastImage.priority.normal
            }}
            resizeMode={FastImage.resizeMode.contain}
            onLoad={() => {
              setTimeout(
                () => {
                //navigate to another screen after some times
                },
                15000
              );
            }}
          />
user_76350850
Related