Full screen Lottie animation is cut off

[wkibbler]

What react-native-splash-screen version are you using? 1.1.6

What platform does your issue occur on? (Android/iOS/Both) iOS

Describe your issue as precisely as possible : 1) When using a Lottie animation that expands to fill the whole screen the it is cut off at the top and bottom. Is there a solution for this?

Join a screenshot or video of the problem on the simulator or device?

[girish54321]

Use 18:9 lotties.

[wkibbler]

Still has the white space just smaller. Also how does this handle different screen sizes etc

[girish54321]

Try digging in native code you must see property live fit type.

[eugen2991]

try this

[sainyanhtay]

how about android to fill fullscreen?

[vinayn-mend]

@eugen2991 How to set the aspect fill in android?

[CoverID]

Update your launch_screen.xml

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_rawRes="@raw/animated_1"
        app:lottie_autoPlay="true"
        app:lottie_loop="false"
        android:scaleType="centerCrop"
        />

and this package file: node_modules/react-native-lottie-splash-screen/android/src/main/java/org/devio/rn/splashscreen/SplashScreen.java

package org.devio.rn.splashscreen;

import android.animation.Animator;
import android.app.Activity;
import android.app.Dialog;
import android.os.Build;
import android.view.WindowManager; //this
import com.airbnb.lottie.LottieAnimationView;
import java.lang.ref.WeakReference;

/**
 * SplashScreen
 * 启动屏
 * from：http://www.devio.org
 * Author:CrazyCodeBoy
 * GitHub:https://github.com/crazycodeboy
 * Email:crazycodeboy@gmail.com
 */
public class SplashScreen {
  private static Dialog mSplashDialog;
  private static WeakReference mActivity;
  private static Boolean isAnimationFinished = false;
  private static Boolean waiting = false;

  /**
   * 打开启动屏
   */
  public static void show(final Activity activity, final int themeResId, final int lottieId) {
    if (activity == null)
      return;
    mActivity = new WeakReference(activity);
    activity.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        if (!activity.isFinishing()) {
          mSplashDialog = new Dialog(activity, themeResId);
          mSplashDialog.setContentView(R.layout.launch_screen);
          mSplashDialog.setCancelable(false);
          setActivityAndroidP(mSplashDialog); //this
          LottieAnimationView lottie = (LottieAnimationView) mSplashDialog.findViewById(lottieId);

          lottie.addAnimatorListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
              System.out.println("asdf");
            }

            @Override
            public void onAnimationEnd(Animator animation) {
              SplashScreen.setAnimationFinished(true);
            }

            @Override
            public void onAnimationCancel(Animator animation) {}

            @Override
            public void onAnimationRepeat(Animator animation) {}
          });

          if (!mSplashDialog.isShowing()) {
            mSplashDialog.show();
          }
        }
      }
    });
  }

  public static void setAnimationFinished(boolean flag) {
    if (mActivity == null) {
      return;
    }

    isAnimationFinished = flag;

    final Activity _activity = mActivity.get();

    _activity.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        if (mSplashDialog != null && mSplashDialog.isShowing()) {
          boolean isDestroyed = false;

          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            isDestroyed = _activity.isDestroyed();
          }

          if (!_activity.isFinishing() && !isDestroyed && waiting) {
            mSplashDialog.dismiss();
            mSplashDialog = null;
          }
        }
      }
    });
  }

  private static void setActivityAndroidP(Dialog dialog) {
    if (Build.VERSION.SDK_INT >= 28) {
        if (dialog != null && dialog.getWindow() != null) {
            dialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);//全屏显示
            WindowManager.LayoutParams lp = dialog.getWindow().getAttributes();
            lp.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES;
            dialog.getWindow().setAttributes(lp);
        }
    }
  } // this

  public static void show(final Activity activity, int lottieId) {
    int resourceId = R.style.SplashScreen_Fullscreen; // this
    show(activity, resourceId, lottieId);
  }

  /**
   * 关闭启动屏
   */
  public static void hide(Activity activity) {
    if (activity == null) {
      if (mActivity == null) {
        return;
      }
      activity = mActivity.get();
    }

    if (activity == null)
      return;

    waiting = true;

    final Activity _activity = activity;

    _activity.runOnUiThread(new Runnable() {
      @Override
      public void run() {
        if (mSplashDialog != null && mSplashDialog.isShowing()) {
          boolean isDestroyed = false;

          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
            isDestroyed = _activity.isDestroyed();
          }

          if (!_activity.isFinishing() && !isDestroyed && isAnimationFinished) {
            mSplashDialog.dismiss();
            mSplashDialog = null;
          }
        }
      }
    });
  }
}

[sahilit]

@CoverID adding android:scaleType="centerCrop" in launch_screen.xml solved the issue. Thanks 👍

[Umair1181]

really a time savour android:scaleType="centerCrop" in launch_screen.xml solved the issue. Thanks