refactor(rn): move font loading logic to App.js file

#6397

templates/app/react-native/App.js

@@ -1,24 +1,38 @@
+import { Ionicons } from '@expo/vector-icons';
+import * as Font from 'expo-font';
 import { StyleProvider } from 'native-base';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { enableScreens } from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import AppContainer from './src/components/AppContainer/AppContainer';
-import { store, persistor } from './src/store';
+import { initAPIInterceptor } from './src/interceptors/APIInterceptor';
+import { persistor, store } from './src/store';
 import getTheme from './src/theme/components';
 import { activeTheme } from './src/theme/variables';
-import { initAPIInterceptor } from './src/interceptors/APIInterceptor';
 
 enableScreens();
 initAPIInterceptor(store);
 
 export default function App() {
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    Font.loadAsync({
+      Roboto: require('native-base/Fonts/Roboto.ttf'),
+      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
+      ...Ionicons.font,
+    }).then(() => setIsReady(true));
+  }, []);
+
   return (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
-        <StyleProvider style={getTheme(activeTheme)}>
-          <AppContainer />
-        </StyleProvider>
+        {isReady ? (
+          <StyleProvider style={getTheme(activeTheme)}>
+            <AppContainer />
+          </StyleProvider>
+        ) : null}
       </PersistGate>
     </Provider>
   );

templates/app/react-native/src/components/AppContainer/AppContainer.js

@@ -1,22 +1,20 @@
-import { Ionicons } from '@expo/vector-icons';
-import * as Font from 'expo-font';
+import { NavigationContainer } from '@react-navigation/native';
 import i18n from 'i18n-js';
+import { Root } from 'native-base';
 import PropTypes from 'prop-types';
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Platform, StatusBar } from 'react-native';
-import { NavigationContainer } from '@react-navigation/native';
-import { Root } from 'native-base';
-import Loading from '../Loading/Loading';
-import { connectToRedux } from '../../utils/ReduxConnect';
-import { createLanguageSelector } from '../../store/selectors/AppSelectors';
-import { createTokenSelector } from '../../store/selectors/PersistentStorageSelectors';
+import { getEnvVars } from '../../../Environment';
+import { LocalizationContext } from '../../contexts/LocalizationContext';
+import AuthNavigator from '../../navigators/AuthNavigator';
+import DrawerNavigator from '../../navigators/DrawerNavigator';
 import AppActions from '../../store/actions/AppActions';
 import PersistentStorageActions from '../../store/actions/PersistentStorageActions';
-import { LocalizationContext } from '../../contexts/LocalizationContext';
+import { createLanguageSelector } from '../../store/selectors/AppSelectors';
+import { createTokenSelector } from '../../store/selectors/PersistentStorageSelectors';
+import { connectToRedux } from '../../utils/ReduxConnect';
 import { isTokenValid } from '../../utils/TokenUtils';
-import DrawerNavigator from '../../navigators/DrawerNavigator';
-import AuthNavigator from '../../navigators/AuthNavigator';
-import { getEnvVars } from '../../../Environment';
+import Loading from '../Loading/Loading';
 
 const { localization } = getEnvVars();
 
@@ -32,7 +30,6 @@ i18n.t = (key, ...args) => {
 
 function AppContainer({ language, fetchAppConfig, token, setToken }) {
   const platform = Platform.OS;
-  const [isReady, setIsReady] = useState(false);
 
   const localizationContext = useMemo(
     () => ({
@@ -52,19 +49,13 @@ function AppContainer({ language, fetchAppConfig, token, setToken }) {
 
   useEffect(() => {
     fetchAppConfig();
-
-    Font.loadAsync({
-      Roboto: require('native-base/Fonts/Roboto.ttf'),
-      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
-      ...Ionicons.font,
-    }).then(() => setIsReady(true));
   }, []);
 
   return (
     <>
       <StatusBar barStyle={platform === 'ios' ? 'dark-content' : 'light-content'} />
       <Root>
-        {isReady && language ? (
+        {language ? (
           <LocalizationContext.Provider value={localizationContext}>
             <NavigationContainer>
               {isValid ? <DrawerNavigator /> : <AuthNavigator />}