I am trying to use react-native-vector-icons in my project(react-native in android), however every icon I try to use stays with(?) Instead of the icon, I followed the installation correctly, I don't know what is going on.
How I am trying to use the icon (there is no compilation error):
import Icon from 'react-native-vector-icons/Ionicons'
After adding the module (yarn add), try to execute react-native link on the command line before building the app.
read more here:
https://www.reactnative.guide/12-svg-icons-using-react-native-vector-icons/12.0-intro.html
Related
I'm using react native and I am trying to use Material-UI icons.
I have npm installed both #material-ui and #material-ui/icons.
I have included:
import AddIcon from "#material-ui/icons/Add";
To the top and I have the icon in my return as:
<AddIcon />
However I'm getting the error
Invariant Violation: View config getter callback for component 'path'
must be a function (received 'undefined'). Make sure to start
component names with a capital letter.
Removing the <AddIcon/> removes the error but then obviously the icon doesn't show.
I'm using react-native and expo. I'm not using an emulator or android studio. I'm coding this project in Visual Studio Code.
You can use a library installed by default in expo
Change Ionicons with the name of icon you want & always check docs !
https://docs.expo.io/guides/icons/
import { Ionicons } from '#expo/vector-icons';
Try this library where in you can show material icons. This library provides range of icons.
https://youtu.be/BjrlrGy_HaY
This includes installation of vector icons npm package and demonstrates the uses of vector icons library.
i didnt do anything on project for 5 months maybe. I try to run now but it gives me this error:
I dont use WebView why i am getting this error ? and also i installed react-native-webview but error is still not going
these are my dependencies which i use :
You could try to search all the project about webView(especially in node modules), find out where use this tag.
Check if that modules have update? if yes, upgrade it. Or go to that page and change like this:
import { WebView } from 'react-native';
//change to below
import { WebView } from 'react-native-webview';//because you have install the new react-native-webview
And it should work well...
--update for picture--
Maybe you use some third-party Modules from NPM which depends on webview.
You should check this and upgrade the needed Package.
Maybe do an full-text-search in your "node_modules" for it. Or provide more information what your app does and which components it use.
This is a fresh React Native app using React Native Paper. I followed the instructions at https://callstack.github.io/react-native-paper/getting-started.html and installed react-native-paper and react-native-vector-icons.
For some reason, none of the icons are showing in the app -- see below:
For example, I have a Searchbar at the top of this screen with the following code. As far as I can see, I don't even have to specify an icon there. It should automatically display a magnifying glass but no icon is showing.
<Searchbar placeholder="New to do item..." />
Any idea why and how to fix it?
Stop your application. Then go to project directory > open cmd > run npx react-native link react-native-vector-icons
cmd will show you linking is successful
Now run your app again
Just follow the installation steps as described here: https://github.com/oblador/react-native-vector-icons#android
React-native-paper uses MaterialCommunityIcons so remember to add it in the iconFontNames list in the steps above.
I started with a create-react-native app. Then, I wanted to add a dependency. So, I ran react-native link:
`react-native link` can not be used in Create React Native App projects. If you need to include a library that relies on custom native code, you might have to eject first. See https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md for more information.
So, I ran npm run eject and it successfully ejected. There are many changes to the package.json and some scripts have been added.
But, if I now run react-native link, I still get the same error!! How can I successfully run this command? How does it determine that I'm still using create-react-native?
I'm guessing there's some flag somewhere that still says it's using create-react-native, but I don't know where it is. Any help is appreciated.
react-native link
only works when you have added any new package eg:- npm i react-native-vector-icons. then you need to import package name to various class manually but if you dont want to do it you can directly run the command
react-native link react-native-vector-icons OR react-native link
this will automatically add import the package to your ios and android files.
Try these steps it will work.
I am trying to add an app icon to a react-native application and am not able to do so also could hardly find anything about this in the documentation or any other sources which I am able to implement successfully.
Got this one working by using react-native-icon Package but is there Something like a single command to get icons configured into the respective folders when they are created using react-native eject command.
The app icons are controlled from the native side of the project.
You can set them up from Xcode or Android Studio fairly easily.
Perhaps take a look at Xcode 9 - Add an App Store icon and Set icon for Android application
use android asset studio
drag and drop your icon and change filters if you like and then download it.
Unzip it and then replace your res icon folder with this one
indepth tut tutorial