Merge pull request #5 from putuadityabayu/development

2.5.0

App.js

@@ -41,7 +41,7 @@ export default function App() {
 	if (!isLoadingComplete) {
 		return (
 			<>
-			<StatusBar style="light" translucent animated />
+			<StatusBar style="light" backgroundColor="#2f6f4e" translucent animated />
 			<AppLoading
 				startAsync={loadResourcesAsync}
 				onError={(err)=>handleLoadingError(err,setLoadingComplete)}
@@ -53,7 +53,7 @@ export default function App() {
 		return (
 			<SafeAreaView style={[styles.container]}>
 				<AppearanceProvider>
-					<AuthProvider>
+					<AuthProvider main>
 						<AppNavigator />
 					</AuthProvider>
 				</AppearanceProvider>
@@ -97,6 +97,7 @@ function handleLoadingError(error,setLoadingComplete) {
 
 function handleFinishLoading(setLoadingComplete) {
 	setLoadingComplete(true);
+
 }
 const styles = StyleSheet.create({
 	container: {

activity/BaseActivity.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Asset } from 'expo-asset';
+import { StyleSheet,LogBox } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import * as Font from 'expo-font';
+import 'moment/locale/id';
+import {
+	Inter_300Light,
+	Inter_400Regular,
+	Inter_500Medium,
+	Inter_600SemiBold,
+	Inter_700Bold,
+} from '@expo-google-fonts/inter';
+import {AppearanceProvider} from 'react-native-appearance'
+import remoteConfig from '@react-native-firebase/remote-config'
+import BaseProvider from './BaseProvider';
+
+LogBox.ignoreLogs(['Possible Unhandled Promise Rejection']);
+
+async function loadResourcesAsync() {
+	// load all resources such as images, fonts, etc.
+	await Promise.all([
+		Asset.loadAsync([
+			require('../assets/icon.png'),
+			require('../assets/splash.png'),
+			require('../assets/avatar.png'),
+			require('../assets/landing.png'),
+			require('../assets/transparent.png'),
+			require('../assets/login.png'),
+			require('../assets/forget.png'),
+			require('../assets/register.png'),
+		]),
+		Font.loadAsync({
+			Inter_300Light,
+			Inter_Regular: Inter_400Regular,
+			Inter_Medium:Inter_500Medium,
+			Inter_SemiBold: Inter_600SemiBold,
+			Inter_Bold: Inter_700Bold,
+		}),
+		remoteConfig().setDefaults({tuner_enabled:false})
+		.then(()=>remoteConfig().fetchAndActivate())
+	]);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+});
+
+function BaseActivity({children}: {children: React.ReactNode}) {
+    React.useEffect(()=>{
+        loadResourcesAsync();
+    },[])
+
+	return (
+        <SafeAreaView style={[styles.container]}>
+            <AppearanceProvider>
+                <BaseProvider>
+                    {children}
+                </BaseProvider>
+            </AppearanceProvider>
+        </SafeAreaView>
+    );
+}
+export default React.memo(BaseActivity)

activity/BaseNavigator.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import {useTheme} from '@ui-kitten/components'
+import {StatusBar} from 'expo-status-bar'
+
+interface BaseNavigatorInterface {
+    children:React.ReactNode;
+    tema: string;
+    selectedTheme: string;
+    lang: string;
+}
+function BaseNavigator({children,selectedTheme}: BaseNavigatorInterface){
+    const theme=useTheme();
+    return (
+        <>
+            <StatusBar animated style={(selectedTheme==='light' ? "dark" : "light")} translucent backgroundColor={theme['background-basic-color-1']} />
+            {children}
+        </>
+    )
+}
+export default React.memo(BaseNavigator);

activity/BaseProvider.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import * as eva from '@eva-design/eva'
+import {ApplicationProvider, IconRegistry} from '@ui-kitten/components'
+import {EvaIconsPack} from '@ui-kitten/eva-icons'
+import {useColorScheme} from 'react-native'
+import Localization from '@pn/module/Localization'
+import i18n from 'i18n-js'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import {default as en_locale} from '@pn/locale/en.json'
+import {default as id_locale} from '@pn/locale/id.json'
+import { default as theme } from '../theme.json';
+import {default as mapping} from '../mapping.json'
+import useForceUpdate from '@pn/utils/useFoceUpdate';
+import {FontAwesomeIconsPack} from '../components/utils/FontAwesomeIconsPack'
+import {IoniconsPack} from '../components/utils/IoniconsPack'
+import {MaterialIconsPack} from '../components/utils/MaterialIconsPack'
+import BaseNavigator from './BaseNavigator'
+import {PortalProvider} from'@gorhom/portal'
+
+function BaseProvider({children}: {children: React.ReactNode}) {
+    const [tema,setTema]=React.useState('auto')
+    const colorScheme = useColorScheme()
+	const forceUpdate = useForceUpdate();
+    const [lang,changeLang]=React.useState("auto");
+
+    const selectedTheme = React.useMemo(()=>{
+		if(colorScheme==='dark' && tema === 'auto' || tema === 'dark') return 'dark';
+		return 'light'
+	},[colorScheme,tema])
+
+    React.useEffect(()=>{
+        async function asyncTask(){
+			try {
+				let [res,lang] = await Promise.all([AsyncStorage.getItem("theme"),AsyncStorage.getItem("lang")])
+
+				if(res !== null) setTema(res);
+				if(lang !== null) changeLang(lang);
+
+				return Promise.resolve();
+			} catch(err){
+				console.log("Init Err",err);
+				return;
+			}
+		};
+
+        asyncTask();
+    },[])
+
+    React.useEffect(()=>{
+		function onLocalizationChange(){
+			i18n.translations = {
+				en:en_locale,
+				id:id_locale
+			};
+			i18n.fallbacks = true;
+			if(['id','en'].indexOf(lang) !== -1) {
+				const lng = lang === 'id' ? "id-ID" : "en-US";
+				i18n.locale =lng;
+			} else {
+				i18n.locale = Localization.getLocales()[0].languageTag;
+			}
+			forceUpdate();
+		}
+
+		onLocalizationChange();
+		Localization.addEventListener('localizationChange',onLocalizationChange)
+
+		return ()=>{
+			Localization.removeEventListener('localizationChange',onLocalizationChange)
+		}
+	},[lang])
+
+    return (
+        <React.Fragment>
+            <IconRegistry icons={[EvaIconsPack,FontAwesomeIconsPack,IoniconsPack,MaterialIconsPack]} />
+            <ApplicationProvider {...eva} theme={{...eva[selectedTheme],...theme[selectedTheme]}} customMapping={mapping as any}>
+                <BaseNavigator tema={tema} selectedTheme={selectedTheme} lang={lang}>
+					<PortalProvider>
+						{children}
+					</PortalProvider>
+				</BaseNavigator>
+            </ApplicationProvider>
+        </React.Fragment>
+    )
+}
+export default React.memo(BaseProvider);

activity/auth/AppNavigator.js

@@ -4,7 +4,7 @@ import { createStackNavigator,TransitionPresets } from '@react-navigation/stack'
 import {useTheme} from '@ui-kitten/components'
 import {StatusBar} from 'expo-status-bar'
 import analytics from '@react-native-firebase/analytics'
-import useRootNavigation from '../../navigation/useRootNavigation'
+import useRootNavigation from './useRootNavigation'
 
 import Login from '../../screens/auth/Login'
 import Register from '../../screens/auth/Register'

activity/auth/AuthActivity.js

@@ -1,11 +1,9 @@
-import React, { useState } from 'react';
-import AppLoading from 'expo-app-loading';
+import React from 'react';
 import { Asset } from 'expo-asset';
 import { StyleSheet,LogBox,useColorScheme } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import * as Font from 'expo-font';
 import 'moment/locale/id';
-import {StatusBar} from 'expo-status-bar'
 import {
 	Inter_300Light,
 	Inter_400Regular,
@@ -14,7 +12,7 @@ import {
 	Inter_700Bold,
 } from '@expo-google-fonts/inter';
 import AppNavigator from './AppNavigator';
-import { AuthProvider } from '../../provider/AuthProvider';
+import { AuthProvider } from './AuthProvider';
 import {AppearanceProvider} from 'react-native-appearance'
 import remoteConfig from '@react-native-firebase/remote-config'