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.
Related
https://developers.google.com/fonts/docs/material_symbols
I was following this developer guide and there is instructions for iOS and android apps but none for react native. I was wondering if there's any npm packages that can render material symbols for react. Only way i know is to download the svgs and serve from an assets folder.
You can use react-native-vector-icons to import your font and icoMoon to define the name of each icon.
See the documentation here: React Native Vector Icons - Custom Fonts
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 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
Currently my app is getting a lot of yellow banner warnings for component will mount, however I am unable to get rid of them as they are in third party libraries. Is there a way I can make them not come up as they are disruptive for development?
In my case I've been able to do it with the YellowBox module.
I'm using an Expo managed project v38 that uses React Native v0.62.
Example:
import { YellowBox } from "react-native";
YellowBox.ignoreWarnings([
"componentWillReceiveProps has been renamed, and is not recommended for use."
]);
For later versions the LogBox module must be used: https://reactnative.dev/blog/2020/07/06/version-0.63
I am trying to use SliderButton, I recently installed slider-button in my terminal,
npm install --save react-native-slider-button
and tried to import it, but somehow it did not work.
on website, I am supposed to write
var SliderButton = require("react-native-slider-button");
but my react-native is latest ver so i am guessing that I probably should not use require, how do I write code with using "import"?
You can replace require with import by placing the following at the top of your file:
import SliderButton from "react-native-slider-button"
export default class MyComponent extends Component {
...
}
You can't really just "import" this particular component. It was written using an earlier implementation of JS called CommonJS which is used in NodeJS. React Native now uses ES6 for module management. The SliderButton Component is a little problematic. First, it uses the CommonJS module syntax inside the component itself, including loading React and React Native in ways that are no longer supported. So parts of this module would have to be rewritten to work with current versions of react native. You could roll back to a previous react native version that supports CommonJS, or you could modify the Component to use the ES6-style module importation.