I am using react native version 0.67.3
I install vector icon and i add andriod/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
but icon not showing
Use the latest version
"react-native-vector-icons": "^9.1.0",
You can add latest version of it by below command:
npm install react-native-vector-icons#latest
For Android,
write below line in your android -> app -> build.gradle
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'FontAwesome.ttf', 'MaterialCommunityIcons.ttf', 'Ionicons.ttf'] // Name of the font files you want to copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
For iOS,
cd ios & pod install
Use
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
Note: Give exact icon name from https://oblador.github.io/react-native-vector-icons/
I have same problem but when I use
<Text><Ionicons/><Text>
Icons will show in navigation bar.
Related
Can somebody send a screenshot of the dependencies needed to run Drawer component in react native
Ps. it will help better if its a screenshot of packages.json
Thanks!
Ill go step by step:
1.yarn add #react-navigation/native
2.yarn add react-native-screens react-native-safe-area-context
If you're on a Mac and developing for iOS, you need to install the
pods (via Cocoapods) to complete the linking.
npx pod-install ios react-native-screens package requires one
additional configuration step to properly work on Android devices.
Edit MainActivity.java file which is located in
android/app/src/main/java/<your package name>/MainActivity.java.
Add the following code to the body of MainActivity class:
#Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null); } and make sure to add an import statement at
the top of this file:
import android.os.Bundle; This change is required to avoid crashes
related to View state being not persisted consistently across Activity
restarts.
Then
3.yarn add #react-navigation/drawer
4.yarn add react-native-gesture-handler react-native-reanimated
Final step:
To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:
import 'react-native-gesture-handler';
I use some fontawesome icons in a quasar project.
I import them as specified in the quasar doc:
Webfont icons are available through #quasar/extras package. You don’t need to import it in your app, just configure /quasar.config.js as indicated above.
Adding more than one set:
extras: [
'material-icons',
'mdi-v6',
'ionicons-v4', // last webfont was available in v4.6.3
'eva-icons',
'fontawesome-v6',
'themify',
'line-awesome',
'bootstrap-icons'
]
As a result I do have a set of icons from the v6, unfortunately some are missing.
For instance:
is not available:
Why is this so and how could I deal with this?
This is a Pro icon.
To use it, you'll need a subscription to a Pro-level plan or a perpetual Pro license.
I've tried different icons, however it seems all of them just show an X instead of the actual icon. There aren't any error messages, here is the code I've used:
import Icon from 'react-native-vector-icons/AntDesign';
<Icon name="heart" size={30} color="red" />
In this case, it should show a heart, but it just appears with an X with a box around it.
This post seems to have a solution, but I do not understand what they did to fix it.
react native vector icons showing X instead of icon
Anyone know how to solve this?
Found that you are using an Android emulator. In the past, I had the same issue many told me to link the project to solve the issue but RN v0.60 and above supports auto-linking, so it is not advised to use manual linking.
npx react-native link -- Avoid this for projects above RN v0.60
Automatic way to add fonts
Add this piece of code in android\app\build.gradle. I only want MaterialCommunityIcons.ttf if you want other font add them here it will be added automatically.
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf'] // Add fonts needed
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
This is a manual way (If automatic didn't work)
Step 1
Move the .ttf file from the node_modules\react-native-vector-icons\Fonts that you want to android\app\src\main\assets\fonts after that cd android and run ./gradlew clean or gradlew clean
Step 2
Add this line in android\app\build.gradle
project.ext.vectoricons = [
iconFontNames: ['MaterialCommunityIcons.ttf', 'AnotherFont.ttf'] //name of all the fonts added from node_modules in step 1.
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
After that the icons will be visible. Try resetting the cache if it did not work yarn react-native start --reset-cache & yarn react-native run-android
https://github.com/oblador/react-native-vector-icons/issues/1117#issuecomment-589958315
Troubleshooting step from the library if still the above did not work you can try this.
https://github.com/oblador/react-native-vector-icons#the-icons-show-up-as-a-crossed-out-box-on-android
You forgot to load your icon...
put this after your import:
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont();
Cheers!
Here is a complete solution for this. copy the fonts folder from
node_modules\react-native-vector-icons\Fonts
to
android\app\src\main\assets\fonts
you can create the folder there it does not exist by default. then create a file in the root of your project
react-native.config.js
and paste this code.
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
After upgrading React Native to 0.62.2, and installing react-native-material-dropdown` library, project is giving this error:
I solved this by,
Commenting itemTextStyle: Text.propTypes.style in
..\node_modules\react-native-material-dropdown\src\components\dropdown
file.
And remove Animated in Animated.Text.propTypes.style in
affix/index
helper/index
label/index
of react-native-material-textfield.
And added import { Animated, Text} from 'react-native'; in each of
above three files.
Here is another solution I've found.
Remove installed package react-native-material-dropdown
yarn remove react-native-material-dropdown
Install new packages react-native-material-dropdown-v2 and react-native-paper
yarn add react-native-material-dropdown-v2 react-native-paper
Swap react-native-material-dropdown to react-native-material-dropdown-v2 in your code
e.g.
import { Dropdown } from 'react-native-material-dropdown' to import { Dropdown } from 'react-native-material-dropdown-v2'
I found the same problem while using #react-navigation/drawer
I've solved it by these steps.
Open node_modules and then search for react-native-material-textfield open the file and go to src folder
Under src you will see affix, helper, label folder - under each folder, there is an index.js
open the index.js of the mentioned folders one by one (all 3 folders) and search for the text style: Animated.Text.propTypes.style, and replace it by style: Text.propTypes
And import text form react-native like this import { Animated , Text} from 'react-native';
And now reload the terminal, and you are good to go
There is an issue open on github about this problem. As mentioned in the comment, it is possible to use this option to edit node modules, or create a patch so that it is not necessary to edit the files every time you add a new library or run an npm install.
Instruction:
Create patches directory in your project's root
Copy patch to
patches/react-native-material-textfield+0.16.1.patch
yarn add patch-package postinstall-postinstall or npm i patch-package
yarn patch-package or npx patch-package
Fix is already applied. Add the following to package.json to not repeat the same next time:
"scripts": {
+ "postinstall": "patch-package"
}
https://github.com/n4kz/react-native-material-textfield/issues/249#issuecomment-625791243
I faced the same issue while using react-native-material-dropdown.
Fix:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
Replace style: Animated.Text.propTypes.style with style: Text.propType
import {Text} in each of these 3 files import { Animated ,Text} from 'react-native'
This should fix the issue
react-native version: 0.64.0
Just update the library they updated their library with fixes here is the link
https://www.npmjs.com/package/react-native-material-dropdown-v2-fixed
For me it was the package "react-native-easy-toast" at version 2.0.0. The weird thing was, that I couldn't find "propTypes" or "Animated" anywhere in my Code or in my libs (node-modules). I'd expect to find it somewhere in the react-native-easy-toast folder in node_modules...
Anyway, after commenting all my toasts the app started again.
I now also found a patch for this: "https://github.com/crazycodeboy/react-native-easy-toast/issues/118" and with this and from other here mentioned patch-package it worked with the toasts and the patch gets automatically applied after npm install:)
I am using react-native-material-textfield package, and I also faced this error so I added this piece of code in my JS file right before importing:
import { Animated, Text } from 'react-native';
Animated.Text.propTypes = Animated.Text.propTypes || Text.propTypes;
import { TextField } from 'react-native-material-textfield';
I have faced the same issue while using react-native-material-dropdown.
Fixed using this:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
I have resolved my issue by using this lib
react-native-material-dropdown-no-proptypes
This happened after I've added custom fonts on iOS to assets, added
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
to my package.json and ran react-native link.
After that I couldn't build android.
Turns out we I ran react-native link it created copies of some libraries in 3 files:
android/app/build.gradle:
I had implementation project(':react-native-extra-dimensions-android') and it added compile project(':react-native-extra-dimensions-android')
android/app/src/main/java/com/pivot3/MainApplication.ja:
it added second import
import ca.jaysoo.extradimensions.ExtraDimensionsPackage;
and second package to asList
new ExtraDimensionsPackage(),
android/settings.gradle:
it added extra
include ':react-native-extra-dimensions-android'
project(':react-native-extra-dimensions-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-extra-dimensions-android/android')
Probably my react-native link script is broken (I didn't change) but in case you have the same error, check these 3 files for duplicate copies.
Removing extra copies fixes the issue.