Merge branch 'Main-Page' of https://github.com/joChazaro/Joystik into…

… main

App.js

@@ -1,56 +1,7 @@
-import * as React from 'react';  
-import { View, Text, Button } from 'react-native';  
-import { createStackNavigator} from 'react-navigation-stack';
-import { createAppContainer } from 'react-navigation';
-import SignUp from './src/screens/SignUp.js'
-import userProfile from './src/screens/userProfile.js'
-
-class HomeScreen extends React.Component {  
-    render() {  
-        return (  
-            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
-                <Text>Home Screen</Text>  
-                <Button  
-                    title="Go to Profile"  
-                    onPress={() => this.props.navigation.navigate('userProfile')}  
-                />  
+import 'react-native-gesture-handler';
+import React, {useState, useEffect, useRef} from 'react';
+import AppNavigation from './navigation/AppNavigation'
 
-                <Text>Sign Up</Text>  
-                <Button  
-                    title="Go to Sign Up"  
-                    onPress={() => this.props.navigation.navigate('SignUp')}
-                />  
-            </View>  
-        );  
-    }  
-}  
-
-class ProfileScreen extends React.Component {  
-    render() {  
-        return (  
-            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>  
-                <Text>Profile Screen</Text>  
-            </View>  
-    );  
-    }  
-} 
-
-const AppNavigator = createStackNavigator(  
-    {  
-        Home: HomeScreen,  
-        Profile: ProfileScreen,
-        SignUp: SignUp,
-        userProfile: userProfile 
-    },  
-
-    {  
-        initialRouteName: "Home"  
-    }  
-);  
-
-const AppContainer = createAppContainer(AppNavigator);  
-export default class App extends React.Component {  
-    render() {  
-        return <AppContainer />;  
-    }  
-}  
+export default function App() {
+return <AppNavigation />
+}

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/BottomBar.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
+import {FontAwesome} from '@expo/vector-icons'
+import { NavigationEvents, StackNavigator } from 'react-navigation';
+
+export default function BottomBar({handleLikePress, handlePassPress, handleLibraryPress}) {
+    return (
+        <View style ={styles.container}>
+            <View />
+                <TouchableOpacity style={styles.button}>
+                    <FontAwesome name ="times" size={27} color="#F06795" onPress={handlePassPress}></FontAwesome>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.button}>
+                    <FontAwesome name ="heart" size={27} color="#F06795" onPress={handleLikePress}></FontAwesome>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.button}>
+                    <FontAwesome name ="book" size={27} color="#F06795" onPress={handleLibraryPress}></FontAwesome>
+                </TouchableOpacity>
+            <View />
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 75,
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        alignItems: 'center'
+    },
+    button: {
+        width: 50,
+        height: 50,
+        backgroundColor: 'white',
+        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
+        shadowColor: '#000',
+        shadowOffset: {
+            width: 0,
+            height: 0,
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 6.46,
+        elevation: 9,
+    },
+})

components/SwipeableImage.js

@@ -0,0 +1,89 @@
+import React from 'react'
+import { View, Image, StyleSheet, Text } from 'react-native'
+import {FontAwesome} from '@expo/vector-icons'
+
+export default function SwipeableImage({ game, willLike, willPass }) {
+    //console.log(game)
+    return (
+        <View>
+            <Image source={{ uri: `https:${game.url.replace('t_thumb', 't_1080p_2x')}` }} style={[styles.photo, { width: 400, height: 640 }]} />
+
+
+            {willLike && (
+                <View style ={styles.likeBox}>
+                    <Text style= {{...styles.textPrimary, color:'#64EDCC'}}>LIKE</Text>
+                </View>
+            )}
+            {willPass && (
+                <View style ={styles.passBox}>
+                    <Text style= {{...styles.textPrimary, color:'#F06795'}}>NOPE</Text>
+                </View>
+            )}
+            <View style= {styles.textContainer}>
+                <View style={styles.textRow}>
+                    <Text style={[styles.textPrimary, styles.textShadow]}>{game.game}</Text>
+                    {/* <Text style={[styles.textSecondary, styles.textShadow]}>{game.dob.age}</Text>  */}
+                </View>
+                <View style={styles.textRow}>
+                    <FontAwesome name="map-marker" size={20} color ="white"></FontAwesome>
+                    {/* <Text style={[styles.textSecondary, styles.textShadow]}>{game.location.city}</Text> */}
+                </View>
+
+            </View>
+        </View>
+    )
+}
+
+const boxStyle = {
+    position: 'absolute',
+    top: '50%',
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 20,
+    paddingRight: 20,
+    borderWidth: 3, 
+    borderRadius: 10,
+}
+
+const styles = StyleSheet.create({
+    likeBox: {
+        ...boxStyle,
+        left: 40,
+        borderColor: '#64EDCC'
+    },
+    passBox: {
+        ...boxStyle,
+        left: 40,
+        borderColor: '#F06795'
+    },
+    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/Swipes.js

@@ -0,0 +1,57 @@
+import React, {useState, forwardRef} from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import Swipeable from 'react-native-gesture-handler/Swipeable'
+import { RectButton } from 'react-native-gesture-handler'
+import SwipeableImage from './SwipeableImage'
+
+function Swipes({games, currentIndex, handleLike, handlePass, swipesRef}) {
+    const [willLike, setWillLike] = useState(false)
+    const [willPass, setWillPass] = useState(false)
+
+
+const renderLeftActions = () =>{
+    return (
+        <RectButton style = {styles.container}>
+            <SwipeableImage game= {games[currentIndex + 1]} ></SwipeableImage>
+        </RectButton>
+    )
+}
+const renderRightActions = () =>{
+    return (
+        <RectButton style = {styles.container}>
+            <SwipeableImage game= {games[currentIndex + 1]} ></SwipeableImage>
+        </RectButton>
+    )
+}
+
+    return (
+        <Swipeable
+            ref={swipesRef}
+            friction = {1.0}
+            leftThreshld={40}
+            rightThreshold={40}
+            renderLeftActions={renderLeftActions}
+            renderRightActions ={renderRightActions}
+            onSwipeableLeftOpen={() => {
+                setWillLike(false)
+                handleLike()
+            }}
+            onSwipeableRightOpen={() => {
+                setWillPass(false)
+                handlePass()
+            }}
+            onSwipeableLeftWillOpen={() => setWillLike(true)}
+            onSwipeableRightWillOpen={() => setWillLike(true)}
+        >
+            <SwipeableImage game ={games[currentIndex]} willLike={willLike} willPass={willPass} />
+        </Swipeable>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+})
+
+export default React.forwardRef((props, ref) => <Swipes swipesRef={ref} {...props}></Swipes>)

components/TopBar.js

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

navigation/AppNavigation.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import HomeScreen from '../screens/home/HomeScreen';
+import LibraryScreen from '../screens/library/LibraryScreen';
+import ProfileScreen from '../screens/Profile/ProfileScreen';
+
+
+const Stack = createStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator initialRouteName="Home" headerMode="none">
+        <Stack.Screen name="Home" component={HomeScreen} />
+        <Stack.Screen name="Library" component={LibraryScreen} />
+        <Stack.Screen name="Profile" component ={ProfileScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+
+export default App;