Mengatasi error font not found di react native

Baru yang masih dalam tahap awal menyelami alur kerja react native tentu banyak menemukan error-error yang masih baru atau merupakan hal sebenarnya sederhana namun merupakan bencana bagi developer. contoh berikut misalnya ada error berikut

You started loading ‘Roboto_medium’, but used it before it finished loading

error berikut biasa kamu  temukan jika pada saat proses development menggunakan alur pembuatan dengan CRNA atau menggunakan wrapper Expo dan sewaktu pasang ui kit native base atau juga bisa ditemukan di native kitnya shoutem UI. Dua jenis native kit ini walaupun mungkin berbeda pesannya namun intinya adalah tidak dapat menemukan font yang sudah kamu install. Ilustrasinya sebagai berikut :

share-system.com
error tidak menemukan font pada nativebase

Padahal sudah dilakukan tahap demi tahap yang dijelaskan pada proses instalasi di dokumen resmi NativeBase tersebut, sudah melakukan tahapan install berikut :

yarn add native-base --save
npm install @expo/vector-icons --save

namun juga masih menerima pesan error diatas. solusinya adalah tambahkan code async load font dan pemeriksaan nilai state jika font sudah dimuat / loaded contoh kode berikut :

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { AppLoading } from 'expo';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';

export default class App extends React.Component {

  state = {
    fontsAreLoaded: false,
  };

  async componentWillMount() {
    await Expo.Font.loadAsync({
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });

    this.setState({ fontsAreLoaded: true });
  }


  render() {

    if (!this.state.fontsAreLoaded) {
            return <AppLoading />;
      }


    return (
      <Container>
      <Header>
        <Left>
          <Button transparent>
            <Icon name='menu' />
          </Button>
        </Left>
        <Body>
          <Title>Header</Title>
        </Body>
        <Right />
      </Header>
      <Content>
        <Text>
          This is Content Section
        </Text>
      </Content>
      <Footer>
        <FooterTab>
          <Button full>
            <Text>Footer</Text>
          </Button>
        </FooterTab>
      </Footer>
    </Container>
    );
  }
}


Penjelasan :

Perhatikan bahwa dalam kode diatas kita menambahkan / import dari expo dan native-base

import { AppLoading } from 'expo';
import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';

kemudian pada kode berikut akan melakukan async terhadap font dan menetapkan nilai state fontLoaded

state = { fontsAreLoaded: false, };

async componentWillMount() { 
await Expo.Font.loadAsync(
{ 'Roboto': require('native-base/Fonts/Roboto.ttf'), 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), }
); 
this.setState({ fontsAreLoaded: true }); 
}

dan pada fungsi sebelum render( ) akan dilakukan pengecekan apakah sudah di muat font tersebut atau tidak dengan code berikut :

 if (!this.state.fontsAreLoaded) 
 { 
   return <AppLoading />;
 }

 

kemudian silahkan restart / reload expo dengan menekan double r pada emulator geny, maka pesan tersebut dan font tersebut akan diload lagi

 

berikut referensinya :

https://github.com/shoutem/ui/blob/develop/examples/create-react-native-app/App.js

1 thought on “Mengatasi error font not found di react native”

Leave a Comment

Your email address will not be published.