I am trying to integrate ionicons while it shows '?' only.
Here is the use case:
import Ionicons from '#expo/vector-icons/Ionicons';
...
<Ionicons size={20} name="star-outline" style={styles.icon} />
What is wrong? How can I fix this?
There is no star-outline icon in Ionicons icon set. You should use ios-star-outline or md-star-outline or other icon sets.
star-outlined Entypo
ios-star-outline Ionicons
md-star-outline Ionicons
star-outline MaterialCommunityIcons
To find out more icons please visit vector-icons directory
Update
Try with below import statement
import { Ionicons } from '#expo/vector-icons';
For Ionic 4th version, you can just download the .SVG icon from https://ionicons.com/ so it could be any outline or filled or shape and after downloading (example : home-outline.SVG) move it to Your_Project\node_modules\ionicons\dist\ionicons\svg directory... and then you are Ready To Use it ... i tried and it displays the icons !
Related
I have the following code:
import React, { useEffect, useState } from 'react';
import { View } from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
import styles from './styles';
export default function LiveCalls( { navigation }) {
return (
<View>
<FontAwesome name="search" size={204} color="black" />
</View>
);
}
My app runs okay. I'm not getting an errors or warnings. But – no icons are showing. Not even a mysterious "X", where the icon should be. Just nothing. Empty space. Nada. Zilch.
I did check the #expo folder in my node_modules directory to make sure that it's in there... and it is.
I also double checked my icon name, to make sure there was an actual icon in the icon set that I was using.
Additionally, I've tried changing sizes (thinking it might just be super tiny), colors (thinking it might be defaulting to transparent or something), and nothing seems to work.
Any idea what the problem is?
I want to add icons to my react native snack expo app.
I tried using this:
import MaterialIcons from '#expo/vector-icons'
And when I added the component <MaterialIcons name="delete" /> in my main functional component, it throws me an error.
I am using the online code editor called snack expo for building my app. Can someone help me how to use vector icons in the snack expo?
Many thanks for considering my request.
Import MaterialIcons like this:
import { MaterialIcons } from '#expo/vector-icons';
// then use it
<MaterialIcons name="delete" />
For more: MaterialIcons
So this is basically the code I have
import { Ionicons } from '#expo/vector-icons';
class DrawerItem extends React.Component {
render() {
return (
<Ionicons name="speedometer" size={14} color="green" />
)
}
}
I am trying to use an icon called speedometer, as found in the Ionicons documentation.
However, in its place, a question mark ? appears and I get the following error:
Warning: Failed prop type: Invalid prop `name` of value `speedometer` supplied to `Icon`, expected one of ["ios-add","ios-add-circle","ios-add-circle-outline","ios-airplane","ios-alarm","ios-albums","ios-alert","ios-american-football","ios-analytics","ios-aperture","ios-apps","ios-appstore","ios-archive","ios-arrow-back","ios-arrow-down","ios-arrow-dropdown","ios-arrow-dropdown-circle","ios-arrow-dropleft","ios-arrow-dropleft-circle","ios-arrow-dropright","ios-arrow-dropright-circle"...
The error shows me the names I can use, but makes no sense because the Ionicons documentation mentions that there is an icon called speedometer.
Another thing that I found is that that specific icon does not appear in the Expo Vector Icons documentation.
However, I would like to add it. Any way to include ALL icons from the Ionicons library?
You have to import icons this way:
import { MaterialCommunityIcons } from '#expo/vector-icons';
<MaterialCommunityIcons name="speedometer" size={24} color="black" />
As you stated Ionicons does not contain the speedometer icon. Instead use ios-speedometer.
If you really want that specific icon, I'd recommend downloading the SVG and converting it to a standalone component using e.g. react-svgr (or any other svg jsx tool)
Dont forget to install react-native-svg :)
You can now import the icon using a normal import.
E.g. import SpeedometerIcon from './icons/Speedometer.js'
I'd like to include font awesome icons in my app.
I'm using expo to buil a native app.
The documentation states I don't need to install font awesome, but I do need to import as well as get the syntax right.
Any help would be greatly appreciated.
import { FontAwesome } from '#expo/vector-icons';
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'fa-newspaper-o' : 'md-link'}
/>
I'm doing something wrong as the icon is not showing up.
You should use it like this
import { FontAwesome } from '#expo/vector-icons';
...
<FontAwesome name={'newspaper-o'} />
It needs to be wrapped in its own named component.
You should also make sure that you use the correct name as per the directory https://expo.github.io/vector-icons/
fa-newspaper-o isn't the correct name it should be newspaper-o
Also md-link is an Ionicons icon, using that in a FontAwesome component will cause a warning and it won't work.
In my case I was trying to use Font Awesome 5 Icons with just font awesome, I had to use
import { FontAwesome5 } from '#expo/vector-icons';
<FontAwesome5 name={iconName} />
I'm bizarrely getting an error that a local file import can't be resolved by React Native.
Unable to resolve module `./components/MyComponent" from ".//App.js`: could not resolve `/Users/myusername/Desktop/mylibrary/components/MyComponent' as a file nor as a folder","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}"
mylibrary/App.js:
import React from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
AsyncStorage,
} from 'react-native';
import MyComponent from './components/MyComponent';
mylibrary/components/MyComponent.jsx:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class MyComponent extends React.Component {
render() {
<View>
{this.props.children}
</View>
}
}
I tried renaming the file to be lowercase (mycomponent.jsx), and it didn't make a difference. I also tried restarting my simulator and resetting the cache, and it also didn't help.
The import statement by default try to import .js files, try renaming MyComponent.jsx to MyComponent.js.
Quoting the MDN:
The module to import from. This is often a relative or absolute path name to the .js file containing the module, excluding the .js extension. Certain bundlers may permit or require the use of the extension; check your environment. Only single quotes and double quotes Strings are allowed.
The component is wrong. You are not returning anything in the render method. Try this:
render() {
return(
<View>
{this.props.children}
</View>
)
}