updated chat

client/src/Chat/Chat.js

@@ -1,34 +1,64 @@
 import React from 'react'
-import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions} from 'react-native';
+import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions, FlatList, TouchableOpacity } from 'react-native';
 const win = Dimensions.get('window')
 
-function Message() {
-    return(
-        <View style={styles.Message}>
-            <Image source={require("../../assets/avatar.png")} style={styles.Picture}/>
-            <View style={styles.Preview}>
-                <Text style={styles.MessageName}>Albert Gator</Text>
-                <Text style={styles.MessageText}>This is a message preview</Text>
-            </View>
+const FakeData = [
+    {
+      id: '1',
+      messageName: 'Albert Gator',
+      messageText: 'This is a message preview blablablablab'
+    },
+    {
+      id: '2',
+      messageName: 'Alberta Gator',
+      messageText: 'This is a message preview'
+    },
+    {
+      id: '3',
+      messageName: 'IDK',
+      messageText: 'This is a message preview'
+    },
+  ];
+
+  const Item = ({ messageName, messageText, navigation }) => (
+    <TouchableOpacity 
+    style={styles.Message}
+    onPress={() => navigation.navigate("Message Page")}>
+        <Image source={require("../../assets/avatar.png")} style={styles.Picture}/>
+        <View style={styles.Preview}>
+            <Text style={styles.MessageName}>{messageName}</Text>
+            <Text style={styles.MessageText}>{messageText}</Text>
         </View>
-    )
-}
-
-function Chat() {
-    return(
-        <SafeAreaView style={styles.Chat}>
-            <View style={styles.HeaderRow}>
+    </TouchableOpacity>
+  );
+
+  const Chat = ({navigation}) => {
+    const renderItem = ({ item }) => (
+      <Item messageName={item.messageName} 
+            messageText={item.messageText}
+            navigation={navigation}/>
+    );
+
+    return (
+      <SafeAreaView style={styles.Chat}>
+        <TouchableOpacity
+            onPress={() => navigation.navigate("Profile")}
+            style={styles.ButtonContainer}
+          >
+            <Text style={styles.ButtonText}>Back</Text>
+          </TouchableOpacity>
+        <View style={styles.HeaderRow}>
                 {/*add hamburger menu and back arrow here*/}
                 <Text style={styles.Header}>Messages</Text>
-            </View>
-            <Message/>
-            <Message/>
-            <Message/>
-            <Message/>
-            <Message/>
-        </SafeAreaView>
-    )
-}
+        </View>
+        <FlatList
+          data={FakeData}
+          renderItem={renderItem}
+          keyExtractor={item => item.id}
+        />
+      </SafeAreaView>
+    );
+  }  
 
 const styles = StyleSheet.create({
     HeaderRow: {
@@ -37,8 +67,8 @@ const styles = StyleSheet.create({
     Header: {
         fontSize: 30,
         fontWeight: 'bold',
-        marginTop: 60,
-        marginBottom: 40
+        marginTop: 20,
+        marginBottom: 20
     },
     Chat: {
         flexDirection: 'column',
@@ -51,12 +81,12 @@ const styles = StyleSheet.create({
         backgroundColor: 'white',
         borderRadius: 30,
         height: 90,
-        width: '80%',
+        width: '100%',
         marginTop: 13,
         alignItems: 'center',
-        shadowColor: 'black',
-        shadowOffset: {width: 5, height: -5},
-        shadowOpacity: 0.5,
+        //shadowColor: 'black',
+        //shadowOffset: {width: 5, height: -5},
+        //shadowOpacity: 0.5,
         elevation: 3
     },
     Picture: {
@@ -73,11 +103,24 @@ const styles = StyleSheet.create({
     },
     MessageName: {
         fontWeight: 'bold',
-        fontSize: 18
+        fontSize: 14
     },
     MessageText: {
         fontSize: 14,
-    }
+    },
+    ButtonContainer: {
+        borderRadius: 20,
+        padding: 15,
+        alignSelf: "left",
+        marginLeft: '5%',
+        backgroundColor: "#FFB72D",
+    },
+    ButtonText: {
+        fontSize: 18,
+        color: "black",
+        fontWeight: "bold",
+        alignSelf: "center",
+    },
 })
 
 export { Chat }

client/src/Chat/MessagePage.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { StyleSheet, Text, View, Image, SafeAreaView, Dimensions } from 'react-native';
+const win = Dimensions.get('window')
+
+function Messages(){
+    <SafeAreaView>
+        <Text>temporary text</Text>
+    </SafeAreaView>
+}
+
+export {Messages};

client/src/Navigation/HomeStack.js

@@ -7,6 +7,7 @@ import { SignUp } from "../SignIn/SignUp";
 import { Profile } from "../Profile/Profile";
 import { Toggle } from "../Toggle/Toggle";
 import { Chat } from "../Chat/Chat";
+import { Messages } from "../Chat/MessagePage";
 
 const Stack = createNativeStackNavigator();
 /*
@@ -28,6 +29,7 @@ export default function Navigator() {
       <Stack.Screen name="Toggle" component={Toggle} />
       <Stack.Screen name="Profile" component={Profile} />
       <Stack.Screen name="Chat" component={Chat} />
+      <Stack.Screen name="Message Page" component={Messages} />
     </Stack.Navigator>
   );
 }

client/src/SignIn/SignIn.js

@@ -73,6 +73,36 @@ function SignIn({ setSignIn, navigation }) {
     return null;
   }
 
+<<<<<<< HEAD
+            <SafeAreaView style={styles.form}>
+                <Field 
+                    val={user} 
+                    onChange={onChangeUser}
+                    label={"Username or Email"}
+                    placeholder={"[email protected]"}
+                />
+                <Field 
+                    val={password} 
+                    onChange={onChangePassword}
+                    label={"Password"}
+                    placeholder={"********"}
+                    secureTextEntry={true}
+                />
+                <SafeAreaView style={styles.button}>
+                    <TouchableOpacity 
+                    onPress={() => navigation.navigate("Start")} style={styles.ButtonContainer}>
+                        <Text style={styles.ButtonText}>Sign In</Text>
+                    </TouchableOpacity>
+                    <Button 
+                        style={styles.button}
+                        title="Sign Up"
+                        onPress={() => navigation.navigate("Sign Up")}
+                    />
+                </SafeAreaView>
+            </SafeAreaView>
+        </LinearGradient>
+    )
+=======
   return (
     <LinearGradient
       style={styles.border}
@@ -110,6 +140,7 @@ function SignIn({ setSignIn, navigation }) {
       </SafeAreaView>
     </LinearGradient>
   );
+>>>>>>> 9c0a23ac89464e5a0f1357ae3b2c78f6e48491c4
 }
 
 const styles = StyleSheet.create({

client/src/Toggle/Toggle.js

@@ -6,6 +6,7 @@ import {
   SafeAreaView,
   Dimensions,
   Pressable,
+  TouchableOpacity
 } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 //IMPORTS FONTS, THE COMMAND "npx expo install expo-font @expo-google-fonts/jost" SHOULD BE RUN LOCALLy BEFORE
@@ -16,7 +17,11 @@ import {
   Jost_700Bold,
 } from "@expo-google-fonts/jost";
 
+<<<<<<< HEAD:client/src/Start/Start.js
+function Start({navigation}) {
+=======
 function Toggle() {
+>>>>>>> b1d195fff8f78a9f1aa176d95cbf2df8656ab83b:client/src/Toggle/Toggle.js
   //ENSURES THAT FONTS ARE LOADED BEFORE COMPONENTS ARE RENDERED
   let [fontsLoaded] = useFonts({
     Jost_400Regular,
@@ -49,7 +54,8 @@ function Toggle() {
             <Text style={styles.CardBodyText}>Some text here/SLIDER</Text>
           </SafeAreaView>
         </SafeAreaView>
-        <Pressable style={styles.SubmitButton}>
+        <Pressable style={styles.SubmitButton}
+          onPress={() => navigation.navigate("Profile")}>
           <Text style={styles.SubmitText}>SUBMIT</Text>
         </Pressable>
         <SafeAreaView style={styles.DefaultBox}>