Please provide the following:
- SDK Version: 35
- Platforms(Android/iOS/web/all): all
After trying to implement hooks in my whole app, it looks like loadAsync (expo-font) does not work. I’m not 100% sure if it does not load the font because of my implementation of hooks or because of a mistake of mine.
Here is my code.
import React, { useEffect } from 'react';
import { ActivityIndicator, ImageBackground } from 'react-native';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { isSignedIn } from '../storage';
import CenteredImage from '../components/styles/CenteredImage';
import Colors from '../../constants/Colors';
const Loading = ({ navigation: { navigate } }) => {
useEffect(() => {
let didCancel = false;
async function loadAssets() {
await Promise.all([
Font.loadAsync({
AkzidenzGrotesk: require('../../assets/fonts/AkzidenzGrotesk-Medium.otf'),
AkzidenzGrotesk_light: require('../../assets/fonts/AkzidenzGrotesk-Light.otf'),
AkzidenzGrotesk_bold: require('../../assets/fonts/AkzidenzGrotesk-Bold.otf'),
AkzidenzGrotesk_sc: require('../../assets/fonts/AkzidenzGrotesk-LightSC.otf'),
Poppins: require('../../assets/fonts/Poppins-SemiBold.otf')
}),
Asset.loadAsync([require('../../assets/images/splash.png')])
]);
if (!didCancel) {
navigate(isSignedIn() ? 'SignedIn' : 'SignedOut');
}
}
loadAssets();
return () => {
didCancel = true;
};
}, []);
return (
<ImageBackground
source={require('../../assets/images/splash.png')}
style={{ width: '100%', height: '100%' }}
>
<CenteredImage>
<ActivityIndicator animating color={Colors.black} />
</CenteredImage>
</ImageBackground>
);
};
export default Loading;