Add Screen and navigator, along with fonts and images

EDSTeam · Apr 19, 2020 · 9523a88 · 9523a88
1 parent 3479c5b
commit 9523a88
Show file tree

Hide file tree

Showing 18 changed files with 243 additions and 109 deletions.
diff --git a/App.js b/App.js
@@ -1,114 +1,56 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- * @flow strict-local
- */
+
+import React, { useState } from 'react';
+// import * as Font from 'expo-font';
+// import { AppLoading } from 'expo';
+import StackNavigator from './routes/HomeStack'
+import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native';
 
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
+export default function App() {
+    // const [fontsLoaded, setFontsLoaded] = useState(false);
+  return(
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+    <StackNavigator/>
 
-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>
-    </>
-  );
-};
+    // <View style={styles.home}>
+    //     <Text style={styles.text}>
+    //         HELLO HOME
+    //     </Text>
+    //     <ImageBackground source= {require('./assets/images/food')}>
+
+    //     </ImageBackground>
 
-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;
+
+
+    // </View>
+    // if (fontsLoaded) {
+    //   return (
+        // <Navigator />
+    //   );
+    // } else {
+    //   return (
+    //     <AppLoading 
+    //       startAsync={getFonts} 
+    //       onFinish={() => setFontsLoaded(true)} 
+    //     />
+    //   )
+    // }
+  )
+  }
+
+  const styles=StyleSheet.create({
+    home: {
+        flex: 0,
+        backgroundColor:'red'
+
+    },
+    text: {
+        fontFamily: 'Roboto-Bold',
+        // fontWeight: 'bold',
+        paddingLeft: 16,
+        fontSize: 32
+    }
+
+
+
+  })
diff --git a/AppP.js b/AppP.js
@@ -0,0 +1,114 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+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;
diff --git a/assets/fonts/Roboto-Black.ttf b/assets/fonts/Roboto-Black.ttf
diff --git a/assets/fonts/Roboto-BlackItalic.ttf b/assets/fonts/Roboto-BlackItalic.ttf
diff --git a/assets/fonts/Roboto-Bold.ttf b/assets/fonts/Roboto-Bold.ttf
diff --git a/assets/fonts/Roboto-BoldItalic.ttf b/assets/fonts/Roboto-BoldItalic.ttf
diff --git a/assets/fonts/Roboto-Italic.ttf b/assets/fonts/Roboto-Italic.ttf
diff --git a/assets/fonts/Roboto-Light.ttf b/assets/fonts/Roboto-Light.ttf
diff --git a/assets/fonts/Roboto-LightItalic.ttf b/assets/fonts/Roboto-LightItalic.ttf
diff --git a/assets/fonts/Roboto-Medium.ttf b/assets/fonts/Roboto-Medium.ttf
diff --git a/assets/fonts/Roboto-MediumItalic.ttf b/assets/fonts/Roboto-MediumItalic.ttf
diff --git a/assets/fonts/Roboto-Regular.ttf b/assets/fonts/Roboto-Regular.ttf
diff --git a/assets/fonts/Roboto-Thin.ttf b/assets/fonts/Roboto-Thin.ttf
diff --git a/assets/fonts/Roboto-ThinItalic.ttf b/assets/fonts/Roboto-ThinItalic.ttf
diff --git a/assets/images/Kitchen.jpg b/assets/images/Kitchen.jpg
diff --git a/assets/images/Store.jpg b/assets/images/Store.jpg
diff --git a/routes/HomeStack.js b/routes/HomeStack.js
@@ -0,0 +1,23 @@
+import { createStackNavigator } from 'react-navigation-stack';
+import { createAppContainer } from 'react-navigation';
+import Home from '../screens/home';
+// import ReviewDetails from '../screens/reviewDetails';
+
+const screens = {
+    Home: {
+      screen: Home,
+    },
+    // ReviewDetails: {
+    //   screen: ReviewDetails,
+    // },
+  };
+
+// home stack navigator screens
+const HomeStack = createStackNavigator(screens, {
+  defaultNavigationOptions: {
+    headerTintColor: '#444',
+    headerStyle: { backgroundColor: '#d00f16', height: 60 }
+  }
+});
+
+export default createAppContainer(HomeStack);
diff --git a/screens/Home.js b/screens/Home.js
@@ -0,0 +1,55 @@
+
+import React, { useState } from 'react';
+// import * as Font from 'expo-font';
+// import { AppLoading } from 'expo';
+// import Navigator from './route/NavigDraw'
+import { StyleSheet, Text, View, Image, ImageBackground } from 'react-native';
+
+export default function Home() {
+    // const [fontsLoaded, setFontsLoaded] = useState(false);
+  return(
+
+    <View style={styles.home}>
+
+        <Image source= {require('../assets/images/Kitchen.jpg')} style={styles.image}>
+            <Text style={styles.text}>
+                HELLO HOME
+            </Text>
+        </Image>
+
+    </View>
+    // if (fontsLoaded) {
+    //   return (
+        // <Navigator />
+    //   );
+    // } else {
+    //   return (
+    //     <AppLoading 
+    //       startAsync={getFonts} 
+    //       onFinish={() => setFontsLoaded(true)} 
+    //     />
+    //   )
+    // }
+  )
+  }
+
+  const styles=StyleSheet.create({
+    home: {
+        flex: 0,
+        backgroundColor:'red'
+
+    },
+    text: {
+        fontFamily: 'Roboto-Bold',
+        // fontWeight: 'bold',
+        paddingLeft: 16,
+        fontSize: 32
+    },
+    image:{
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+
+
+
+  })