Update the repo to use expo and react-native 0.66

.expo/README.md

@@ -0,0 +1,17 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What does the "packager-info.json" file contain?
+
+The "packager-info.json" file contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+
+> What does the "settings.json" file contain?
+
+The "settings.json" file contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

.expo/packager-info.json

@@ -0,0 +1,10 @@
+{
+  "devToolsPort": 19002,
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null,
+  "expoServerNgrokUrl": null,
+  "packagerNgrokUrl": null,
+  "ngrokPid": null,
+  "webpackServerPort": null
+}

.expo/settings.json

@@ -0,0 +1,10 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": "fx-4ia",
+  "https": false,
+  "scheme": null,
+  "devClient": false
+}

App.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Text, View } from "react-native";
+import AppLoading from "expo-app-loading";
+import { useFonts } from "expo-font";
+import ProductList from "./screens/ProductList";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import styles from "./components/theme";
+import CartScreen from "./screens/CartScreen";
+import HomeScreen from "./screens/HomeScreen";
+import BuyNowScreen from "./screens/BuyNowScreen";
+
+const Stack = createNativeStackNavigator();
+const BottomTabs = createBottomTabNavigator();
+const App = () => {
+  let [fontsLoaded] = useFonts({
+    Skyhook: require("./assets/fonts/SkyhookMono.ttf"),
+  });
+
+  if (!fontsLoaded) {
+    return <AppLoading />;
+  }
+
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        <Stack.Screen
+          name="Home"
+          component={HomeScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen name={"Checkout"} component={BuyNowScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;

Counter.js

@@ -1,56 +1,56 @@
-/**
- * @providesModule Counter
- */
-
-import React from 'react';
-import {
-  Text,
-  View
-} from 'react-native'
-
-import styles from './components/theme'
-import Button from './components/button'
-
-import AnimateNumber from 'react-native-animate-number'
-
-export default class Counter extends React.Component {
-  state = {
-    value: 1000
-  }
-
-  render() {
-    return <View style={styles.container}>
-      <AnimateNumber
-        interval='10'
-        timing='easeIn'
-        value={this.state.value} 
-
-        style={[styles.customFont, styles.header]}
-        formatter={(val) => {
-          return parseFloat(val).toFixed(2);
-        }}
-      />
-      <View style={styles.groupButton}>
-        <Button onPress={() => this.incrementValue()} theme='dark'>
-          Increment
-        </Button>
-        <Button onPress={() => this.decrementValue()} theme='light'>
-          Decrement
-        </Button>
-      </View>
-      <Text style={[styles.customFont, styles.normal]}>Open up main.js to start working on your app!</Text>
-    </View>
-  }
-
-  decrementValue() {
-    this.setState({
-      value: this.state.value - Math.floor(Math.random() * 200)
-    })
-  }
-
-  incrementValue() {
-    this.setState({
-      value: this.state.value + Math.floor(Math.random() * 200)
-    })
-  }
-}
+// /**
+//  * @providesModule Counter
+//  */
+
+// import React from 'react';
+// import {
+//   Text,
+//   View
+// } from 'react-native'
+
+// import styles from './components/theme'
+// import Button from './components/button'
+
+// import AnimateNumber from 'react-native-animate-number'
+
+// export default class Counter extends React.Component {
+//   state = {
+//     value: 1000
+//   }
+
+//   render() {
+//     return <View style={styles.container}>
+//       <AnimateNumber
+//         interval='10'
+//         timing='easeIn'
+//         value={this.state.value}
+
+//         style={[styles.customFont, styles.header]}
+//         formatter={(val) => {
+//           return parseFloat(val).toFixed(2);
+//         }}
+//       />
+//       <View style={styles.groupButton}>
+//         <Button onPress={() => this.incrementValue()} theme='dark'>
+//           Increment
+//         </Button>
+//         <Button onPress={() => this.decrementValue()} theme='light'>
+//           Decrement
+//         </Button>
+//       </View>
+//       <Text style={[styles.customFont, styles.normal]}>Open up main.js to start working on your app!</Text>
+//     </View>
+//   }
+
+//   decrementValue() {
+//     this.setState({
+//       value: this.state.value - Math.floor(Math.random() * 200)
+//     })
+//   }
+
+//   incrementValue() {
+//     this.setState({
+//       value: this.state.value + Math.floor(Math.random() * 200)
+//     })
+//   }
+// }

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+  };
+};

components/ProductRow.js

@@ -0,0 +1,92 @@
+import React from "react";
+
+import {
+  View,
+  Text,
+  Image,
+  ScrollView,
+  StyleSheet,
+  Dimensions,
+  Animated,
+  TouchableWithoutFeedback,
+} from "react-native";
+import theme from "./theme";
+
+import RenderProductFooter from "./RenderProductFooter";
+const { width, height } = Dimensions.get("window");
+
+const ProductRow = ({ product, i, navigation }) => {
+  console.log(i);
+
+  return (
+    <View style={[theme.container, { width: width, padding: 40 }]} key={i}>
+      <View
+        style={{
+          shadowColor: "#000000",
+          shadowOpacity: 0.2,
+          shadowRadius: 3,
+          shadowOffset: {
+            height: 0,
+            width: 0,
+          },
+          borderRadius: 4,
+          alignItems: "center",
+          justifyContent: "flex-end",
+          flex: 1,
+          backgroundColor: "#ffffff",
+        }}
+      >
+        <View style={[theme.newLabel, theme.absoluteTopLeft, theme.greenTheme]}>
+          <Text style={[theme.newLabelText, theme.customFont]}>NEW</Text>
+        </View>
+        <Animated.Image source={{ uri: product.image }} style={[theme.image]} />
+        <Text style={[theme.customFont, theme.title]}>{product.title}</Text>
+        <Text style={[theme.customFont, theme.price]}>{product.price}</Text>
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginVertical: 20,
+          }}
+        >
+          {product.colors.map((color, index) => {
+            return (
+              <View
+                key={index}
+                style={{
+                  position: "relative",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <View
+                  style={[
+                    theme.productColorBubble,
+                    {
+                      backgroundColor: color,
+                    },
+                  ]}
+                />
+                {product.selectedColor === color ? (
+                  <View
+                    style={[
+                      theme.productColorBubble,
+                      theme.selectedBubble,
+                      {
+                        backgroundColor: color,
+                      },
+                    ]}
+                  />
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+
+        <RenderProductFooter navigation={navigation}/>
+      </View>
+    </View>
+  );
+};
+
+export default ProductRow;

components/RenderProductFooter.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { View } from "react-native";
+import Button from "./button";
+import theme from "./theme";
+
+export const RenderProductFooter = ({ navigation }) => {
+  return (
+    <View
+      style={[
+        theme.groupButton,
+        {
+          borderBottomLeftRadius: 4,
+          borderBottomRightRadius: 4,
+          overflow: "hidden",
+          borderTopWidth: 1,
+          borderTopColor: "#f0f0f0",
+        },
+      ]}
+    >
+      <Button onPress={() => console.log("Added to cart")} theme="light">
+        ADD TO CART
+      </Button>
+
+      <Button onPress={() => navigation.navigate("Checkout")} theme="dark">
+        BUY NOW
+      </Button>
+    </View>
+  );
+};
+
+export default RenderProductFooter;