<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
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
I am creating UI for my new project and the screen length is large so I put the Scrollview so that User can scroll the screen and on the same screen I am using SIX flautists to render some data but When I run my application on IOS simulator then I am getting warning on almost every screen where I am using Flatlist under Scrollview please check the attached screen shot
The warning appears because ScrollView and FlatList share the same logic, if FlatList run inside ScrollView, it's duplicated
By the way SafeAreaView doesn't work for me, the only way to solve is.you can use SafeArea like this
<SafeAreaView style={{flex: 1}}>
<FlatList
data={data}
ListHeaderComponent={ContentThatGoesAboveTheFlatList}
ListFooterComponent={ContentThatGoesBelowTheFlatList} />
</SafeAreaView>
This is happening because it isn't recommended to work with a FlatList within a ScrollView.
A workaround tho would be to add a property to your FlatList like so :
<FlatList
data={yourdata}
nestedScrollEnabled ----> Add this
/>
Hope it solves your problem
i get this case too and the best way is to disable that warning because sometimes we need to use flatlist inside scrollview
import React, { useEffect } from 'react';
import { LogBox } from 'react-native';
useEffect(() => {
LogBox.ignoreLogs(['VirtualizedLists should never be nested']);
}, [])
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,
}}
/>