config #2

App.js

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow
- */
-
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-const App: () => React$Node = () => {
-  return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
-export default App;

android/app/src/main/AndroidManifest.xml

@@ -13,7 +13,7 @@
       <activity
         android:name=".MainActivity"
         android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenHalf"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

app/App.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+import React, { Component } from 'react';
+import { StatusBar } from 'react-native';
+import { Container } from 'native-base'
+import AppNavigation from './navigation/appNavigation';
+
+export default class App extends Component {
+  render() {
+    return (
+      <Container>
+          <StatusBar backgroundColor={'#1241cd'} translucent={false} barStyle={'light-content'}/>
+          <AppNavigation/>
+      </Container>
+    );
+  }
+}
\ No newline at end of file

app/container/homepageScreen.js

+import React, { Component } from 'react';
+import { Container, View } from 'native-base';
+
+export default class HomepageScreen extends Component {
+  render() {
+    return (
+      <Container>
+          <View style={{flex: 1, justifyContent: 'center', alignItems:'center', backgroundColor:'blue'}}>
+
+          </View>
+      </Container>
+    );
+  }
+}

app/library/metrics.js

+import { Dimensions, Platform } from 'react-native'
+
+const { width, height } = Dimensions.get('screen')
+
+// Used via Metrics.baseMargin
+const metrics = {
+  marginHorizontal: 10,
+  marginVertical: 10,
+  section: 25,
+  baseMargin: 16,
+  doubleBaseMargin: 20,
+  smallMargin: 5,
+  doubleSection: 50,
+  horizontalLineHeight: 1,
+  screenWidth: width < height ? width : height,
+  screenHeight: width < height ? height : width,
+  navBarHeight: (Platform.OS === 'ios') ? 64 : 54,
+  buttonRadius: 4,
+  icons: {
+    tiny: 15,
+    small: 20,
+    medium: 30,
+    large: 45,
+    xl: 50
+  },
+  images: {
+    small: 20,
+    medium: 40,
+    large: 60,
+    logo: 120
+  },
+  textLabel: 12,
+  text: 14,
+  
+}
+
+export default metrics

app/navigation/appNavigation.js

+import React from 'react'
+
+//Library
+import { createAppContainer } from 'react-navigation';
+import { createStackNavigator } from 'react-navigation-stack';
+import { fromLeft, fromTop, flipY, fadeOut, fromRight, fromBottom } from 'react-navigation-transitions';
+import { headerStyle, headerTitleStyle, headerBgStyle, headerRightStyle} from './navStyle'
+
+//Screen
+import HomepageScreen from '../container/homepageScreen'
+
+//IconBack
+import IconBack from 'react-native-vector-icons/MaterialIcons'
+import Ionicons from 'react-native-vector-icons/Ionicons'
+
+// import Images from '../Library/Images';
+import { View , Image} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+const MainNavigator = createStackNavigator({
+    HomepageScreen: { screen: HomepageScreen, navigationOptions: { header: null} },
+    // LatihanDragDrop: { screen: LatihanDragDrop, navigationOptions: { title: 'Latihan'}}
+  }, {
+    headerMode: 'screen',
+    initialRouteName: 'HomepageScreen',
+    transitionConfig: () => fromLeft(500),
+    defaultNavigationOptions: {
+      headerStyle,
+      headerTitleStyle,
+    //   headerBackground: (<Image source={Images.backgroudNav} style={headerBgStyle} />),
+      headerTintColor: 'white',
+      headerBackImage: (
+        // <Image source={Images.buttonBack} style={{width: 30, height: 20}}/>
+        <TouchableOpacity style={{paddingLeft: 10}} activeOpacity={.9}>
+          <Ionicons name='ios-arrow-back' size={30} color={'white'}  style={{}}/>
+        </TouchableOpacity>
+        
+      )
+    }
+  });
+  
+  export default createAppContainer(MainNavigator);
\ No newline at end of file

app/navigation/navStyle.js

+// import colors from "../Color";
+import { Platform } from 'react-native'
+import metrics from "../library/metrics";
+import DeviceInfo from 'react-native-device-info'
+// import Fonts from "../Fonts";
+
+export const headerStyle = {
+    // backgroundColor: colors.PrimaryOldBlue,
+    shadowRadius: 0,
+    elevation: 0,
+    // flex: 1
+    // borderBottomWidth: 20,
+}
+
+export const headerTitleStyle = {
+    flex: 1,
+    // fontSize: Fonts.size.title,
+    // fontFamily: Fonts.type.regular,
+    textAlign: 'center',
+    marginLeft: -35
+    // fontWeight: '600',
+}
+
+export const headerRightStyle = {
+    marginRight: 10,
+    marginLeft: 5,
+    marginTop: 5,
+    height: 20, 
+    width: 75,
+}
+export const headerBgStyle = {
+    height: Platform.OS == 'android' ? 55 : DeviceInfo.hasNotch() ? 90 : 65,
+    width: metrics.screenWidth,
+    // resizeMode: 'cover'
+}
\ No newline at end of file

index.js

@@ -3,7 +3,7 @@
  */
 
 import {AppRegistry} from 'react-native';
-import App from './App';
+import App from './app/App';
 import {name as appName} from './app.json';
 
 AppRegistry.registerComponent(appName, () => App);

ios/Ad1appraisal_Mobile/Info.plist

@@ -38,7 +38,7 @@
 		</dict>
 	</dict>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
+	<string/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -53,5 +53,37 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+	<key>UIAppFonts</key>
+	<array>
+		<string>AntDesign.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>Feather.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>MaterialIcons.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>Roboto_medium.ttf</string>
+		<string>Roboto.ttf</string>
+		<string>rubicon-icon-font.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>Zocial.ttf</string>
+		<string>Andale Mono.ttf</string>
+		<string>Arial Black.ttf</string>
+		<string>Arial.ttf</string>
+		<string>Comic Sans MS.ttf</string>
+		<string>Courier New.ttf</string>
+		<string>Georgia.ttf</string>
+		<string>Microsoft Sans Serif.ttf</string>
+		<string>SF-UI-Text-Regular.otf</string>
+		<string>Skia.ttf</string>
+		<string>Times New Roman.ttf</string>
+	</array>
 </dict>
 </plist>

package.json

@@ -10,10 +10,22 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@react-native-community/async-storage": "^1.8.1",
+    "@react-native-community/masked-view": "^0.1.7",
     "apisauce": "^1.1.1",
+    "native-base": "^2.13.8",
     "react": "16.9.0",
     "react-native": "0.61.5",
-    "react-native-base": "^1.1.0"
+    "react-native-base": "^1.1.0",
+    "react-native-device-info": "^5.5.3",
+    "react-native-gesture-handler": "^1.6.0",
+    "react-native-linear-gradient": "^2.5.6",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.2.0",
+    "react-native-vector-icons": "^6.6.0",
+    "react-navigation": "^4.2.2",
+    "react-navigation-stack": "^2.2.2",
+    "react-navigation-transitions": "^1.0.12"
   },
   "devDependencies": {
     "@babel/core": "7.8.6",