Map View Event

app/App.tsx

@@ -1,20 +1,15 @@
-import { StatusBar } from "expo-status-bar";
-import { StyleSheet, Text, View } from "react-native";
+import React from 'react';
+// import EventCard from './components/EventCard';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import AppStack from "./components/Tabs";
+
+const Stack = createNativeStackNavigator();
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <NavigationContainer>
+      <AppStack></AppStack>
+    </NavigationContainer>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "#fff",
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

app/app.json

@@ -11,18 +11,25 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.app"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.anonymous.app"
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      "expo-router"
+    ]
   }
 }

app/components/EventCard.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { Dimensions, Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import BACK_BTN from "../assets/images/back_btn.png";
+import CHALLENGE_ICON from "../assets/images/challenge_icon.png";
+
+const window = Dimensions.get("window");
+
+
+export default function EventCard(props: {route: any}) {
+    const [challengeData, setEventData] = useState<string[]>([]);
+
+    return (
+        <ScrollView contentContainerStyle={styles.container}>
+            <Image style={styles.img_container} source={{url: props.route.params.eventData.featureImage}}></Image>
+            <Pressable style={styles.back_btn} onPress={() => {props.route.params.navigator.navigation.navigate("Tabs")}}>
+                <Image source={BACK_BTN}></Image>
+            </Pressable>
+
+            <View style={styles.description_container}>
+                <Text style={styles.titleText}>{props.route.params.eventData.title}</Text>
+                <Text style={{...styles.baseText, marginVertical: 10, color: "#3B7ECB"}}>Hosted by <Text style={{fontWeight:"700"}}>Rice University</Text></Text>
+
+                <View style={styles.information_container}>
+                    <View>
+                        <Text style={styles.baseText}>{(new Date(props.route.params.eventData.date)).toLocaleDateString()}</Text>
+                        <Text style={{...styles.baseText, marginVertical: 3}}>Rice University</Text>
+                        <Text style={styles.baseText}>{props.route.params.eventData.link}</Text>
+                    </View>
+                    <Pressable style={styles.registerBtn}>
+                        <Text style={{...styles.btnText, color: "white"}}>Register</Text>
+                    </Pressable>
+                </View>
+            </View>
+
+
+            <View style={styles.participant_container}>
+                <View style={{flexDirection: "row", justifyContent: "space-between"}}>
+                    <Text style={styles.headerText}>23 Participating</Text>
+                    <Pressable><Text style={{fontSize: 14, fontWeight: "400", color: "#00426D"}}>See leaderboard</Text></Pressable>
+
+                </View>
+                <View style={{flexDirection: "row"}}>
+                    {[1,1,1,1,1,1,1].map((i) => {
+                        return (
+                            <View style={styles.circle_frame}></View>
+                        )
+                    })}
+                </View>
+            </View>
+
+
+            <View style={styles.challenge_container}>
+                <Text style={{...styles.headerText}}>Challenges</Text>
+                {["Run 5k under 25 minutes","Invite 4 friends"].map((challenge_text) => {
+                    return(
+                        <View style={styles.challenge_box}>
+                            <Image source={CHALLENGE_ICON} style={{marginLeft: 20}}></Image>
+                            <Text style={styles.challenge_text}>{challenge_text}</Text>
+                        </View>
+                    )
+                })}
+            </View>
+
+
+            <View style={styles.event_description_container}>
+                <Text style={styles.headerText}>Event Description</Text>
+                <Text style={styles.baseText}>{props.route.params.description}</Text>
+            </View>
+        </ScrollView>
+    );
+}
+const styles = StyleSheet.create({
+    container: {
+        alignContent: "center",
+        alignItems: "center"
+    },
+    img_container: {
+        height: window.height * 0.23,
+        width: window.width
+    },
+    description_container: {
+        flexDirection: "column",
+        height: "auto",
+        width: window.width * 0.9,
+        marginTop: 15,
+
+    },
+    information_container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    participant_container: {
+        height: "auto",
+        width: window.width * 0.9,
+        flexDirection: "column",
+        marginVertical: 15,
+    },
+    challenge_container: {
+        height: "auto",
+        width: window.width * 0.9,
+    },
+    baseText: {
+        fontSize: 15, 
+        fontWeight: "400", 
+        color: "#00426D",
+
+    },
+    headerText: {
+        fontSize: 18, 
+        fontWeight: "600", 
+        color: "#00426D", 
+        marginBottom: 10
+    },
+    titleText: {
+        fontWeight: "600",
+        fontSize: 27,
+        color: "#00426D",
+        flex: 1
+    },
+    registerBtn: {
+        height: 45,
+        width: 123,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: "#00426D",
+        borderRadius: 6,
+        bottom: -13
+    },
+    btnText: {
+        fontWeight: "700",
+        fontSize: 18
+    },
+    circle_frame: {
+        width: (window.width*0.9)/7-7,
+        height: (window.width*0.9)/7-7,
+        borderRadius: ((window.width*0.9)/7-7)/2,
+        backgroundColor: "black",
+        marginRight: 8
+     },
+     challenge_text: {
+        fontWeight: "500",
+        fontSize: 18,
+        color: "#00426D",
+        marginLeft: 20
+     },
+     challenge_box: {
+        backgroundColor: "white",
+        marginBottom: 9,
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: 4,
+        height: 67,
+        shadowColor: "#333",
+        shadowOffset: {
+            width: 4,
+            height: 4
+        },
+        shadowOpacity: 0.15,
+        shadowRadius: 5,
+     },
+     event_description_container: {
+        height: "auto",
+        width: window.width * 0.9,
+        marginTop: 10
+     },
+     description_text: {
+        fontSize: 20, 
+        fontWeight: "600", 
+        color: "#00426D",
+
+     },
+     back_btn: {
+        position: "absolute",
+        height: "auto",
+        width: "auto",
+        left: "3%",
+        top: "6%"
+     }
+
+});

app/components/EventSearchBar.tsx

@@ -0,0 +1,71 @@
+import { useNavigation } from '@react-navigation/native';
+import { SearchBar } from "@rneui/themed";
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+export default function EventSearchBar(props: {container: object}) {
+    const navigation = useNavigation()
+    return(
+        <View style={props.container}>
+            <SearchBar
+                inputStyle={{backgroundColor: 'white'}}
+                containerStyle={styles.searchBarContainer}
+                inputContainerStyle={{backgroundColor:"white", borderRadius: 10}}
+                placeholderTextColor={'#404040'}
+                placeholder={'Search for events'}
+                showCancel={false}>
+            </SearchBar>
+            <View style={styles.eventViewContainer}>
+                <Pressable style={styles.displayMode} onPress={() => {}}><Text style={styles.textMode}>Calendar</Text></Pressable>
+                <Pressable style={styles.displayMode} onPress={() => {}}><Text style={styles.textMode}>List</Text></Pressable>
+                <Pressable style={styles.displayMode} onPress={() => {}}><Text style={styles.textMode}>Map</Text></Pressable>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    searchBarContainer: {
+        backgroundColor: '#00426E', 
+        width: "90%", 
+        marginTop: "12%", 
+        borderRadius: 0, 
+        borderTopColor: "#00426E",
+        borderBottomColor: "#00426E"
+
+    },
+    eventViewContainer: {
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: "#00426D",
+        justifyContent: "space-between",
+        marginTop: 10
+    },
+    displayMode: {
+        flex: 1,
+        backgroundColor: "#00426D",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 50,
+        height: 37,
+        marginHorizontal: 8,
+        borderRadius: 6,
+        borderWidth: 2,
+        borderColor: "#D9D9D9"
+    },
+    textMode: {
+        fontWeight: "500",
+        fontSize: 18,
+        color: "#D9D9D9",
+
+
+    },
+    tabNavigationContainer: {
+        width: '100%',
+        height: "9%",
+        flexDirection: "row",
+        backgroundColor: "white",
+        justifyContent: "space-around",
+        marginHorizontal: 10,
+      }
+});