Menu
I have a problem of displaying the icon with my App. Whatever Icon I import, eg: From React native base, @expo/vector-icons, react-native-vector-icons/Ionicons ... etc.
It will only show (X) or ?
I tried out many method, including react-native link, using the default import icon from React-Native. It all doesn't work.
Reference:
1) https://ionicons.com/cheatsheet.html
2) https://www.npmjs.com/package/react-native-ionicons
I will attach my code and screenshot here, hope it help to solve my problem. Thank you.
import Icon from 'react-native-ionicons'
<ListItem style={styles.listitem_home} onPress={this.navigateToScreen('ExampleSendDataScreen')}>
<Thumbnail square size={80} source={require('../../assets/images/message.png')} style={{marginRight: 10}}/>
<Body>
<Text>{Strings.ST17}</Text>
<Text numberOfLines={1} note style={styles.note_home}>{Strings.ST17}</Text>
</Body>
<Right>
<Icon name="menu" style={styles.icon_home} />
</Right>
</ListItem>
Icon Styles
icon_home:{
fontSize: 20,
color: 'black'
},
The only icon show in my app currently is Navigator Back Button.
Edit 1: Installed @expo/vector-icons 9.0.0
Edit 2: Updated to Expo v32
Package.json
"dependencies": {
"@expo/vector-icons": "^9.0.0",
"@material-ui/core": "^3.9.0",
"@types/expo__vector-icons": "^6.2.3",
"antd-mobile": "^2.2.6",
"babel-plugin-import": "^1.11.0",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"firebase": "^5.8.1",
"haversine": "^1.1.0",
"moment": "^2.23.0",
"moment-timezone": "^0.5.23",
"native-base": "^2.8.1",
"prop-types": "^15.6.2",
"re-base": "^4.0.0",
"react": "16.5.0",
"react-dom": "^16.7.0",
"react-moment": "^0.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-audio": "^4.3.0",
"react-native-aws3": "0.0.8",
"react-native-button": "^2.3.0",
"react-native-elements": "^0.19.1",
"react-native-emoji-selector": "^0.1.6",
"react-native-fontawesome": "^6.0.1",
"react-native-gesture-handler": "^1.0.12",
"react-native-gifted-chat": "^0.7.2",
"react-native-gifted-messenger": "^0.1.4",
"react-native-image-picker": "^0.28.0",
"react-native-ionicons": "^4.4.6",
"react-native-keyboard-aware-scroll-view": "^0.7.4",
"react-native-linear-gradient": "^2.5.3",
"react-native-maps": "^0.22.1",
"react-native-navbar": "^2.1.0",
"react-native-render-html": "^3.10.0",
"react-native-router-flux": "^4.0.6",
"react-native-sound": "^0.10.9",
"react-native-splash-screen": "^3.1.1",
"react-native-timeago": "^0.4.0",
"react-native-vector-icons": "^6.2.0",
"react-navigation": "^3.0.7",
"react-navigation-header-buttons": "^2.1.1",
"react-simple-line-icons": "^1.0.8",
"scheduler": "^0.11.3",
"tcomb-form-native": "^0.6.20" },
App.json
"expo": {
"name": "FirstTry",
"description": "This project is really great.",
"slug": "firsttry",
"privacy": "public",
"sdkVersion": "32.0.0",
"platforms": ["ios", "android"],
"version": "2.0.0",
"orientation": "portrait",
"icon": "./assets/icon.png",
"androidStatusBarColor": "#7bcbdb",
"androidStatusBar": {
"barStyle": "light-content",
"backgroundColor": "#7bcbdb"
},
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.firsttry",
"supportsTablet": true
},
"android": {
"package": "com.firsttry",
"versionCode": 2
}
New ERROR. undefined is not an object (evaluating '_expo.default.Constant') on my ConfigApp.js
ConfigApp.js
import Expo from 'expo';
const isStandAloneApp = Expo.Constants.appOwnership == "standalone";
const ConfigApp = {
// backend url
URL: "YOUR_BACKEND_URL",
// banner admob unit id
BANNER_ID: "YOUR_BANNER_ID",
// interstitial admob unit id
INTERSTITIAL_ID: "YOUR_INTERSTITIAL_ID",
// testdevice id, DON'T CHANGE IT
TESTDEVICE_ID : isStandAloneApp?"EMULATOR" : "EMULATOR"
};
export default ConfigApp;
Edit 3: Unable to resolve "@expo/vector-icons" from "application\navigations\Logged.js"
const leftIcon = (navigation, icon) => <Ionicons
name={icon}
style={{marginLeft: 20}}
size={27}
color="white"
onPress={() => navigation.navigate('DrawerOpen')}
/>;
HomeScreen: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
headerLeft: leftIcon(navigation, "md-menu")
})
},
Edit 4: Icon still not display correctly
767
You can’t use react-native-ionicons with Expo as the installation process requires you to update native code. https://github.com/fanqfanh/react-native-ionicons
However Expo comes bundled with Ionicons which can be used in the following way:
Add the following import statement at the top of your component
import { Ionicons } from '@expo/vector-icons';
Then use them like this
<Ionicons name="md-menu" size={32} color="green" />
You should also check the correct name to use here
https://expo.github.io/vector-icons/
this is because vector-icons can use different names from the original icon package that you are using.
For more information about the different icons that are in Expo see the documentation
https://docs.expo.io/versions/latest/guides/icons/
Here is a simple snack showing it working https://snack.expo.io/@andypandy/iconicons-example It shows the differences between icons for iOS and Android, and how to switch them based on the platform.
import * as React from 'react';
import { Text, View, StyleSheet, Platform } from 'react-native';
import { Constants } from 'expo';
import { Ionicons } from '@expo/vector-icons';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Ionicons name="md-menu" size={32} color="green" />
<Ionicons name="ios-menu" size={32} color="red" />
<Ionicons name={Platform.OS === 'ios' ? "ios-menu" : 'md-menu'} size={32} color="blue" />
<Ionicons name="md-checkmark" size={32} color="green" />
<Ionicons name="ios-checkmark" size={32} color="red" />
<Ionicons name={Platform.OS === 'ios' ? "ios-checkmark" : 'md-checkmark'} size={32} color="blue" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems:'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});
package.json
I've commented which dependencies I think you can safely get rid of from your package.json. These should not have been added as they either require access to native code or are already included in Expo.
"dependencies": {
"@expo/vector-icons": "^9.0.0", // already included in expo
"@material-ui/core": "^3.9.0",
"@types/expo__vector-icons": "^6.2.3", // only required if you are using typescript, but I don't think you are using that
"antd-mobile": "^2.2.6",
"babel-plugin-import": "^1.11.0",
"es6-symbol": "^3.1.1",
"expo": "^32.0.0",
"firebase": "^5.8.1",
"haversine": "^1.1.0",
"moment": "^2.23.0",
"moment-timezone": "^0.5.23",
"native-base": "^2.8.1",
"prop-types": "^15.6.2",
"re-base": "^4.0.0",
"react": "16.5.0",
"react-dom": "^16.7.0",
"react-moment": "^0.8.4",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-audio": "^4.3.0", // can't be used in Expo as it requires native code
"react-native-aws3": "0.0.8",
"react-native-button": "^2.3.0",
"react-native-elements": "^0.19.1",
"react-native-emoji-selector": "^0.1.6",
"react-native-fontawesome": "^6.0.1", // requires you to add the font yourself, also it is included in expo
"react-native-gesture-handler": "^1.0.12", // already included in expo
"react-native-gifted-chat": "^0.7.2",
"react-native-gifted-messenger": "^0.1.4",
"react-native-image-picker": "^0.28.0", // can't use this in expo as it requires native code
"react-native-ionicons": "^4.4.6", // already included in expo,
"react-native-keyboard-aware-scroll-view": "^0.7.4",
"react-native-linear-gradient": "^2.5.3", // can't be used in expo as it requires native code
"react-native-maps": "^0.22.1", // already included in expo
"react-native-navbar": "^2.1.0",
"react-native-render-html": "^3.10.0",
"react-native-router-flux": "^4.0.6",
"react-native-sound": "^0.10.9", // cannot use this in expo as it requires native code
"react-native-splash-screen": "^3.1.1", // cannot use this in expo as it requires native code
"react-native-timeago": "^0.4.0",
"react-native-vector-icons": "^6.2.0", // cannot use this in expo as it requires native code
"react-navigation": "^3.0.7",
"react-navigation-header-buttons": "^2.1.1",
"react-simple-line-icons": "^1.0.8",
"scheduler": "^0.11.3", // this is used internally by React, I don't think you require it here
"tcomb-form-native": "^0.6.20"
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
