I can't change mt app fontfamily. I'd tried so much things from searching in google. I want to change the fontfamily of the app fonts. please help.
below is my added fonts:
Below is the react-native.config.js:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
You are using expo project, You should use this package to load the fonts inside the project
expo install expo-font
I have made a Snack Example of "Sarpanch" custom font working
https://snack.expo.dev/DENUcVd2U
Related
I am trying to add custom fonts to my app. I tried everything on the internet but nothing works. However, I think that the only thing that works on React Native 0.70.5 is linking assets using npx react-native-asset.
I tried making react-native.config.jsfile, then using npx react-native-asset. However, it just doesn't give any output and resets the command prompt. I even tried Cmder and Windows PowerShell. Nothing works they all reset.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets'],
};
You have to specify the exect location of the font's TTF or OTF file.
Update react-native.config.js file like this.
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'], // stays the same
};
Put the font files in project>>assets>>fonts folder
After that run command npx react-native-asset
Probabily you will get the results.
How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.
When I execute this command:
react-native link
This make some aditional linking which generate extra error.
So how Can I Link only fonts folder.
create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).
module.exports = {
project:{
ios: {},
android: {}
},
assets: ["./assets/fonts"]
}
after all run react-native link to link the resources to your project.
you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:
const styles = StyleSheet.create({
text: {
fontFamily: "yekan",
},
})
as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.
create a file in root (react-native.config.js)
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};
Create a folder called assets in root and paste the font file under fonts
folder(assets/fonts/xxxx.ttf)
Run npx react-native link in command line.
You can add custom font in react-native using expo-font.
Install >> expo install expo-font
import * as Font from 'expo-font'
loadFonts=async()=> {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),
// Any string can be used as the fontFamily name. Here we use an object to provide more control
Montserrat-SemiBold': {
uri: require('../../assets/fonts/Poppins-Medium.ttf'),
display: Font.FontDisplay.FALLBACK,
},
});
this.setState({ fontsLoaded: true });
}
componentDidMount(){
this.loadFonts();
}
render(){
return(
<View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
)
}
For reference, click here.
react-native: 0.60.4,
react: 16.8.6,
npm: 6.10.1
XCode: 10.2.1
AndroidStudio: 3.4.1
I created a project using
npx react-native init awesomeApp --template typescript
I have put my assets in the
assets/fonts/<Bunch of .ttf files>
My Directory Structure
awesomeApp
|
+--android
+--ios
+--assets
| |
| +---fonts
| |
| +-- ProximaNova-Bold.ttf
+--react-native-config.js
then I ran
react-native link
Nothing happends, XCode not showing any added Resource neither the android, and when I'm running react-native run-ios showing error that the font is not found.
My react-native-config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts']
};
I have also tried
yarn react-native link and npx react-native link
Well,
finally, I linked my fonts,
I just renamed my file react-native-config.js to react-native.config.js and it worked.
I don't know if this is the right way, I just tried and it worked, for me at least.
Here is the complete walkthrough for linking custom fonts.
my react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
and logs:
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project
but My mistake was:
Wrong way:
fontFamily: BYekan
Right way:
fontFamily: 'BYekan'
just put font name in ''
For React-native > 0.69, npx react-native link is no longer working
Use npx react-native-asset instead
Just to complement keyserfaty's answer, here is my react-native.config.js working using react-native link:
module.exports = {
dependencies: {
"react-native-gesture-handler": { platforms: { android: null, ios: null } }
},
assets: ['./src/assets/fonts']
};
Create a file in your react native project called react-native.config.js:
In it, paste
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/'],
};
assets: ['./src/assets/fonts/'], should be the path to wherever you stored your custom fonts in your project folder.
When you run the link command, it should work then.
Using RN 0.60.8 with a react-native-config.js file should allow you to link your fonts using react-native link.
My logs:
react-native link
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project
Since you installed React Native using npx I'm guessing you maybe don't have react-native installed globally? Is running react-native link giving you any errors?
None of the above solutions work for me. The issue with what I was having is my Xcode project already had Resources group with a backed folder in it. The way react-native link is working as my understanding is it's creating a group without a folder and add it to your project and link to all your fonts from there. This approach doesn't work when you already have a Resources folder. The solution I could come up with was just renaming the Resources folder to something else and run react-native link again.
If you don't have such a setup, create react-native.config.js file and running react-native link works fine.
react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts/']
};
change assets: ['./src/assets/fonts/'] to assets: ['/src/assets/fonts/']
or use
assets: ['./src/assets/fonts/'] but nameProject/assets
some times you have writed react-native.config.js correctlly
in such cases ; if you do this tasks
it helps you
1- delete react-native.config.js file
2- create this file with same code again
3- write react-native link in console
then you can see resources folder in Xcode
and you can see your fonts in info.plist and copy bundle resources
The "adding the font" should be done in your package.json. Add:
"rnpm": {
"assets": ["./assets/fonts/"]
}
Then run
react-native link
Source
EDIT: The above only works for react-native below 0.60.0
I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications
I need to make a react native app which will be used to produce other apps using the same code (changing some logos, colors, a few features depending on the case etc)
On Android with Java I was using flavors, but with Expo to generate builds variant on Android & iOS and not having to duplicate code/projects, i'm not sure how I can do this properly. Any best practice?
Expo now supports variants, but only if you use Expo Application Services (EAS).
There is a bit too much code to include it all, but the key bit is doing this is app.config.js:
const IS_DEV = process.env.APP_VARIANT === "development";
export default {
// You can also switch out the app icon and other properties to further
// differentiate the app on your device.
name: IS_DEV ? "MyApp (Dev)" : "MyApp",
slug: "my-app",
ios: {
bundleIdentifier: IS_DEV ? "com.myapp.dev" : "com.myapp",
},
android: {
package: IS_DEV ? "com.myapp.dev" : "com.myapp",
},
};
For more info: https://docs.expo.dev/build-reference/variants/