I am trying to use Google Fonts with my entire expo project, but i dont want to import it to each and every component. How can I just import it once, and call it everywhere? Or better yet, can I set my imported font as a default font?
app.js
import { Provider } from 'react-redux'
import store from './redux/store'
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import { useFonts, Montserrat_400Regular,} from '#expo-google-fonts/montserrat';
import { HomeScreen } from './components/HomeScreen';
import { AddItemScreen } from './components/AddItemScreen';
import { DetailedDayView } from './components/DetailedDayView';
export default function App(navigation) {
const Stack = createNativeStackNavigator()
let [fontsLoaded] = useFonts({
Montserrat_400Regular,
});
if (!fontsLoaded) {
return null;
}
return (
<Provider store={store}>
{/* <SafeAreaProvider> */}
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
/>
<Stack.Screen
name="AddItemScreen"
component={AddItemScreen}
/>
<Stack.Screen
name="DetailedDayView"
component={DetailedDayView}
/>
</Stack.Navigator>
</NavigationContainer>
{/* </SafeAreaProvider> */}
</Provider>
);
}
For React Native CLI:
First of all, download any fonts in .ttf format.
Create a directory and name it assets, inside the assets directory create another directory name it fonts, and then move the .ttf file here. Your path will look like this: - root/assets/fonts/your-font.ttf
Now, in your root directory create a file named, react-native.config.js. Inside that file paste the following code:
module.exports = {
assets: ['./src/assets/fonts'],
}
Run this command npx react-native-asset. For the older version of React Native try this command npx react-native link
There you go. You're done. Now, check this directory root/android/app/src/main/assets/fonts to check if the font is added or not.
Now you can use your font anywhere in the app. Like this: -
fontFamily: 'your-font'
Note: You can add multiple font-family. For adding another font-family repeat 1, 2, and 4.
For Expo:
For Expo follow this answer: How to apply custom fonts to whole project, Expo React Native
Related
[
import React from 'react'
import { NavigationContainer } from '#react-navigation/native'
import Login from './android/app/src/Login'
import flexbox from './android/app/src/flexbox'
const Stack = createStackNavigator()
function MyStack() {
return(
<Stack.Navigator>
<Stack.Screen
name = 'Login'
component= {Login}/>
<Stack.Screen
name = 'flexbox'
component={flexbox}/>
</Stack.Navigator>
)
}
export default function App(){
return(
<Navigation Container>
<My Stack/>
</Navigation Container>
)
}
](https://i.stack.imgur.com/tYK2z.jpg)
originmodulepath "c:\users\hp\Downloads\task\App.js","targetModuleName"::./src/Login","message"."Unable to resolve module
Instead of writing full path I think you should write the path related to the current location of your file. I mean, if your file is located in /android/app/src and you need import Login that is located in the same directory then a correct import could be
import Login from './Login'
all,
I am new to react native, I am now having issue when I was trying to use customize fonts for my application, it keeps giving me error: None of these files exist: * assets\fonts\ARIAL.TTF etc.
I appreciate if anyone can help me, thank you so much.
I am using expo to run my project, and I install expo-font(v 10.0.4) to use costomize font. Here is my code of using the fonts:
import { Provider } from 'react-redux'
import { PersistGate } from 'redux-persist/integration/react'
import AuthStack from './routes/authStack'
import store, { persistor } from './store'
import { useFonts } from 'expo-font'
import Loading from './components/loading'
function App() {
const [fontLoaded] = useFonts({
Arial: require('./assets/fonts/ARIAL.TTF'),
ArialBold: require('./assets/fonts/ARIALBD.TTF'),
BlairMd: require('./assets/fonts/BlairMdITCTTMediumFont.ttf'),
})
console.log('app font loaded====', fontLoaded)
return fontLoaded ? (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AuthStack />
</PersistGate>
</Provider>
) : (
<Loading />
)
}
So I am using useFonts hook from expo-font to load my fonts, and I already put my fonts file under assets, here is the file structure:
assets folder is under the same directory as App.js. In assets folder, there is fonts folder, and in fonts folder, all my fonts files are there
If anyone can help me, thank you so much
I had the same issue, it is resolved after stop and rerun the server.
I guess expo server needs to execute again in order changes to take place.
I'm trying to create a custom StackNavigator and distribute it on a custom package. The problem is that when I want to apply my custom Stack I get the following error:
Error: Couldn't register the navigator. Have you wrapped your app with
'NavigationContainer'?
This is my App.tsx:
import { createThemedStack } from '#my-custom-package'
//this is the reference to my custom navigator
const ThemedStack = createThemedStack()
function App() {
return (
<NavigationContainer>
<ThemedStack.Navigator>
<ThemedStack.Screen name='Screen 1' component={Screen1} />
<ThemedStack.Screen name='Screen 2' component={Screen2} />
...
</ThemedStack.Navigator>
</NavigationContainer>
)
}
export default App
ThemedStack.tsx - Here I want to apply some custom common styles to the stacks:
import * as React from 'react'
import { useNavigationBuilder, createNavigatorFactory, StackRouter } from '#react-navigation/native'
import { StackView } from '#react-navigation/stack'
// #ts-ignore
function ThemedStack({ initialRouteName, children, screenOptions, ...rest }) {
const { state, descriptors, navigation } = useNavigationBuilder(StackRouter, {
initialRouteName,
children,
screenOptions,
})
return <StackView {...rest} state={state} navigation={navigation} descriptors={descriptors} />
}
export default createNavigatorFactory(ThemedStack)
What am I doing wrong? I dont get it. The ThemedStack navigator is inside a NavigationContainer.
I did this based on https://reactnavigation.org/docs/custom-navigators/ RN Navigation docs, although they don't say anything about doing it in external package structure.
Thanks in advance :)
Sounds like you have #react-navigation/native in dependencies in your package which results in multiple versions installed. You should move it to peerDependencies.
When internet access is on, useAssets returns the localUri as expected. But after going offline, it returns undefined. Even the cached file still exists in the cache folder, it does not reference it. The code is below:
import React from "react";
import { useAssets } from "expo-asset";
import { Image, View } from "react-native";
export default function Avatar({ imageUrl}) {
const [assets, error] = useAssets([imageUrl]);
return (
<View style={[styles.avatar, style]}>
<Image
source={{
uri: assets[0].localUri
}}
/>
</View>
);
}
So I want to access downloaded and cached images offline with useAssets hook but it seems that expo-assets has not such feature, isn't it?
You need to install the 'expo-asset' package.
expo install expo-asset
Using the react-navigation library, when you're on a screen that's part of a stack navigator you can use props.navigation.push(route name, params). I want to achieve the same thing, being able to push a new screen but from the root level where I take the NavigationContainer ref.
So I have this code
<NavigationContainer ref={navigationRef}>
...
</NavigationContainer>
And I want to do something like
navigationRef.push(routeName, params);
Unfortunately, I don't have the push method here. Is there a workaround for this?
You could set up a RootNavigation.js file like this:
import * as React from 'react';
import { StackActions } from '#react-navigation/native';
export const navigationRef = React.createRef();
export function push(...args) {
navigationRef.current?.dispatch(StackActions.push(...args));
}
Then you can use it like this:
import {navigationRef} from './path/to/RootNavigation';
<NavigationContainer ref={navigationRef}>
{/* content */}
</NavigationContainer>
and this:
import * as RootNavigation from './path/to/RootNavigation';
RootNavigation.push('Screen', { data: '...' })
Source: https://reactnavigation.org/docs/navigating-without-navigation-prop/.