First iteration

App.js

@@ -1,96 +1,59 @@
-// import { StatusBar } from 'expo-status-bar';
-// import React from 'react';
-// import { StyleSheet, Text, View, TouchableOpacity, TextInput, } from 'react-native';
 
-// export default function App() {
-//   return (
-//     <View style={styles.container}>
-//       <Text>Hello World! Welcome to Joystik</Text>
-//       <Text>Please set up your profile!</Text>
-//       <Text>First Name: </Text>
-//       <Text>Last Name: </Text>
-//       <Text>Date of Birth: </Text>
-//       <Text>Gender: </Text>
-//       <Text>Street Address: </Text>
-//       <Text>City:</Text>
-//       <Text>Zip code:</Text>
-//     </View>
-//   );
-// }
+import React, {useState, useEffect} from 'react';
+import { StyleSheet, View, Alert} from 'react-native';
+import Constants from 'expo-constants';
+import TopBar from './components/TopBar';
+import axios from 'axios'
+import SwipeableImage from './components/SwipeableImage'
 
-// const styles = StyleSheet.create({
-//   container: {
-//     flex: 1,
-//     backgroundColor: '#fff',
-//     alignItems: 'center',
-//     justifyContent: 'center',
-//   },
-// });
-import React, { Component } from 'react'
-import { View, Text, TouchableOpacity, TextInput, StyleSheet } from 'react-native'
 
-class Inputs extends Component {
-   state = {
-      email: '',
-      password: ''
-   }
-   handleEmail = (text) => {
-      this.setState({ email: text })
-   }
-   handlePassword = (text) => {
-      this.setState({ password: text })
-   }
-   login = (email, pass) => {
-      alert('email: ' + email + ' password: ' + pass)
+export default function App() {
+
+   const [users, setUsers] = useState([])
+   const [currentIndex, setCurrentIndex] = useState(0)
+
+   async function fetchUsers() {
+         try {
+            const {data} = await axios.get('https://randomuser.me/api/?results=300')
+            setUsers(data.results)
+         }  catch (error) {
+            console.log
+            Alert.alert('Error getting users', '', [{text: 'Retry', onPress: () => fetchUsers()}])
+      }
    }
-   render() {
-      return (
-         <View style = {styles.container}>
-           <Text>Hello World! Welcome to Joystik</Text>
-            <TextInput style = {styles.input}
-               underlineColorAndroid = "transparent"
-               placeholder = "Email"
-               placeholderTextColor = "#9a73ef"
-               autoCapitalize = "none"
-               onChangeText = {this.handleEmail}/>
-
-            <TextInput style = {styles.input}
-               underlineColorAndroid = "transparent"
-               placeholder = "Password"
-               placeholderTextColor = "#9a73ef"
-               autoCapitalize = "none"
-               onChangeText = {this.handlePassword}/>
-
-            <TouchableOpacity
-               style = {styles.submitButton}
-               onPress = {
-                  () => this.login(this.state.email, this.state.password)
-               }>
-               <Text style = {styles.submitButtonText}> Submit </Text>
-            </TouchableOpacity>
+
+   useEffect(() => {
+      fetchUsers()
+   }, [])
+
+   return (
+     <View style={styles.container}>
+        <TopBar />
+         <View style = {styles.swipes}>
+            {users.length > 1 && (
+            <SwipeableImage user={users[currentIndex]}/>
+            )}
          </View>
-      )
-   }
-}
-export default Inputs
+     </View>
+   );
+ }
 
-const styles = StyleSheet.create({
+ const styles = StyleSheet.create({
    container: {
-      paddingTop: 23
+     flex: 1,
+     marginTop: Constants.statusBarHeight,
    },
-   input: {
-      margin: 15,
-      height: 40,
-      borderColor: '#7a42f4',
-      borderWidth: 1
-   },
-   submitButton: {
-      backgroundColor: '#7a42f4',
+   swipes: {
+      flex: 1,
       padding: 10,
-      margin: 15,
-      height: 40,
+      paddingTop: 8,
+      shadowColor: '#000',
+      shadowOffset: {
+         width: 0,
+         height: 3,
+      },
+      shadowOpacity: 0.29,
+      shadowRadius: 4.65,
+      elevation: 7,
    },
-   submitButtonText:{
-      color: 'white'
-   }
-})
+ });

android/.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.

android/.expo/settings.json

@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}

components/SwipeableImage.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { View, Image, StyleSheet, Text } from 'react-native'
+
+export default function SwipeableImage({ user }) {
+    return (
+        <View>
+            <Image source={{ uri: user.picture.large }} style={styles.photo} />
+            <View style= {styles.textContainer}>
+                <View style={styles.textRow}>
+                    <Text style={[styles.textPrimary, styles.textShadow]}>{user.name.first}</Text>
+                    <Text style={[styles.textSecondary, styles.textShadow]}>{user.dob.age}</Text>
+                </View>
+
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    photo: {
+        height: '100%',
+        resizeMode: 'cover',
+        borderRadius: 20,
+    },
+    textContainer: {
+        position: 'absolute',
+        bottom: 20,
+        left: 20,
+    },
+    textRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+
+    textPrimary: {
+        color: 'white',
+        fontSize: 35,
+        fontWeight: 'bold',
+    },
+    textSecondary: {
+        color: 'white',
+        fontSize: 25,
+        marginLeft: 10,
+    },
+    textShadow: {
+        textShadowColor: 'rgba(0, 0, 0, 0.80)',
+        textShadowOffset: { width: -1, height: 1 },
+        textShadowRadius: 10,
+    },
+})

components/TopBar.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import {View, Text, StyleSheet } from 'react-native'
+import { FontAwesome5, FontAwesome } from '@expo/vector-icons'
+
+export default function TopBar() {
+    return (
+        <View style = {styles.container}>
+            <FontAwesome5 name ="fire" size ={35} color ="#F06795" />
+            <FontAwesome name ="gamepad" size ={35} color ="#F06795" />
+            <FontAwesome name ="cog" size ={35} color ="#F06795" />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 70,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: 15,
+        backgroundColor: 'white',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 10,
+        },
+        shadowOpacity: 0.12,
+        shadowRadius: 5.46,
+        elevation: 9,
+    },
+})

package.json

@@ -8,11 +8,14 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "axios": "^0.21.1",
+    "constants": "0.0.2",
     "expo": "~40.0.0",
     "expo-status-bar": "~1.0.3",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
+    "react-native-gesture-handler": "~1.8.0",
     "react-native-vector-icons": "^8.1.0",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.4"