I need to show SVG icons inside my application, I did the entire process of installing the react-native-vector-icons library and configuring icomon. Also, I went to the icomon website and created my font files. But when I use it, the application renders an icon different from the one I should be reloaded by the file.
config icomon
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
import icoMoonConfig from '../../assets/customIcons/selection.json';
export default createIconSetFromIcoMoon(
icoMoonConfig,
);
icon that should be loaded.
icon being loaded
My code
export function ItemMenuDropdown({ item }) {
const navigation = useNavigation();
return (
<Container onPress={() => navigation.navigate(item.navigation)}>
<Content>
<CustomIcon name="pencil" size={normalize(18)} color="#F68B1F" />
<Text>{item.item}</Text>
</Content>
</Container>
)
I've looked for several solutions here on the site, but I haven't found one that works. Can someone help me?
I think the problem is in your selection.json file. It's either out of date or you're having some kind of cache problem. Maybe you want to try the same operation using this module.
react-icomoon
Related
I am trying to use the kayaking icon that is part of the MaterialCommunityIcons, but that icon seems to not exist or something.
However, I can get other icons to work. Looking at this site react-native-vector-icons directory, I see that kayaking is in fact an icon. It also says so here at this link: Github icon directory.
So why can't I get the icon to work?
This is how I have tried:
import Icon from "react-native-vector-icons/MaterialCommunityIcons";
// DOES NOT WORK
<Icon name="kayaking" />
// BUT THE BELOW DOES WORK
<Icon name="access-point" />
I also tried this:
import { MaterialCommunityIcons } from "#expo/vector-icons";
// DOES NOT WORK
<MaterialCommunityIcons name="kayaking"/>
// BUT THE BELOW DOES WORK
<MaterialCommunityIcons name="access-point"/>
Can someone please tell me what is going on? This is so simple, yet it seems like the kayaking icon no longer exists...
It's simply the document not been updated.
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 want to embed javascript code in a ReactNative Component without creating an entirely new component (a plugin I'm using doesn't allow the component to be used outside of it).
Something like this:
Home.js
render() {
<View>
embed('otherFile.js')
</View>
}
otherFile.js
<Text>Hello</Text>
Note: I know components can do this, but they won't work for this situation.
I need to embed the .js file as if it was manually put into the Home.js file
Is something like that possible in ReactNative?
You can use otherFile.js in home.js like this.
import otherFile from '/path upto otherFile/';
render() {
<View>
<otherFile/>
</View>
}
I want to turn this section of code into a reusable component so I don't have to write the same thing out 5 times.
<TouchableOpacity onPress={console.log('pressed')}>
<Image
source={require('../img/button_australia.png')}
/>
</TouchableOpacity>
The new component I made to mirror this is as follows:
import React from 'react';
import { Image, TouchableOpacity } from 'react-native';
const ImgButton = ({ onPress, img }) => {
return (
<TouchableOpacity onPress={onPress}>
<Image
source={require(img)}
/>
</TouchableOpacity>
);
};
export { ImgButton };
After importing this component ImgButton I call it with this block of code:
<ImgButton
onPress={console.log("pressed")}
img={'../img/button_australia.png'}
/>
I get the error: "Requiring unknown module '../img/button_australia.png'"
I assume I've gone wrong when passing the string down as a prop but from the examples I've looked I don't see what's wrong with what I've done. Thanks :)
As discussed in this react-native issue, it's not possible to require assets or javascript modules with dynamically generated names, e.g. variables.
This is because the React Native packager uses require (and import) statements to generate the module and asset bundles at compile-time, so the value of the variable is not known.
The simplest way is to just pass the image source to the component directly:
<ImgButton
onPress={console.log("pressed")}
img={require('../img/button_australia.png')}
/>