I want to add icons to my react native snack expo app.
I tried using this:
import MaterialIcons from '#expo/vector-icons'
And when I added the component <MaterialIcons name="delete" /> in my main functional component, it throws me an error.
I am using the online code editor called snack expo for building my app. Can someone help me how to use vector icons in the snack expo?
Many thanks for considering my request.
Import MaterialIcons like this:
import { MaterialIcons } from '#expo/vector-icons';
// then use it
<MaterialIcons name="delete" />
For more: MaterialIcons
Related
I Am working on this to implement Dark Mode in React Native using React Navigation. but it changes only the bottom bar navigator not the screens inside that. can you help me with this
Snack Code
https://snack.expo.io/#belgin/news-app
You're responsible for styling inside your own components. You're styling background as light, setting navigation theme to dark is not gonna magically change the colors you have defined.
For changing themes to work for your components, you need to use the useTheme hook to set colors in your own components instead of hardcoding them.
import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '#react-navigation/native';
function MyScreen() {
const { colors } = useTheme();
return (
<View style={{ flex: 1, backgroundColor: colors.background }}>
{/* screen content */}
</View>
);
}
https://reactnavigation.org/docs/themes/#using-the-current-theme-in-your-own-components
Other method is that, you can also create a state which can store your current view-mode (light/dark mode). This is very simple to implement using react-redux. You can refer this video to get better understanding of react and redux.
This is far more simpler implementation of redux.
Note - dependencies such as thunk, react-redux, etc etc are not installed in this video. You can identify which dependencies you're gonna need step-by-step by following error that came in your way. Eg. if createStore gives error try to import createStore as legacy_createstore like done in this question
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'
As I know about it, This checks and gives warnings for React-Native code and its lifecycles.
I read about it from What is StrictMode in react?
How can I use it in react native ?
Here is a simple example to use StrictMode in React Native
StrictMode can be directly imported from React and can used like wrapping up View inside it.
import React, {Component, StrictMode} from 'react';
import {View} from 'react-native';
class Example extends Component {
render() {
return (
<StrictMode>
<View />
</StrictMode>
);
}
}
export default Example;
I use to set the main file of my project using AppRegistry.registerComponent(), but projects created with Expo does not support it.
import { AppRegistry } from 'react-native';
import App from './src/App';
AppRegistry.registerComponent('my App', () => App);
Then, I use src/App.js as my main file. How can I do it using Expo?
Thanks
Straight from React Native docs facebook.github.io/react-native/docs/appregistry
AppRegistry is the JS entry point to running all React Native apps. App root components should register themselves with AppRegistry.registerComponent, then the native system can load the bundle for the app and then actually run the app when it's ready by invoking AppRegistry.runApplication.
In other words, since Expo isn't a complete real app because it's running on your device Expo app, doesn't have many methods available for you from react-native. Read Expo's docs for more information.
You only need on your App.js:
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View>
<Text>Some Text</Text>
</View>
);
Check out this snack: #abranhe/stackoverflow-56694295
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} />