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
Related
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
While working on my app yesterday, the web emulator of Expo was working properly.
Now when I am trying to start the app on the browser today using expo start and then w, the whole screen is blank.
Nothing is there on the browser.
What kind of issue is this? How should I fix this?
Image of the emulator:
EDIT
These are the Screenshot from Snack:
App.js
LoginScreen.js
HomeScreen.js
The problem you're having is in navigation and has nothing to do with emulator,
the issue is that react Navigation on web require linking prop, you can check for details in documentation
Another solution is to use #react-navigation/web and here is a example web navigation in react native
For your case try using :
const LoginScreen({navigation})
and use navigation object normally like that :
navigation.navigate('HomeScreen')
no need to use useNavigation
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
This is my view and this happens when I open the soft keyboard, I'm running on the latest Expo and React Native, the TextInput is not seen. I don't have standalone Android and iOS folders so I cannot add things to manifest or can I?
Use a KeyboardAvoidingView.
Here's the link to the doc https://reactnative.dev/docs/keyboardavoidingview
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.