I added react-native-elemets and react-native-vector-icons. I am looking for the icons name in the official website and by selecting only free icons, and importing icons as following
import {Icon } from 'react-native-elements';
<Icon
name='comment'
type='font-awesome'
size={20}
color={'grey'}
style={styles.rightOption}
/>
<Icon
name='comment-dots'
type='font-awesome'
size={20}
color={'grey'}
style={styles.rightOption}
/>
Some of the Icons are being shown correctly line the comment icon, but some not like the comment-dot. Also circle-info is for example not working, an ? char is shown instead of the icon.
Are you using expo to deploy your app?
If you are using some types of icons are not accepted.
I will give you a example of icons if you are using Expo.
import { Icon } from 'react-native-elements';
...
<Icon size={13} name='chevron-circle-right' type='font-awesome' color='#E4AC19' />
I will let here the website for icons https://oblador.github.io/react-native-vector-icons/ and this is working only to font awesome icons, you should only use the icons which title on red topbar is FontAwesome
Related
<Icon type="FontAwesome5" name="thumbs-up"/>
I want to make the icon to be smaller. what should I do with that code?
I used React Native
Working example below in React Native.
(Cannot give you tailored suggestion with the limited information given.)
import { FontAwesomeIcon } from '#fortawesome/react-native-fontawesome';
import { faChevronLeft } from '#fortawesome/pro-light-svg-icons';
...
<FontAwesomeIcon icon={faChevronLeft} size={18} color={'white'} />
Wrap the icon component in a View component and give width and height to the View.
If you are using Icon component from react-native-elements then there is a prop called size.
<Icon type="FontAwesome5" name="thumbs-up" size={10}/>
I have to answer my question, cause I found it
<Icon type="FontAwesome5" name="thumbs-up" **style={{fontSize: 20}}**/>
so my native base version is v2.15, so all I need was only to add fontSize
so thank you guys for helping me
I am making my first React Native app, and I would like to add some icons in my buttons, so I installed React Native Vector Icons, and use it in my code, like this: <IconButton icon='cart-plus' color='blue' />.
The problem is that I can see in React Native Vector Icons directory that there are many icons with the same name:
I couldn't find a way to specify which is the one I want to display.
You will have to import the correct icon component like below
import FontAwesome from 'react-native-vector-icons/FontAwesome';
const myIcon = <FontAwesome name="cat-plus" size={30} color="#900" />;
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
const myIcon = <FontAwesome5 name="cat-plus" size={30} color="#900" />;
I am using the react-native-elements library and I'm trying to show the Entypo right arrow icon in one of my components, but the name 'arrow-right' isn't working. Instead, I see a question mark.
<Icon name="arrow-right" size={20} color="black" />
I got the icon name from here: https://oblador.github.io/react-native-vector-icons/.
Importing Icon from react-native-elements is actually the correct way to do it as you get access to the additional props react-native-elements provides (Like the raised prop for example). The problem was that you needed to specify a type. The type prop determines which icon set will be used.
import { Icon } from 'react-native-elements'
<Icon name="arrow-right" size={20} color="black" type="entypo" />
All available icon sets and properties are listed here: https://react-native-elements.github.io/react-native-elements/docs/icon.
I'm using react-native-paper and I want to get an Icon component but without any link with Button Component. I went through the doc and I didn't found an Icon Component. I want something similar than react-native-elements one
import { Icon } from 'react-native-elements'
<Icon
name='g-translate'
color='#00aced' />
So please help me to achieve this.
you can use "react-native-vector-icons" library because the icon in react-native-paper is from react-native-vector-icons.
here is code:
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;
You can use Avtar.Icon. By default, it has some margin around the icon. You can create your own component by modifying the Avtar.Icon. Here is an example:
const iconSize = 34
const customAvtardimension = 0.6 * iconSize
<Avatar.Icon
size={iconSize}
icon="bell-ring-outline"
color={Colors.redA700}
style={{
backgroundColor: Colors.transparent,
width: customAvtardimension,
height: customAvtardimension,
}}
/>
I am working on a React Native application. I am using react native vector icons. I am unable to show edit icon, here is my code
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon style={{marginTop : '1.5%'}} name="Edit"/>
This shows me question mark instead of icon.
But if i do
import Icon from 'react-native-vector-icons/FontAwesome';
<Icon style={{marginTop : '1.5%'}} name="area-chart"/>
I get the "area chart" icon. Why "area chart" icon is working and not "edit" icon.
I think name should be in small case letter like,
<Icon style={{marginTop : '1.5%'}} name="edit"/>
For more info refer this & this.
Try using the type="font-awesome"
<Icon style={{marginTop : '1.5%'}} type="font-awesome" color: "pickYourColor" name="edit"/>