title: Unrecognized font family 'anticon'
body: <p>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.</p>
  <p><strong>Error message in iOS simulator:</strong><br />
  <a href="https://i.stack.imgur.com/LOVCQl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LOVCQl.png" alt="enter image description here" /></a></p>
  <p><strong>The Component I'm calling Anticon in:</strong></p>
  <pre><code>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}) =&gt; {
    return (
      &lt;View style={styles.inputContainer}&gt;
        &lt;View style={styles.iconStyle}&gt;
          &lt;AntDesign name={iconType} size={25} color=&quot;#666&quot; /&gt;
        &lt;/View&gt;
        &lt;TextInput
          value={labelValue}
          style={styles.input}
          numberOfLines={1}
          placeholder={placeholderText}
          placeholderTextColor=&quot;#666&quot;
          {...rest}
        /&gt;
      &lt;/View&gt;
    );
  };
  
  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,
    },
  });
  </code></pre>
  <p><strong>The screen I'm attempting to use anticon in:</strong></p>
  <pre><code>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}) =&gt; {
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();
  
    const {login} = useContext(AuthContext);
  
    return (
      &lt;ScrollView contentContainerStyle={styles.container}&gt;
        &lt;Image
          source={require('../assets/rn-social-logo.png')}
          style={styles.logo}
        /&gt;
        &lt;Text style={styles.text}&gt;RN Social App&lt;/Text&gt;
  
        &lt;FormInput
          labelValue={email}
          onChangeText={userEmail =&gt; setEmail(userEmail)}
          placeholderText=&quot;Email&quot;
          iconType=&quot;user&quot;
          keyboardType=&quot;email-address&quot;
          autoCapitalize=&quot;none&quot;
          autoCorrect={false}
        /&gt;
  
        &lt;FormInput
          labelValue={password}
          onChangeText={userPassword =&gt; setPassword(userPassword)}
          placeholderText=&quot;Password&quot;
          iconType=&quot;lock&quot;
          secureTextEntry={true}
        /&gt;
  
        &lt;FormButton
          buttonTitle=&quot;Sign In&quot;
          onPress={() =&gt; login(email, password)}
        /&gt;
  
        &lt;TouchableOpacity style={styles.forgotButton} onPress={() =&gt; {}}&gt;
          &lt;Text style={styles.navButtonText}&gt;Forgot Password?&lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
  
        &lt;View&gt;
          &lt;SocialButton
            buttonTitle=&quot;Sign In with Facebook&quot;
            btnType=&quot;facebook&quot;
            color=&quot;#4867aa&quot;
            backgroundColor=&quot;#e6eaf4&quot;
            onPress={() =&gt; {}}
          /&gt;
  
          &lt;SocialButton
            buttonTitle=&quot;Sign In with Google&quot;
            btnType=&quot;google&quot;
            color=&quot;#de4d41&quot;
            backgroundColor=&quot;#f5e7ea&quot;
            onPress={() =&gt; {}}
          /&gt;
        &lt;/View&gt;
  
        &lt;TouchableOpacity
          style={styles.forgotButton}
          onPress={() =&gt; navigation.navigate('Signup')}&gt;
          &lt;Text style={styles.navButtonText}&gt;
            Don't have an acount? Create here
          &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      &lt;/ScrollView&gt;
    );
  };
  
  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',
    },
  });
  </code></pre>
  <p><strong>My dependencies with anticon:</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;socialapp2&quot;,
    &quot;version&quot;: &quot;0.0.1&quot;,
    &quot;private&quot;: true,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@ant-design/icons&quot;: &quot;4.0.0&quot;,
      &quot;@react-native-async-storage/async-storage&quot;: &quot;npm:@react-native-community/async-storage&quot;,
      &quot;@react-native-community/masked-view&quot;: &quot;^0.1.11&quot;,
      &quot;@react-native-firebase/app&quot;: &quot;^12.8.0&quot;,
      &quot;@react-native-firebase/auth&quot;: &quot;^12.8.0&quot;,
      &quot;@react-navigation/native&quot;: &quot;^6.0.2&quot;,
      &quot;@react-navigation/stack&quot;: &quot;^6.0.7&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-native&quot;: &quot;0.65.1&quot;,
      &quot;react-native-async-storage&quot;: &quot;^0.0.1&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;^1.10.3&quot;,
      &quot;react-native-onboarding-swiper&quot;: &quot;^1.1.4&quot;,
      &quot;react-native-reanimated&quot;: &quot;^2.2.2&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;^3.3.2&quot;,
      &quot;react-native-screens&quot;: &quot;^3.7.2&quot;,
      &quot;react-native-vector-icons&quot;: &quot;^8.1.0&quot;,
      &quot;react-navigation&quot;: &quot;^4.4.4&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.12.9&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.12.5&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;^2.0.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.6.3&quot;,
      &quot;eslint&quot;: &quot;7.14.0&quot;,
      &quot;jest&quot;: &quot;^26.6.3&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;^0.66.0&quot;,
      &quot;react-native-codegen&quot;: &quot;^0.0.7&quot;,
      &quot;react-test-renderer&quot;: &quot;17.0.2&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  }
  </code></pre>