react native expo showing strange overla - react-native

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

Related

React Native Lottie Splash Screen

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

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 ?

Icons not showing in React Native + React Native Paper app

This is a fresh React Native app using React Native Paper. I followed the instructions at https://callstack.github.io/react-native-paper/getting-started.html and installed react-native-paper and react-native-vector-icons.
For some reason, none of the icons are showing in the app -- see below:
For example, I have a Searchbar at the top of this screen with the following code. As far as I can see, I don't even have to specify an icon there. It should automatically display a magnifying glass but no icon is showing.
<Searchbar placeholder="New to do item..." />
Any idea why and how to fix it?
Stop your application. Then go to project directory > open cmd > run npx react-native link react-native-vector-icons
cmd will show you linking is successful
Now run your app again
Just follow the installation steps as described here: https://github.com/oblador/react-native-vector-icons#android
React-native-paper uses MaterialCommunityIcons so remember to add it in the iconFontNames list in the steps above.

Can you reload a React Native app from React Native Debugger?

I've just switched from debugging my React Native app in the browser using the console to React Native Debugger. In the browser, there is a button to reload the app which is very useful and something that I need to do a lot. Now using React Native Debugger I can't find a way to reload the app which means I need to shake the device (very annoying).
I've searched the docs but can't find way of doing it.
Is there a way I'm missing?
Yes, a reload can be done I think. Right click -> reload Js.
You can find this under the shortcut references: https://github.com/jhen0409/react-native-debugger/blob/master/docs/shortcut-references.md

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.