expo run:android is stuck at blank white screen - react-native

As seen in the above image, after successfully building for android, the standalone app is installed on the device but when opened, before showing the Splash screen, the blank white screen appears.
This is my App.js code
import React, { useState, useEffect, useRef } from "react";
import { NavigationContainer } from "#react-navigation/native";
import StackNavigator from "./StackNavigator";
import { AuthProvider } from "./hooks/useAuth";
import { ActivityIndicator, LogBox, View } from "react-native";
import { Asset } from "expo-asset";
import {
Roboto_100Thin,
Roboto_100Thin_Italic,
Roboto_300Light,
Roboto_300Light_Italic,
useFonts,
} from "#expo-google-fonts/roboto";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import * as encoding from "text-encoding";
LogBox.ignoreAllLogs();
function cacheImages(images) {
return images.map((image) => {
if (typeof image === "string") {
return Image.prefetch(image);
} else {
return Asset.fromModule(image).downloadAsync();
}
});
}
function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}
export default function App() {
const [ready, setReady] = useState(true);
let [fontsLoaded] = useFonts({
"Roboto-Thin": Roboto_100Thin,
Roboto_100Thin_Italic,
"Roboto-Light": Roboto_300Light,
Roboto_300Light_Italic,
});
async function _loadAssetsAsync() {
const imageAssets = await cacheImages([
require("./ASSETS/Loading_Black.gif"),
require("./ASSETS/icons/like.png"),
require("./ASSETS/icons/like-red.png"),
require("./ASSETS/icons/comment.png"),
require("./ASSETS/icons/share.png"),
require("./ASSETS/CHAT_BGRD-02.jpeg"),
]);
await Promise.all([...imageAssets, fontsLoaded]);
}
return ready && fontsLoaded ? (
<NavigationContainer>
<AuthProvider>
<StackNavigator />
</AuthProvider>
</NavigationContainer>
) : (
<AppLoading
startAsync={_loadAssetsAsync}
onFinish={() => setReady(true)}
onError={(e) => {
console.log(e);
}}
/>
);
}
The app is perfectly running on development mode, production mode, and even tried using
expo start --no-dev --minify
All these are perfectly working fine. But if I try to run the app in standalone mode, this is what's the output is. Appreciate your help :)

I had this happen, I updated android studio, updated android studio's sdk tools: Android emulator, hypervisor, platform tools, etc.
Then I re-made the devices in the Virtual Device Manager and then re-ran "expo start --android" and it worked.

Related

React Native EXPO AdMobInterstitial ads not working properly, The ads showing only one time when I click on the page

In my app, all other Expo AdMob ads are working very well except AdMobInterstitial. AdMobInterstitial ads showing only once. when I try to visit the next time on that page the ads not showing. I am not getting any errors as well. could you please tell me what's wrong with the below codes? Appreciate your support.
I am using this-> npm i expo-ads-admob
import React, { useEffect, useState, } from 'react';
import { Text, View } from 'react-native';
import {
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded,
setTestDeviceIDAsync,
} from 'expo-ads-admob';
const interstitial = async () => {
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712');
try {
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();
} catch (error) {
console.log(e);
}
}
const TestAds = ({ navigation }) =>{
useEffect (() => {
interstitial();
},[])
return (
<View>
<Text>Hello World Testing</Text>
</View>
});
export default TestAds;

React Native Expo CLI Import .ttf Fonts

