HwangTaehyun / react-native-lottie-splash-screen

⚡ Lottie splash screen for your react native app!
MIT License
222 stars 62 forks source link

Cannot add launch_screen.png #12

Closed LightKnight3r closed 2 years ago

LightKnight3r commented 3 years ago

Run react-native info in your project and share the content. OS: macOS 11.4 CPU: (8) x64 Apple M1 Memory: 35.50 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.19.1 - ~/.nvm/versions/node/v12.4.0/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2 Android SDK: API Levels: 22, 23, 25, 26, 27, 28, 29, 30 Build Tools: 28.0.3, 29.0.1, 29.0.2, 29.0.3, 31.0.0 Android NDK: 17.2.4988734 IDEs: Android Studio: 4.1 AI-201.8743.12.41.7042882 Xcode: 12.4/12D4e - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native:0.61.5 npmGlobalPackages: react-native-cli: 2.0.1 What react-native-splash-screen version are you using? The newest version. What platform does your issue occur on? (Android/iOS/Both) Android Describe your issue as precisely as possible I followed the guide customming lauch_screen.png but my app show white screen. "Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

drawable-ldpi drawable-mdpi drawable-hdpi drawable-xhdpi drawable-xxhdpi drawable-xxxhdpi"

haisamMH commented 3 years ago

The same here, please anyone let me know how to launch the launch_screen.png file

Samwell1996 commented 2 years ago

you also can add this for IOS if you add current code to Dynamic.swift file, to func createAnimationView

    UIGraphicsBeginImageContext(animationView.frame.size)
    UIImage(named: "Splash.png")?.draw(in: animationView.bounds)

    if let image = UIGraphicsGetImageFromCurrentImageContext(){
        UIGraphicsEndImageContext()
      animationView.backgroundColor = UIColor(patternImage: image)
    } else {
        UIGraphicsEndImageContext()
     }

for Android the right way you need add in launch_screen -

  android:background="@drawable/launch_screen"

in my code this looks like

     <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen"
  >
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_rawRes="@raw/splash"
        app:lottie_autoPlay="true"
        app:lottie_loop="false"
        />
</LinearLayout>
HwangTaehyun commented 2 years ago

I close this issue

glushkina1 commented 2 years ago

@Samwell1996 hi, so launch_screen.xml is

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              xmlns:tools="http://schemas.android.com/tools"
              tools:context=".MainActivity"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/white"
>
    <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottie"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:lottie_rawRes="@raw/loading"
            app:lottie_autoPlay="true"
            app:lottie_loop="false"
    />
</LinearLayout>

and raw/loading.json is ?

some lottie animation in json format

What about launch_screen.png? What should I put there? this way it doesnt work for me. Could me explain me where's my problem?

LightKnight3r commented 2 years ago

@Samwell1996 hi, so your launch_screen.xml is

 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen"
  >
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:lottie_rawRes="@raw/splash"
        app:lottie_autoPlay="true"
        app:lottie_loop="false"
        />
</LinearLayout>

and raw/loading.json is ?

some lottie animation in json format

this way it doesnt work for me. Could me explain me where's my problem?

hi @glushkina1 , your json file name must be the same with 'app:lottie_rawRes="@raw/splash"'. So you can change loading.json to splash.json or change app:lottie_rawRes="@raw/splash" to app:lottie_rawRes="@raw/loading". That will resolve your issue

glushkina1 commented 2 years ago

@LightKnight3r hi, sorry for my typo. My code was always @raw/loading . Repo says I need add both files - launch_screen.png and launch_screen.xml . What should I put in launch_screen.png ?

LightKnight3r commented 2 years ago

@LightKnight3r hi, sorry for my typo. My code was always @raw/loading . Repo says I need add both files - launch_screen.png and launch_screen.xml . What should I put in launch_screen.png ?

just changing android:background="@color/white" to android:background="@drawable/launch_screen" in your code. And add launch_screen.png to drawable folders

glushkina1 commented 2 years ago

@LightKnight3r thanks a lot! everything works!