React Native Lottie Splash Screen - react-native

I have some problems about with Lottie. I can't moving on this lib.
I have an animation with a .json file ready and I want to use it on the splash screen.
I don't know how to use it. More precisely, I couldn't find any documentation about the script I used.
Installed this:
npm i --save lottie-react-native
npm i --save lottie-ios#3.2.3
I also read expo's documentation about the loading screen, but I guess it wasn't very relevant. The way I used in other methods was different. As I am a new student, I chose Expo CLI. And I know I'm using Babel as a transpiler.
So I'm looking forward to your instructions.


If you looking for animation launch screen using lottie in react native, i would suggest looking into this package.
https://www.npmjs.com/package/react-native-lottie-splash-screen
It implements animation splash screen using airbnb lottie files. Also, I apply this for multiple react native projects and it worked well.
You should check this in same question in stack overflow! (React native iOS - splash screen using lottie file)


Use the Image of first frame of animation as Splash Screen
Then start animation right after splash screen hide
and when animation stop, hide it as-well

Related

react native expo showing strange overla

i am learning react native with expo instalation and using react-native navigation drawer. after some time adding new plugin/packages, create new components, and clean up/remove basic default installation components (i use tab template), it shows something like this in the android emulator: strange overlay sliding from bottom to top when first reload.
do you guys know and experience same thing? what is that and how to remove it? i tried run it on web, it doesnt show

Disable default Expo splash screen

I want to disable the default Expo splash screen and show my custom screen component. I've removed the following code from app.json but still there is a white blank loading before my custom screen.
"splash": {
"image": "./assets/images/splash.png",
...,
},
I've read information in Google, in the duplicated topics and also in the documentation here https://docs.expo.dev/versions/latest/sdk/splash-screen/ but I don't understand clearly. Please advise.

This is not the best solution but you can make default splash and your custom splash same.

For me a combination of three things:
Removing the expo-splash-screen section from my app.json
Editing my Podfile to specifically exclude expo-splash-screen from being installed (see below)
use_expo_modules!(exclude: ['expo-splash-screen'])
Adding a new splashscreen using XCode (see link below)
Clearing all caches (Pods, Podfile,lock, Node Mods & Yarn.lock) and rebuilding.
Hope this helps.
React Native IOS Splash Screen With Storyboard

Read this :
Configuring a splash screen and app icon and
Create a Splash Screen
or use expo install expo-splash-screen Doc SplashScreen

React Native : using expo-av does not show Video but when I use the Inspector and select Touchables I can see the elements

I have created an app using npx react-native init AwesomeProject command and I have used the expo-av npm package with Video in the Background (occupying the entire screen) and some Images which can be clicked using Touchable Opacity. I am trying on iOS.
I migrated this code from expo to just react-native. When I try to load the feed I can not see the Video or any elements on it but when I open the Inspector and select Touchables I am able to see all the elements on the screen.
I am not sure why this behaviour.
Did anyone face similar problem ?

How can I pre load assets before App load in react native without using expo?

I'm trying to create a game in react native and I have lots of graphical objects and images in my screens . so I want to be sure my screens load without delay.
for instance I have a problem with "ImageBackground",
it loads background after my screen rendered an it's not professional.
I searched and I found AppLoading on Expo but I'm not using expo in my project. so could you please help me with some advices?
thanks.

Expo (react native) fade out splash screen

Currently Expo’s splash screen hides as soon as the app is loaded, but I want it to gradually fade out.
How can this be achieved?
Expo’s splash screen docs: https://docs.expo.io/versions/latest/guides/splash-screens.html

I found that expo is too limiting with anything more than a very basic app. So I just switched to normal react native and installed a splash screen plugin. Now I have nice fade out of a splashcreen.