Trying to import .ttf for font in expo cli.
I also have splash screen. I wanna show the splash screen until the font loads.
Font: Josefin Sans.
"expo": "~45.0.0"
I took reference from following links but nothing works:
Using Custom Fonts: https://docs.expo.dev/guides/using-custom-fonts/
Splash Screen: https://docs.expo.dev/versions/latest/sdk/splash-screen/
Code (App.js)
import { useState, useEffect, useCallback } from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import Header from "./components/Header.component";
import styles from "./styles/appStyle";
import * as Font from "expo-font";
import * as SplashScreen from "expo-splash-screen";
const App = () => {
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
// Pre-load fonts
await Font.loadAsync({
"JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
});
// Artificially delay for two seconds to simulate a slow loading
// experience. Please remove this if you copy and paste the code!
await new Promise((resolve) => setTimeout(resolve, 2000));
} catch (e) {
} finally {
// Tell the application to render
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
// This tells the splash screen to hide immediately! If we call this after
// `setAppIsReady`, then we may see a blank screen while the app is
// loading its initial state and rendering its first pixels. So instead,
// we hide the splash screen once we know the root view has already
// performed layout.
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<>
<SafeAreaView style={styles.container} onLayout={onLayoutRootView}>
<Header />
<Text>Hello World!</Text>
<StatusBar style="light" backgroundColor="#05060B" />
</SafeAreaView>
</>
);
};
export default App;
Error
Android Bundling failed 12ms
Unable to resolve module ./assets/fonts/JosefinSans-Regular.ttf from C:\Users\user\Desktop\app\App.js:
None of these files exist:
* JosefinSans-Regular.ttf
* assets\fonts\JosefinSans-Regular.ttf\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
18 | // Pre-load fonts
19 | await Font.loadAsync({
> 20 | "JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
| ^
21 | });
22 | // Artificially delay for two seconds to simulate a slow loading
23 | // experience. Please remove this if you copy and paste the code!
File Structure:
Snap.png
Answer
expo install #expo-google-fonts/josefin-sans expo-font
And the code looks like this.
import { useState, useEffect, useCallback } from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import Header from "./components/Header.component";
import styles from "./styles/appStyle";
import * as Font from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import {
useFonts,
JosefinSans_100Thin,
JosefinSans_200ExtraLight,
JosefinSans_300Light,
JosefinSans_400Regular,
JosefinSans_500Medium,
JosefinSans_600SemiBold,
JosefinSans_700Bold,
JosefinSans_100Thin_Italic,
JosefinSans_200ExtraLight_Italic,
JosefinSans_300Light_Italic,
JosefinSans_400Regular_Italic,
JosefinSans_500Medium_Italic,
JosefinSans_600SemiBold_Italic,
JosefinSans_700Bold_Italic,
} from "#expo-google-fonts/josefin-sans";
const App = () => {
const [appIsReady, setAppIsReady] = useState(false);
let [fontsLoaded] = useFonts({
JosefinSans_100Thin,
JosefinSans_200ExtraLight,
JosefinSans_300Light,
JosefinSans_400Regular,
JosefinSans_500Medium,
JosefinSans_600SemiBold,
JosefinSans_700Bold,
JosefinSans_100Thin_Italic,
JosefinSans_200ExtraLight_Italic,
JosefinSans_300Light_Italic,
JosefinSans_400Regular_Italic,
JosefinSans_500Medium_Italic,
JosefinSans_600SemiBold_Italic,
JosefinSans_700Bold_Italic,
});
const prepare = async () => {
try {
// Pre-load fonts
await Font.loadAsync(fontsLoaded)
.then(() => {
setAppIsReady(true);
})
.catch((err) => {});
// Artificially delay for two seconds to simulate a slow loading
// experience. Please remove this if you copy and paste the code!
// await new Promise((resolve) => setTimeout(resolve, 2000));
} catch (e) {}
};
useEffect(() => {
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
// This tells the splash screen to hide immediately! If we call this after
// `setAppIsReady`, then we may see a blank screen while the app is
// loading its initial state and rendering its first pixels. So instead,
// we hide the splash screen once we know the root view has already
// performed layout.
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<>
<SafeAreaView style={styles.container} onLayout={onLayoutRootView}>
<Header />
<Text>Hello World!</Text>
<StatusBar style="light" backgroundColor="#05060B" />
</SafeAreaView>
</>
);
};
export default App;

Expo fontello don't load

I'm trying to load a fontello icons in my project, but if I try to load in App.js, it send "false' and the app don't load:
import React, {useState} from "react";
import AppLoading from "expo-app-loading";
import { ThemeProvider } from "styled-components";
import theme from "./src/globalStyles/theme";
import Routes from "./src/routes";
import {
useFonts,
Roboto_400Regular,
Roboto_500Medium,
Roboto_700Bold,
} from "#expo-google-fonts/roboto";
import { Fontello } from "./assets/fonts/fontello.ttf";
export default function App() {
const [fontsLoaded] = useFonts({
Roboto_400Regular,
Roboto_500Medium,
Roboto_700Bold,
Fontello,
});
console.log(fontsLoaded)
if (!fontsLoaded) {
return <AppLoading />;
}
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
);
}
And if I comment the line with Fontello, it load the app but I got the following error:
fontFamily "fontello" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Font.loadAsync.
Install expo-font
expo install expo-font
Create a folder called hooks where you App.js is located.
Inside hooks folder create a file called useFonts.js paste this code
useFonts.js
import * as Font from 'expo-font';
import { Roboto_400Regular } from '#expo-google-fonts/roboto';
const useFonts = async () => {
await Font.loadAsync({
Roboto: Roboto_400Regular,
Fontello: require('../assets/fonts/fontello.ttf'),
// All Other Fonts
});
};
export default useFonts;
Then in your App.js paste this code
import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';
import { ThemeProvider } from 'styled-components';
import theme from './src/globalStyles/theme';
import Routes from './src/routes';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, setIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => setIsReady(true)}
onError={(error) => console.log(error)}
/>
);
}
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
);
}
Working Example Works on Android. Some bug in the web version.

console.error: "fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync

