Question 266296 in React native Question posted in
The official React Native documentation can be found here.

react native animated splash screen in android

I have a gif image which needs to be shown as a splash screen in react native for Android device. In MainActivity.java the code is

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);

        FrameLayout splashLayout = findViewById(R.id.splash_layout);
        ImageView splashImage = findViewById(R.id.splash_image);
        Glide.with(this).load(R.raw.splashscreen).into(splashImage);

….
}

activity_splash.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/splash_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="visible">
        <ImageView
            android:id="@+id/splash_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@raw/splashscreen"
            android:scaleType="centerCrop" />
    </FrameLayout>

</RelativeLayout>
  1. The problem is after showing the gif image the control is not transferred to App component of react native. It gets stuck and shows a white background if the frame layout is set to hidden.
  2. Another problem is a white background is shown in-between when traversing from logo to splash screen when the app is opened.

Is there any native way to show gif image as splash screen without using Lottie or any plugin?

Tags:

2

Answers


  1. 0

    In React Native, you can display GIF images using the react-native-fast-image library along with the lottie-react-native library. This combination allows you to display GIFs and control animations easily. Here’s a step-by-step guide on how to display a GIF image in a React Native Android application:

    1. Install Dependencies:

      First, install the necessary libraries by running the following commands:

      npm install react-native-fast-image
npm install lottie-react-native

    2. Link Native Modules:

      You may need to link the native modules for the installed libraries. Run the following command:

      react-native link

    3. Import Libraries:

      In your React Native component, import the necessary libraries:

      import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import LottieView from 'lottie-react-native';

    4. Display GIF Image:

      You can now display the GIF image using the LottieView component. For example:

      import React from 'react';
import { View } from 'react-native';
import FastImage from 'react-native-fast-image';
import LottieView from 'lottie-react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        source={require('./your-gif-file.json')} // Replace with the path to your GIF file
        autoPlay
        loop
      />
    </View>
  );
};

export default App;
      • Make sure to replace './your-gif-file.json' with the correct path to your GIF file. Lottie expects the GIF in JSON format, so you might need to convert your GIF to the Lottie JSON format using a tool like the LottieFiles website (https://lottiefiles.com/).

    5. Start the Development Server:

      Start your development server with the following command:

      npx react-native start

    6. Run the App on Android:

      Run your React Native application on an Android emulator or physical Android device using the following command:

      npx react-native run-android

    This will display the GIF image using the LottieView component. Remember to replace './your-gif-file.json' with the correct path to your GIF file, and ensure that your GIF is in the Lottie JSON format.

    Login or Signup to reply.
  2. 0

    You can use react native bootsplash a very decent package that supports animations and offers a lot of customisation!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search