I'm having trouble with trying to load custom fonts into my Expo React-native App.
Here is my code.
App.js
import React, { useContext, useEffect, useState } from 'react';
import { Image, Text, View, StyleSheet, Animated } from 'react-native';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts';
import { ActivityIndicator } from 'react-native-paper';
const App = () => {
const [fontsLoaded, setFontsLoaded] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!fontsLoaded) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => setFontsLoaded(true)}
onError={(error) => console.log(error)}
/>
);
}
return (
<Text style={{fontFamily: 'ProximaNova-Regular'}}>Some Text</Text>
);
}
hooks/useFonts.js
import * as Font from 'expo-font';
const useFonts = async() => {
await Font.loadAsync({
'ProximaNova-Regular': require('../assets/fonts/ProximaNova-Regular.otf'),
});
};
export default useFonts;
The problem is Expo is not displaying my custom font and just displaying the default font even when I specifiy the font like
fontFamily: 'ProximaNova-Regular'
Any help would be greatly appreciated
Thanks,
Arnav
Related
I am new to using react native. I am using the code contributed in other topics similar to this one:
I use a hook:
import * as Font from "expo-font";
export default useFonts = async () =>
await Font.loadAsync({
Bebas: require('../assets/fonts/BebasNeue-Regular.ttf'),
Montserrat: require('../assets/fonts/Montserrat-Italic-VariableFont_wght.ttf'),
Inter: require('../assets/fonts/Inter-Black.otf')
});
And then in my app.js:
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
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={() => {}}
/>
);
}
return <View styles={styles.container}>{/* Code Here */}</View>;
}
I then try to use them with the same name in my different screens, and I think they are loaded correctly, (no error), but I can't see the change when I restart my application.
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.
I am learning testing, so I am facing basic difficulty to create a test for it...
Not sure if it's because the library is async or maybe because there is a query-call when the component is initialized. Maybe someone can help me ?
This is my test file
import 'react-native';
import React from 'react';
import {Welcome} from '../src/scenes'
import renderer, { act, create } from 'react-test-renderer';
// Is this the correct way ?
jest.mock('react-native-safe-area', () => ({
safeAreaInsets: {
top:0,
bottom:0
}
}));
describe('Welcome Page', () =>{
it('must invoke signUp', () =>{
const component = create(<Welcome navigation={() =>{}} />);
expect(component.toJSON()).toMatchSnapshot();
act(() =>{
component.root.findByProps({testID: 'signUp'}).props.onClick();
})
});
})
And the Welcome is something like this...
import React, { useState, useRef, useEffect } from 'react';
import { View, Text, Image, Animated, TouchableOpacity } from 'react-native';
import styles from './styles';
import SafeArea from 'react-native-safe-area';
function Welcome() {
const [safeTop, setSafeTop] = useState(0)
SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
console.log(result)
setSafeTop(result.safeAreaInsets.top)
})
return (<View />)
}
export default Welcome
I'm trying to add a custom font to ReactNative using expo
the fonts are actually showing up ok for now, but I keep getting a warning that I should use Font.loadAsync, I've tried to adapt what's in the docs to the tabbed template and watched a few tutorials, most recently Maximillian's on Udemy feels the closest.. but even though I'm using Font.loadAsync I'm still getting the same warning.
Repo, Tabs Template with Custom Fonts
import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import useCachedResources from './hooks/useCachedResources';
import useColorScheme from './hooks/useColorScheme';
import Navigation from './navigation';
// expo install expo-app-loading
import AppLoading from 'expo-app-loading';
// import { AppLoading } from 'expo';
// import { useFonts } from 'expo-font';
import * as Font from 'expo-font';
const fetchFonts = () => {
return Font.loadAsync({
'CharterBold': require('./assets/fonts/CharterBold.otf'),
'CharterBoldItalic': require('./assets/fonts/CharterBoldItalic.otf'),
'CharterItalic': require('./assets/fonts/CharterItalic.otf'),
'CharterRegular': require('./assets/fonts/CharterRegular.otf'),
'SpaceMono': require('./assets/fonts/SpaceMono-Regular.ttf'),
})
}
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [fontsLoaded, setFontsLoaded] = useState(false)
// const [loaded] = useFonts({
// CharterBold: require('./assets/fonts/CharterBold.otf'),
// CharterBoldItalic: require('./assets/fonts/CharterBoldItalic.otf'),
// CharterItalic: require('./assets/fonts/CharterItalic.otf'),
// CharterRegular: require('./assets/fonts/CharterRegular.otf'),
// SpaceMono: require('./assets/fonts/SpaceMono-Regular.ttf'),
// });
if (!fontsLoaded) {
return (
<AppLoading
startAsync={fetchFonts}
onFinish={() => setFontsLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
if (!isLoadingComplete) {
return null;
} else {
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
);
}
}
Create a folder called hooks where your App.js is located.
Inside that create a file called useFonts.js
Your useFonts.js should look like this -
import * as Font from "expo-font";
const useFonts = async () => {
await Font.loadAsync({
CharterBold: require("./assets/fonts/CharterBold.otf"),
CharterBoldItalic: require("./assets/fonts/CharterBoldItalic.otf"),
CharterItalic: require("./assets/fonts/CharterItalic.otf"),
CharterRegular: require("./assets/fonts/CharterRegular.otf"),
SpaceMono: require("./assets/fonts/SpaceMono-Regular.ttf"),
});
}
export default useFonts;
Now your App.js should look like this -
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { SafeAreaProvider } from "react-native-safe-area-context";
import useCachedResources from "./hooks/useCachedResources";
import useColorScheme from "./hooks/useColorScheme";
import Navigation from "./navigation";
import AppLoading from "expo-app-loading";
import useFonts from "./hooks/useFonts";
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [IsReady, SetIsReady] = useState(false);
const FetchFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={FetchFonts}
onFinish={() => SetIsReady(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
);
}
I found what I need under ./hooks/useCachedResources.ts
there is already a section that is using await Font.loadAsync
I just needed to add my fonts to that section.
I want to check If the user has a secure Token in a useEffect but I get this error Message.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.
This happens when I use the useEffect. If I remove it, then I get no error message but I need to check if the user has the token.
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import getSecureKey from '../utilies/getSecureKey';
const Stack = createStackNavigator();
const AppStack = ({ navigation }) => {
useEffect(() => {
getSecureKey().then(res => console.log(res)).catch(e => console.log(e));
}, []);
return (
<Stack.Navigator showIcon={true} initialRouteName="AppTabs">
<Stack.Screen name="AppTabs" component={AppTabs} options={{headerTitle: () => <Header />, headerStyle: {
backgroundColor: '#fff'
}}} />
.....
getSecureToken:
import * as SecureStore from 'expo-secure-store';
const getSecureKey = async () => {
const key = await SecureStore.getItemAsync('jwt');
return key;
};
export default getSecureKey;
App.js
import React, { useState, useEffect } from 'react';
import * as Font from 'expo-font';
import { NavigationContainer } from '#react-navigation/native';
import AppLoading from 'expo-app-loading';
import { Provider } from 'react-redux';
import store from './src/redux/store/index';
import AppStack from './src/navigation/stack';
const getFonts = async () => {
await Font.loadAsync({
"nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"),
"nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"),
});
};
const App = () => {
const [fontsLoaded, setFontsLoaded] = useState(false);
if(fontsLoaded) {
return (
<Provider store={store}>
<NavigationContainer><AppStack /></NavigationContainer>
</Provider>)
} else {
return (<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} onError={() => {}} />)
}
};
export default App;
Don't restore token in the navigator. Instead do this -
Firstly, install expo-app-loading from here
Then, create a folder called navigation where your App.js is located. Then inside it create a File called AppNavigator.js.
Inside AppNavigator.js, paste this
import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from '#react-navigation/stack';
import getSecureKey from '../utilities/getSecureKey';
const Stack = createStackNavigator();
const AppNavigator = () => {
// Remove these Lines --
// useEffect(() => {
// getSecureKey()
// .then((res) => console.log(res))
// .catch((e) => console.log(e));
// }, []);
return (
<Stack.Navigator showIcon={true} initialRouteName="AppTabs">
<Stack.Screen
name="AppTabs"
component={AppTabs}
options={{
headerTitle: () => <Header />,
headerStyle: {
backgroundColor: '#fff',
},
}}
/>
</Stack.Navigator>
);
};
export default AppNavigator;
For your fonts create a folder called hooks where your App.js is located and inside that create a file useFonts.js
In useFonts.js write like this -
import * as Font from "expo-font";
export default useFonts = async () => {
await Font.loadAsync({
"nunito-regular": require("./assets/fonts/Nunito-Regular.ttf"),
"nunito-bold": require("./assets/fonts/Nunito-Bold.ttf"),
});
};
In your App.js
import React, { useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { NavigationContainer } from '#react-navigation/native';
import AppLoading from 'expo-app-loading';
import useFonts from "./hooks/useFonts";
import getSecureKey from './utilities/getSecureKey';
import AppNavigator from './navigation/AppNavigator';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
// Always perform Token Restoration in App.js just to keep code clear.
const FontAndTokenRestoration = async () => {
await useFonts(); // Font is being loaded here
const token = await getSecureKey();
if (token) {
console.log(token);
}
};
if (!IsReady) {
return (
<AppLoading
startAsync={FontAndTokenRestoration}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}