On ReactJS I can show the icon by using it's name taken from this website: https://fontawesome.com/icons?d=gallery&q=eye&m=free
As you can see, if you search by eye, you'll have a lot of options there, and if you click on the icon it will show you what name you should use to call that icon. For example: fas fa-eye will render a solid eye and far fa-eye will render a regular eye.
The problem is that on react-native I can't call the icon name like this, it won't accept, so I have to just use the word eye, but this limits me by a random eye that's not from my choice. So I wanna know if there's any way that I can pick the icon that I want just like in ReactJS? This is how I'm currently using the fontawesome icons on react-native:
import FontAwesome from 'react-native-vector-icons/FontAwesome5';
...
return <FontAwesome name={'eye} style={props.customStyle} />
The showed icon appears on the website's list, but as I said, there's more than one icon with the same name and I want be able to choose bettween then.
For those that are struggling into this problem, just add the solid or light tag into your component and it will change the icon, example:
return <FontAwesome name={'eye'} style={props.customStyle} solid />
you can try to use IconDefinition and choose icons by their names.
import { FontAwesomeIcon } from "#fortawesome/react-native-fontawesome";
import { faBookOpen } from "#fortawesome/free-solid-svg-icons";
<FontAwesomeIcon
icon={faBookOpen}
size={28}
/>
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.
I am working on a react-native app using react navigation.
I want to add a partial modal that covers 30% of screen when pressing on one of the tabs in the bottom-tab, similar to the "+" tab in the YouTube app:
Youtube modal
I've tried to use react-native Modal component, but
I have problems with activating it from bottom tab
it covers whole screen
Any suggestions?
Thanks..
To answer your question 100% correct I'd need to know more details about your project but, I can try to explain how can be your logic to do this withou any libs.
You can create another component called "Start" where you're gonna put your Modal with absolute position above your navigator.
You can create a Modal that will be above your navigator:
export const Start(){
return(
<View style={{flex:1}}>
<Modal>
<View/>
</Modal>
<NavigatorComponent/>
</View>
)
}
This is going to work because when you put a component with absolute position above the other, this component stay in front of the below component. In your case, will stay in front of everything including the TabBar.
To the modal has just 30% of the height you just need to put in its styles the attribute height: '30%'.
In the initial component of your App (usually the index.js file), you just return the new Start component.
I hope you like my answer. Please, if you have more questions you can ask. Waiting for your feedback :).
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 create in form in react native which has material input text.
same like shown here https://material.angular.io/components/input/overview
Here is my code
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, TextInput } from "react-
native";
export default class App extends Component<Props> {
render() {
return <TextInput style={styles.abcd} placeholder="Enter name" />;
}
}
const styles = StyleSheet.create({
abcd: {
borderBottomWidth: 0.25,
marginVertical: 2,
paddingHorizontal: 10
}
});
Here, I have used a placeholder, but if you see the form in the given link, then it's not placeholder. Also, the text is moving in an upward direction, when we are clicking on the field. The same thing I want to achieve here.
I don't want to use any libraries like textField or any other library.
The placeholder prop on TextInput components has the place-holding text disappear upon the start of input. To achieve what you want to do, you can overlay a Text component over your TextInput component and map its style to a state variable. Upon focus, change the Text component's styling accordingly.
Buddy,
There are two things
1. React-Native material input box is only available in Android by default.
2. On iOS, (iPhone or iPad) you will see normal InputBox
To see the material input box on iOS devices, you have to do lots of coding. The best solution is to integrate third-party libraries like react-native-paper
Please refer a working example over here with react-native-paper library
https://github.com/callstack/react-native-paper/blob/master/example/src/TextInputExample.js