fontFamily 'Arial' is not a system font using react-native-textinput-effects

By | August 20, 2018
Questions:

I have a error when I using react-native-textinput-effects .
This is my error message:

fontFamily ‘Arial’ is not a system font and has not been loaded
through Expo.Font.loadAsync.
– node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
in diffProperties
– If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

  • If this is a custom font, be sure to load it with Expo.Font.loadAsync.
  • node_modules\expo\src\Font.js:34:10 in processFontFamily
  • node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:3382:38
    in diffProperties
  • … 30 more stack frames from framework internals

This is my code:

import React, { Component } from 'react'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native'
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { Font } from "expo";

import {  Fumi} from 'react-native-textinput-effects';

class Login extends React.Component {

  render() {
    return (
      <View style={styles.main_container}>
        <View style={styles.subview_container}>

   <View style={[styles.card2, { backgroundColor: '#a9ceca' }]}>
          <Text style={styles.title}>Fumi</Text>
          <Fumi

            label={'Course Name'}
            labelStyle={{ color: '#a3a3a3' }}
            inputStyle={{ color: '#f95a25' }}
            iconClass={FontAwesomeIcon}
            iconName={'university'}
            iconColor={'#f95a25'}
            iconSize={15}
          />
          <Fumi
            style={styles.input}
            label={'Degree'}
            iconClass={FontAwesomeIcon}
            iconName={'graduation-cap'}
            iconColor={'#77116a'}
          />
        </View>



        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({

  main_container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#555500',
  },
  subview_container: {

  },
card2: {
   padding: 16,
 },
 input: {
   marginTop: 4,
 },
 title: {
   paddingBottom: 16,
   textAlign: 'center',
   color: '#404d5b',
   fontSize: 20,
   fontWeight: 'bold',
   opacity: 0.8,
 }
})

export default Login

I tried to load the Arial font using this code but without success :

 componentDidMount() {
    Font.loadAsync({
      'Arial': require('./assets/fonts/Arial.ttf'),
    });
  }

Can you help me?

Answers:

Leave a Reply

Your email address will not be published. Required fields are marked *