I've been coding along with a YouTube tutorial and have been running into this error message. I have the proper import statement and the proper dependency installed so I'm not sure what the issue is.
Error message in iOS simulator:
The Component I'm calling Anticon in:
import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {windowHeight, windowWidth} from '../utils/Dimensions';
import AntDesign from 'react-native-vector-icons/AntDesign';
const FormInput = ({labelValue, placeholderText, iconType, ...rest}) => {
return (
<View style={styles.inputContainer}>
<View style={styles.iconStyle}>
<AntDesign name={iconType} size={25} color="#666" />
</View>
<TextInput
value={labelValue}
style={styles.input}
numberOfLines={1}
placeholder={placeholderText}
placeholderTextColor="#666"
{...rest}
/>
</View>
);
};
export default FormInput;
const styles = StyleSheet.create({
inputContainer: {
marginTop: 5,
marginBottom: 10,
width: '100%',
height: windowHeight / 15,
borderColor: '#ccc',
borderRadius: 3,
borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff',
},
iconStyle: {
padding: 10,
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRightColor: '#ccc',
borderRightWidth: 1,
width: 50,
},
input: {
padding: 10,
flex: 1,
fontSize: 16,
fontFamily: 'Lato-Regular',
color: '#333',
justifyContent: 'center',
alignItems: 'center',
},
inputField: {
padding: 10,
marginTop: 5,
marginBottom: 10,
width: windowWidth / 1.5,
height: windowHeight / 15,
fontSize: 16,
borderRadius: 8,
borderWidth: 1,
},
});
The screen I'm attempting to use anticon in:
import React, {useContext, useState} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
Platform,
StyleSheet,
ScrollView,
} from 'react-native';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import SocialButton from '../components/SocialButton';
import {AuthContext} from '../navigation/AuthProvider';
import AntDesign from 'react-native-vector-icons/AntDesign';
const LoginScreen = ({navigation}) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const {login} = useContext(AuthContext);
return (
<ScrollView contentContainerStyle={styles.container}>
<Image
source={require('../assets/rn-social-logo.png')}
style={styles.logo}
/>
<Text style={styles.text}>RN Social App</Text>
<FormInput
labelValue={email}
onChangeText={userEmail => setEmail(userEmail)}
placeholderText="Email"
iconType="user"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
<FormInput
labelValue={password}
onChangeText={userPassword => setPassword(userPassword)}
placeholderText="Password"
iconType="lock"
secureTextEntry={true}
/>
<FormButton
buttonTitle="Sign In"
onPress={() => login(email, password)}
/>
<TouchableOpacity style={styles.forgotButton} onPress={() => {}}>
<Text style={styles.navButtonText}>Forgot Password?</Text>
</TouchableOpacity>
<View>
<SocialButton
buttonTitle="Sign In with Facebook"
btnType="facebook"
color="#4867aa"
backgroundColor="#e6eaf4"
onPress={() => {}}
/>
<SocialButton
buttonTitle="Sign In with Google"
btnType="google"
color="#de4d41"
backgroundColor="#f5e7ea"
onPress={() => {}}
/>
</View>
<TouchableOpacity
style={styles.forgotButton}
onPress={() => navigation.navigate('Signup')}>
<Text style={styles.navButtonText}>
Don't have an acount? Create here
</Text>
</TouchableOpacity>
</ScrollView>
);
};
export default LoginScreen;
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
padding: 20,
paddingTop: 50,
},
logo: {
height: 150,
width: 150,
resizeMode: 'cover',
},
text: {
fontSize: 28,
marginBottom: 10,
color: '#051d5f',
},
navButton: {
marginTop: 15,
},
forgotButton: {
marginVertical: 35,
},
navButtonText: {
fontSize: 18,
fontWeight: '500',
color: '#2e64e5',
},
});
My dependencies with anticon:
{
"name": "socialapp2",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@ant-design/icons": "4.0.0",
"@react-native-async-storage/async-storage": "npm:@react-native-community/async-storage",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-firebase/app": "^12.8.0",
"@react-native-firebase/auth": "^12.8.0",
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-async-storage": "^0.0.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-onboarding-swiper": "^1.1.4",
"react-native-reanimated": "^2.2.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.7.2",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
I've been coding along with a YouTube tutorial and have been running into this error message. I have the proper import statement and the proper dependency installed so I'm not sure what the issue is.
Error message in iOS simulator:
The Component I'm calling Anticon in:
import React from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import {windowHeight, windowWidth} from '../utils/Dimensions';
import AntDesign from 'react-native-vector-icons/AntDesign';
const FormInput = ({labelValue, placeholderText, iconType, ...rest}) => {
return (
<View style={styles.inputContainer}>
<View style={styles.iconStyle}>
<AntDesign name={iconType} size={25} color="#666" />
</View>
<TextInput
value={labelValue}
style={styles.input}
numberOfLines={1}
placeholder={placeholderText}
placeholderTextColor="#666"
{...rest}
/>
</View>
);
};
export default FormInput;
const styles = StyleSheet.create({
inputContainer: {
marginTop: 5,
marginBottom: 10,
width: '100%',
height: windowHeight / 15,
borderColor: '#ccc',
borderRadius: 3,
borderWidth: 1,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff',
},
iconStyle: {
padding: 10,
height: '100%',
justifyContent: 'center',
alignItems: 'center',
borderRightColor: '#ccc',
borderRightWidth: 1,
width: 50,
},
input: {
padding: 10,
flex: 1,
fontSize: 16,
fontFamily: 'Lato-Regular',
color: '#333',
justifyContent: 'center',
alignItems: 'center',
},
inputField: {
padding: 10,
marginTop: 5,
marginBottom: 10,
width: windowWidth / 1.5,
height: windowHeight / 15,
fontSize: 16,
borderRadius: 8,
borderWidth: 1,
},
});
The screen I'm attempting to use anticon in:
import React, {useContext, useState} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
Platform,
StyleSheet,
ScrollView,
} from 'react-native';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import SocialButton from '../components/SocialButton';
import {AuthContext} from '../navigation/AuthProvider';
import AntDesign from 'react-native-vector-icons/AntDesign';
const LoginScreen = ({navigation}) => {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const {login} = useContext(AuthContext);
return (
<ScrollView contentContainerStyle={styles.container}>
<Image
source={require('../assets/rn-social-logo.png')}
style={styles.logo}
/>
<Text style={styles.text}>RN Social App</Text>
<FormInput
labelValue={email}
onChangeText={userEmail => setEmail(userEmail)}
placeholderText="Email"
iconType="user"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
<FormInput
labelValue={password}
onChangeText={userPassword => setPassword(userPassword)}
placeholderText="Password"
iconType="lock"
secureTextEntry={true}
/>
<FormButton
buttonTitle="Sign In"
onPress={() => login(email, password)}
/>
<TouchableOpacity style={styles.forgotButton} onPress={() => {}}>
<Text style={styles.navButtonText}>Forgot Password?</Text>
</TouchableOpacity>
<View>
<SocialButton
buttonTitle="Sign In with Facebook"
btnType="facebook"
color="#4867aa"
backgroundColor="#e6eaf4"
onPress={() => {}}
/>
<SocialButton
buttonTitle="Sign In with Google"
btnType="google"
color="#de4d41"
backgroundColor="#f5e7ea"
onPress={() => {}}
/>
</View>
<TouchableOpacity
style={styles.forgotButton}
onPress={() => navigation.navigate('Signup')}>
<Text style={styles.navButtonText}>
Don't have an acount? Create here
</Text>
</TouchableOpacity>
</ScrollView>
);
};
export default LoginScreen;
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
padding: 20,
paddingTop: 50,
},
logo: {
height: 150,
width: 150,
resizeMode: 'cover',
},
text: {
fontSize: 28,
marginBottom: 10,
color: '#051d5f',
},
navButton: {
marginTop: 15,
},
forgotButton: {
marginVertical: 35,
},
navButtonText: {
fontSize: 18,
fontWeight: '500',
color: '#2e64e5',
},
});
My dependencies with anticon:
{
"name": "socialapp2",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@ant-design/icons": "4.0.0",
"@react-native-async-storage/async-storage": "npm:@react-native-community/async-storage",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-firebase/app": "^12.8.0",
"@react-native-firebase/auth": "^12.8.0",
"@react-navigation/native": "^6.0.2",
"@react-navigation/stack": "^6.0.7",
"react": "17.0.2",
"react-native": "0.65.1",
"react-native-async-storage": "^0.0.1",
"react-native-gesture-handler": "^1.10.3",
"react-native-onboarding-swiper": "^1.1.4",
"react-native-reanimated": "^2.2.2",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.7.2",
"react-native-vector-icons": "^8.1.0",
"react-navigation": "^4.4.4"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"babel-jest": "^26.6.3",
"eslint": "7.14.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.66.0",
"react-native-codegen": "^0.0.7",
"react-test-renderer": "17.0.2"
},
"jest": {
"preset": "react-native"
}
}
5 Answers
Reset to default 11add this in your info.plist file in the ios directory and don't forget to pod install:
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Fontisto.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>MaterialIcons.ttf</string>
<string>Octicons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Zocial.ttf</string>
</array>
This worked for me, hope this helps someone...
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont().then();
...
<Icon name={iconName} color={color} size={size} />;
Complete steps working for me in react-native version 0.70.4
- Install react-native-vector-icons using this
npm install --save react-native-vector-icons
Reveal project in finder and go to below path : ProjectName-> node_modules -> react-native-vector-icons -> Fonts
Add all font names from Fonts folder in Info.plist file with key UIAppFonts like this : (Attached screen shot)
Open Project-> iOS-> Project.xcworkspace file into Xcode and follow below steps : (Attached screen shot)
- Open project properties by selecting project in Xcode.
- Under Build Phrases, expand Copy Bundle Resources and add fonts from node_module folder.
- create a react-native.config.js file at the root of project and add below code :
module.exports = {
dependencies: {
'react-native-vector-icons': {
platforms: {
ios: null,
},
},
},
};- Using vector icon :
import Icon from 'react-native-vector-icons/AntDesign';
Icon.loadFont();
const VectorIconApp = () => {
return (
<SafeAreaView>
<Icon name="checkcircle" size={30} color="#4F8EF7" />
</SafeAreaView>
);
};
export default VectorIconApp;); };
export default VectorIconApp;
- Clean, Build and Run application and it will display vector-icon.
- Add ttf file into ios by clicking on project name => add file (fontname.ttf)
- Add fontname.ttf in info.plist where all vector icons present
XCode-> When you drag the "Fonts" folder from the rect-native-vector-icons folder to your project, make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder "Fonts". This will work for you!