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 :
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
SENDIRI NIH
Error