When using import Native Base (as it comes) I have encountered trouble because of a Font error shown in screen. If you click dismiss it will disappear but the user can't be seeing that every time a Text gets loaded. ¿Is there a correct way to solve the font problem?
This official documentation says to do this:
// At the top of your file
import { Font } from 'expo';
import { Ionicons } from '#expo/vector-icons';
// Later on in your component
async componentDidMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
}
but it didn't work. This is my code:
import React, { Component } from 'react';
import { View, } from "react-native";
import { Button, Text } from 'native-base';
export default class MyComponent extends Component {
render() {
return (
<View>
<Button>
<Text>Click me!</Text>
</Button>
</View>
)
}
}
I expect the code to run smoothly but every time it loads the same error:
console.error: "fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Font.loadAsync."
__expoConsoleLog
AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:95014:31
...................
...................
...................
Native Base uses Roboto_Medium as a font for Title and some objects. Roboto_Medium is not a system font.
You can do either two things
Install and Load Roboto_Medium font in your codebase.
Edit existing Native Base core files
1) Install and Load Roboto_Medium font in your codebase
After installing Native Base, run these in terminal expo install expo-font.
After that Open your App.js file, add this two lines,
import * as Font from 'expo-font';
import { Ionicons } from '#expo/vector-icons';
After that include function componentDidMount()
async componentDidMount() {
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
});
this.setState({ isReady: true });
}
You must call componentDidMount() function. If you are using Class Component, then this can be called using constuctor method
constructor(){
componentDidMount();
}
But, if you are using Functional Method, then you have manually call the componentDidMount() function.
2) Edit existing Native Base core files (Alternative)
You have to edit core Native Base files.
Location of File:
commonColor.js
node_modules\native-base\dist\src\theme\variables \ commonColor.js
material.js
node_modules\native-base\dist\src\theme\variables \ material.js
platform.js
node_modules\native-base\dist\src\theme\variables \ platform.js
In this files, find "Roboto_Medium" and replace it with "Roboto" or any other system default fonts.
But, as we have hardcoded the node_modules, with each update of Native Base, you have to again hard code the values again.
If anyone still has this problem and is using functional components, i solved it like this:
import * as Font from 'expo-font';
useEffect(() => {
(async () => await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}))();
}, [])
For newer Functional Components solved it like this
import { View } from 'react-native';
import { NativeBaseProvider, Text } from 'native-base';
const MyComponent = () => {
return (
<NativeBaseProvider>
<View>
<Text>Example Text</Text>
</View>
</NativeBaseProvider>
)
}
export default MyComponent;
For older Functional Components solved it like this
import { View } from 'react-native';
import { Text } from 'native-base';
import * as Font from 'expo-font';
const MyComponent = () => {
useEffect(() => {
(async () => await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}))();
}, [])
return (
<View>
<Text>Example Text</Text>
</View>
)
}
export default MyComponent;
For Class Components solved it like this
import React, { Component } from 'react';
import { View, } from "react-native";
import { Button, Text } from 'native-base';
import { Font } from 'expo';
import { Ionicons } from '#expo/vector-icons';
export default class MyComponent extends Component {
state = {
loading: true
}
async componentDidMount() {
await Font.loadAsync({
'Roboto': require('native-base/Fonts/Roboto.ttf'),
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
...Ionicons.font,
})
this.setState({ loading: false })
}
render() {
if (this.state.loading) {
return (
<View></View>
);
}
return (
<View>
<Button>
<Text>Click me!</Text>
</Button>
</View>
)
}
}

Promise rejection when I try to load fonts in expo

I get a problem with Expo and react-native. When I try to loadAsync font from assets folder I get this error:
[Unhandled Promise rejection: Error: Font not found /data/data/host.exp.exponent/cache/ExperienceData/.../ExponentAsset-5868d2d7f28da04ee373451e87d682f8.ttf]
My code in App.js
import React, { Component } from "react";
import { configureStore } from "./store.js";
import { Provider } from "react-redux";
import { AppLoading, Font } from 'expo';
import MainWrapper from './components/mainWrapper'
const store = configureStore();
export default class App extends Component {
state = {
appReady: false
}
loadAssets = async () => {
await Font.loadAsync({
'Arial': require('./assets/fonts/Arial.ttf')
});
this.setState({appReady: true});
}
componentDidMount() {
this.loadAssets()
}
render() {
return (
<Provider store={store}>
{this.state.appReady ?
<MainWrapper />
:
<AppLoading />
}
</Provider>
);
}
}
and I use
"expo": {
"sdkVersion": "21.0.0"
}
Most of my App.js I took from Expo example with some changes. Do you have any ideas how can I resolve this error?
It was broken .ttf file. I downloaded correct file of font from another source and my problem has been resolved. But what about FontAwesome I will explore this.