I need to show outlined icons in my React Native App. I'm usign react-native-elements with FontAwesome as a font.
<Icon
name="star-outline"
type='font-awesome'
color="#FFF"
/>
But it shows a (?) instead of icon. If I try with name="star" it shows the star icon filled but I need it outlined style.
I would appreciate any help you can give me.. Thanks
You are declaring value of attribute type wrongly Change this:
<Icon
name="star-outline"
type='font-awesome'
color="#FFF"
/>
to
<Icon
name="star-outline"
type='FontAwesome'
color="#FFF"
/>
Hope this helps!
At the begging check if the Icon you are using is solid or regular in FontAwesome, then you can also pass the solid, light and brands as props to the Icon tag you are using , you can find more detail on what i am talking about on,
https://github.com/oblador/react-native-vector-icons/blob/master/FONTAWESOME5.md
and also you can have both outlined and normal icons and use them without any 3rd party provider
i hope it helps
Make sure you're actually importing and using FontAwesome from react-native-vector-icons.
The icon you're looking for is actually in the MaterialIcons component, not the FontAwesome component.
There is an icon called start-o in FontAwesome, which is the exact same icon as far as I can tell.
Clarification
The FontAwesome component actually needs to be imported into your Icon component file:
import FontAwesome from 'react-native-vector-icons/FontAwesome';
You then need to make sure you've added the prop type within the <Icon /> definition in order to use it.
Unfortunately, there is no naming convention in the react-native-vector-icons library, so you can't simply type -outline after the icon name and expect it to find the matching icon.
However, the icon you're looking for may still be available, just under a different name or a different import. I agree, it's incredibly annoying, but at least someone took the time to make Material Icons relatively compatible with React Native. You can see and search for all the icons available in this library here:
https://oblador.github.io/react-native-vector-icons/
Related
I'm trying to find out the type definitions for the icon name of MaterialCommunityIcons, since i am intending to use it for props.
This is what I have been looking for.
React.ComponentProps<typeof MaterialCommunityIcons>['name']
Check out this site.
provides icon name and preview.
https://oblador.github.io/react-native-vector-icons/
I'm building a react native application and found out the react-native-multiple-select library which i emplemented following the documentation https://www.npmjs.com/package/react-native-multiple-select . The view is being displayed but the selected items are not showing up, only the counter of selected items works. I think it's because I don't have the control over how its function getSelectedItemsExt() works and from my researchs on internet like React-native-multiple-select: Cannot read the property 'getSelectedItemsExt' of undefined I only found that I should be doing
<View>
{ this.multiselect
?
this.multiselect.getSelectedItemsExt()
:
null}
</View>
.
Though it helped get rid of the red screen, it doesn't display the items.
So can you please tell me how I can manage
this.multiselect.getSelectedItemsExt()
and get my items displayed.
Any help is much appreciated. Thanks in advance.
I can guess throughout the question that you are passing the hideTags props to the MultiSelect component i.e you are having inside the component <MultiSelect hideTags>. This hideTags was your problem because It does what it's name sounds, i.e it doesn't display the values you set in your FlatList or whatever component. If you want the values to be displayed then remove hideTags from inside the component and you should have your items displayed. Well you want also to customize the output of this library, it's colors and InputField style then head up to the root of your react native application, then go to node-module -> react-native-multiple-select -> Library there you will find the core file that you can customize at your leisure.
I'm a brand new junior dev working on a react-native app for the first time. I have been searching for quite a while for a way to add a link to the text of a react-native checkbox's value text. If anyone has a link to documentation that might explain what I want to do, I would be super appreciative since I haven't found anything helpful yet. I saw that you can not add html elements into native after I tried a number of variations of anchors. I've tried adding Link to variations and attempted to add an onPress function to the label. I'm grasping at straws here... is this even possible to do?
To be clear, I want a user to be able to press the words "Terms of Service" and have it link to the page that has the terms
{this.props.isUser &&
<CheckBox
containerStyle={styles.checkbox}
onChange={(event, checked) => this.updateAttr('terms', checked)}
value={this.props.program.terms}
label="I have read and understand the Terms of Service"
labelLines={2}
/>
}
Instead of adding the "I accept...." as a label to checkbox, put the Check box without any label and the text 'I have read' as separate Text elements inside a view element and align them accordingly. Then inside the view, put the terms and conditions part inside a touchable and use React Native Linking to link the touchable to open a URL when touched.
https://facebook.github.io/react-native/docs/linking.html
React-Native Open Url in default web browser
Im trying to change the back button for the NavigationHeader.BackButton but I don't see any way that is possible.
The header is rendered using the following...
_renderHeader(props,backAction){
return (
<NavigationHeader
{...props}
renderLeftComponent={props => this._renderLeftComponent(props,backAction)}
/>
)
}
_renderLeftComponent(props,backAction){
return (
<NavigationHeader.BackButton
onPress={backAction}
onNavigate={backAction}
/>
);
}
I have tried setting tintColor and color style but it doesn't work. I looked at the source code, but I don't see any way this can be done. Is there a way to either set the tint/color or to provide my own image?
I am using react-native-vector-icons which allows you to choose from several different collections, including Google's Material icons. The library provides you with an Icon component that you can integrate with several existing components, including TabBarIOS, NavigatorIOS, Navigator.NavigationBar, ToolbarAndroid, etc.
In addition it provides Icon.Button a convenient way of creating a button with a left icon, and of course you can simply use the Icon inline like this:
<Icon name='arrow-back' size={24} color={#900}/>
They have a pretty good documentation on their Github repo, have a look.
Blow screenshot is from react-native UIExplorer example. I want to animate list rows adding/removing when data source changed - for example, when entering a keyword in the search box.
Thanks a lot.
Try out LayoutAnimation:
LayoutAnimation.easeInEaseOut();
this.setState({...});
There are good implementations of react-native refresh components which have animations as a part of it.
One of them is- react-native-refresher
I have used this in my projects. It's a great library.
Installation:
npm install react-native-refresher --save
Usage(check github link for more detailed code):
<RefresherListView
dataSource={this.state.dataSource}
onRefresh={this.onRefresh.bind(this)}
indicator={<LoadingBarIndicator />}
renderRow={(rowData) => <View style={{padding:10,borderBottomColor: '#CCCCCC', backgroundColor: 'white',borderBottomWidth: 1}}><Text>{rowData}</Text></View>}
/>
Also for more details you can have a look at Animations docs by React Native.