diff --git a/templates/app/react-native/App.js b/templates/app/react-native/App.js
index 775a7e1aa5..7f8330f775 100644
--- a/templates/app/react-native/App.js
+++ b/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 (
-
-
-
+ {isReady ? (
+
+
+
+ ) : null}
);
diff --git a/templates/app/react-native/src/components/AppContainer/AppContainer.js b/templates/app/react-native/src/components/AppContainer/AppContainer.js
index 7983d0cab3..3879c54844 100644
--- a/templates/app/react-native/src/components/AppContainer/AppContainer.js
+++ b/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 (
<>
- {isReady && language ? (
+ {language ? (
{isValid ? : }