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.
Related
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
<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 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"/>
I'm currently developing an app using react native and I'm using react-navigation to navigate between screens, using buttons in my header (back arrow for example).
It's working well, however even if my icon is the right size it seems like the click area is really narrow and I struggle with it.
Do you know how I could define a click zone on my button for it to be clicked easier? I've tried the hitslop prop but it's not working for me (maybe it's been deprecated?).
Here is my button:
var backArrow =
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Ionicons name="ios-arrow-back" size={22} color="#ff8c00" />
</TouchableOpacity>
I'm using Expo and testing on an iPhone 6s Plus.
Wrapping the Ionicons in a TouchableOpacity will only provide a clickable area as large as the Ionicons component. You can increase the size of the clickable area with the following structure:
<TouchableOpacity>
<View>
<Ionicons />
</View>
</TouchableOpacity>
by styling the View to be as large as you require it.
I am using React Native Router and want to have a back button on the component at the root of the navigation and override its action.
Is it possible to enable the back button without writing my own with renderBackButton? I'd rather use the one provided with the library to ensure consistency between other screens and avoid writing a new component.
I tried with hideBackImage={false}, but it doesn't seem to work.
You can't. Since you're at the root of your application, you only have one scene in your stack.
But why do you want a back button on your first application screen? It makes no sense...
However, it's pretty easy to render a back button with a custom action. For example :
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
...
/>
With
renderCustomButton() {
return () => (
<TouchableOpacity>
<Icon name="back" size={30} color="#900" />
</TouchableOpacity>
);
}
Then you just add your action or whatever you want to do with the onLeft prop
<Scene key='root'
...
renderLeftButton={this.renderCustomButton()}
onLeft={**YOUR ACTION**}
...
/>
You can also add it on the TouchableOpacity onPress prop.
I usually use react-native-vector-icons for my custom navbar icons https://github.com/oblador/react-native-vector-icons