bb

App.js

@@ -11,21 +11,15 @@ import * as Localization from 'expo-localization';
 import i18n from 'i18n-js';
 import en from './lib/en';
 import id from './lib/id';
-import React, {useState } from 'react';
+import React, {useEffect,useState } from 'react';
 import { Text, View } from 'react-native';
 import { AppLoading } from 'expo';
 import * as Font from 'expo-font';
 
-
-function useFonts(fontMap) {
-  let [fontsLoaded, setFontsLoaded] = useState(false);
-  (async () => {
-    await Font.loadAsync(fontMap);
-    setFontsLoaded(true);
-  })();
-  return [fontsLoaded];
-}
-
+let customFonts = {
+  'Gotham-Black': require('./assets/font/Gotham-Bold-700.otf'),
+  'Gotham-SemiBoldItalic': require('./assets/font/Gotham-BoldItalic-400.otf')
+};
 
 export const lang = i18n.translations = {
         en:en,
@@ -46,13 +40,30 @@ const store = createStore(persistReducers);
 const persistor = persistStore(store)
 i18n.locale = Localization.locale;
 export default function App() {
-  return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <NavigationContainer>
-          <Auth />
-        </NavigationContainer>
-      </PersistGate>
-    </Provider>
-  );
+  const [fontsLoaded, setfontsLoaded] = useState(false)
+
+  const loadFont = async () => {
+    await Font.loadAsync(customFonts);
+  };
+
+  useEffect(() => {
+    console.log('===> Did Mount');
+    loadFont().then(_ => {
+      setfontsLoaded(true);
+    })
+  }, [])
+
+  if (!fontsLoaded) {
+    return <AppLoading />;
+  } else {
+    return (
+      <Provider store={store}>
+        <PersistGate loading={null} persistor={persistor}>
+          <NavigationContainer>
+            <Auth />
+          </NavigationContainer>
+        </PersistGate>
+      </Provider>
+    );
+  }
 }

assets/font/README.txt

+To learn more about the font family and its license, visit https://www.fontmirror.com/gotham-bold
\ No newline at end of file

view/Login.js

@@ -185,7 +185,7 @@ class Login extends React.Component {
     render() {
         return (
             <View style={styles.container}>
-                <View style={{ flex: 2 }}>
+                <View style={{ flex: 1 }}>
                     <View style={{ flex: 1, flexDirection: 'row' }}>
                         <View style={{ flex: 3 }}>
                             <Image
@@ -195,34 +195,48 @@ class Login extends React.Component {
                         </View>
                         <View style={{ flex: 6 }}>
                             <Image
-                                style={{ height: 150, width: 150, alignSelf: 'center', top: '20%' }}
+                                style={{ height: 150, width: 150, alignSelf: 'center', top: '20%', }}
                                 source={require('../assets/excelso.png')}
                             />
                         </View>
                     </View>
                 </View>
                 <View style={{ flex: 1, marginRight: 20, marginLeft: 20 }}>
-                    <View style={{ flex: 1, marginRight: 20, marginLeft: 20 }}>
-                        <Text style={{color:'white',textAlign:'center'}}>Email</Text>
+                    <View style={{ marginRight: 20, marginLeft: 20,marginBottom: 10 }}>
+                        <Text style={{ color: 'white', textAlign: 'center' }}>Email</Text>
                         <TextInput
-                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 20 }}
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 20, margin:5 }}
                             onChangeText={(email) => this.setState({ email })}
                             autoCapitalize="none"
                             value={this.state.email}
                             keyboardType='email-address'
                         />
                     </View>
-                    <View style={{ flex: 1, marginRight: 20, marginLeft: 20 }}>
-                    <Text style={{color:'white',textAlign:'center'}}>Password</Text>
+                    <View style={{ marginRight: 20, marginLeft: 20 }}>
+                        <Text style={{ color: 'white', textAlign: 'center' }}>Password</Text>
                         <TextInput
-                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 20 }}
+                            style={{ height: 40, borderColor: 'gray', borderWidth: 1, padding: 5, borderRadius: 20, margin:5 }}
                             onChangeText={password => this.setState({ password })}
                             value={this.state.password}
                             secureTextEntry={true}
                         />
                     </View>
+                    <View style={{ height: 50, backgroundColor: '#CFB368', marginRight: 70, marginLeft: 70, borderRadius: 20 ,margin:15 }}>
+                        <Text style={{textAlign:'center',alignSelf:'center',top: 15, fontWeight:'bold'}}>LOGIN</Text>
+                    </View>
                 </View>
-                <View style={{ flex: 1, }}></View>
+                <View style={{ flex: 1 }}>
+                    
+                    <View style={{justifyContent:'center',margin:10,}}>
+                        <Text style={{ color: 'white', textAlign: 'center',fontSize: 20, fontFamily:'Ghotam-Black'}}>Register</Text>
+                        <Text style={{ color: 'white', textAlign: 'center',fontSize:20 }}>Forgot Password</Text>
+                    </View>
+                    <View style={{justifyContent:'center',margin:10,}}>
+                        <Text style={{ color: 'white', textAlign: 'center' }}>Dengan Login atau Register, Kamu menyetujui aturan </Text>
+                        <Text style={{ color: 'white', textAlign: 'center' }}>Panduan Layanan dan Kebijakan Privasi Kami </Text>
+                    </View>
+                </View>
+
             </View>
         )
     }