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 ? : }