I'm build app running in react native metro builder but not running because font family font awesome not sync can help me
problem load is : console error : "fontFamily:FontAwesome" is not a system font in reactnative
i am using the fontawesome 5.7.0
just add on your package dependencies:
"react-native-fontawesome": "^5.7.0",
re-install using yarn
yarn install
put the font files on folder
android > app > src > main > assets > fonts
files:
fontawesome-webfont.ttf
FontAwesome.otf
and you can use it on your project:
example:
import FontAwesome, { Icons } from 'react-native-fontawesome';
...
render() {
return (
<FontAwesome>{Icons.close}</FontAwesome>
);
}
Related
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
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 am new in React Native. Right now, I am studying Props and State. I wanted to try the FlatList Component in this doc https://facebook.github.io/react-native/docs/flatlist. However, I am getting this error.
You're using typed JavaScript known as Type script.
If you want to use TypeScript (I highly encourage it, then you can do so by following below tutorial):
Migrating to TypeScript:
https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native
To just get rid of the error!
state = {selected : (new Map())};
TypeScript Migration Continued...
Adding TypeScript
The next step is to add TypeScript to your project. The following commands will:
add TypeScript to your project
add React Native TypeScript Transformer to your project
initialize an empty TypeScript config file, which we'll configure next
add an empty React Native TypeScript Transformer config file, which we'll - configure next
adds typings for React and React Native
Okay, let's go ahead and run these.
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev #types/react #types/react-native
The tsconfig.json file contains all the settings for the TypeScript compiler. The defaults created by the command above are mostly fine, but open the file and uncomment the following line:
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
The rn-cli.config.js contains the settings for the React Native TypeScript Transformer. Open it and add the following:
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
Migrating to TypeScript
Rename the generated App.js and __tests_/App.js files to App.tsx. index.js needs to use the .js extension. All new files should use the .tsx extension (or .ts if the file doesn't contain any JSX).
If you tried to run the app now, you'd get an error like object prototype may only be an object or null. This is caused by a failure to import the default export from React as well as a named export on the same line. Open App.tsx and modify the import at the top of the file:
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
Some of this has to do with differences in how Babel and TypeScript interoperate with CommonJS modules. In the future, the two will stabilize on the same behaviour.
At this point, you should be able to run the React Native app.
When I load my react-native app in Expo I get the error: "Cannot find entry file index.js in any of the roots."
I am adding onto an existing React Web App, and have index.ios.js at the root level. Everything works fine locally, in simulator and through Xcode on my phone hardwired. I've converted my app with exp convert and integrated all info into exp.json.
All info for the ios app is contained in a folder called "ios".
Has anyone run into this or have any thoughts on how to get unstuck?
check you package.json and rename index.js to your entry file.
//...
},
"main": "index.js"
}
If you are using Expo, you need to go to your project folder and find the below file:
\node_modules\expo\AppEntry.js
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);
and here just replace the App to Custom_Component_Name in the second line of import.
You can find the entry file by looking in the package.json file. In package.json you will find
{
"main": "node_modules/expo/AppEntry.js"
}
AppEntry.json is the entry file by default in expo projects.
I'm new to react native and want to build a small test app in Android and iOS.
I have created an images directory alongside my index.ios.js and index.android.js files.
My code below produces a red screen error saying "unable to resolve module ./images/tree.png... Invalid directory...":
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} = React;
var TestApp = React.createClass({
render: function() {
return (
<View>
<Text>test app</Text>
<Image
style={styles.thumbnail}
source={require('./images/tree.png')} /> />
</View>
);
},
});
var styles = StyleSheet.create({
thumbnail: {
width: 100,
height: 100,
},
});
AppRegistry.registerComponent('TestApp', () => TestApp);
Where should I place my images and how should I reference them?
Your code looks correct assuming that the images directory is in the same location as the index.*.js files.
What version of React Native do you have? From the Images doc page:
Available React Native 0.14+. If you've generated your project with
0.13 or earlier, read this. The new asset system relies on build hooks for Xcode and Gradle that are included in new projects generated with
react-native init. If you generated your projects before that, you'll
have to manually add them to your projects to use the new images asset
system. See Upgrading for instructions on how to do this.
If you want to verify your react-native version, the easy way to do this is to run the following npm command from your project directory:
npm ls react-native
The current release version is 0.15.0.
Make sure you don't forget to run react-native upgrade after updating the package as this is required for adding build hooks for the new asset system to existing projects. If you previously updated your react-native version without doing this, that may explain the issue you are having.
If you happen to be using Windows for development, see my answer to this question for details on how to work around a bug with the new asset system on Windows.