Drafted News and Events Page

App.js

@@ -6,21 +6,23 @@ import { createStackNavigator } from "@react-navigation/stack";
 import HomePage from "./src/screens/HomePage";
 import NotFoundPage from "./src/screens/NotFoundPage";
 import MapPage from "./src/screens/MapPage";
+import NewsAndEventsPage from "./src/screens/NewsAndEventsPage";
 
 export default function App() {
   const Stack = createStackNavigator();
 
   return (
     <NavigationContainer>
       <Stack.Navigator
-        initialRouteName="Home"
+        initialRouteName="NewsAndEventsPage" // Temporarily setting this so that we can see our work!!
         screenOptions={{
           headerShown: true, // Set to false to hide header
         }}
       >
         <Stack.Screen name="Home" component={HomePage} />
         <Stack.Screen name="React Native Maps" component={MapPage} />
         <Stack.Screen name="NotFound" component={NotFoundPage} />
+        <Stack.Screen name="NewsAndEventsPage" component={NewsAndEventsPage} />
       </Stack.Navigator>
     </NavigationContainer>
   );

package.json

@@ -6,7 +6,8 @@
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web"
+    "web": "expo start --web",
+    "postInstall": "node postInstall.js"
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.2",

postInstall.js

@@ -0,0 +1,18 @@
+const chalk = require('chalk');
+const { readFile, writeFile, copyFile } = require('fs').promises;
+console.log(chalk.green('here'));
+function log(...args) {
+    console.log(chalk.yellow('[react-native-maps]'), ...args);
+}
+async function reactNativeMaps() {
+    log('📦 Creating web compatibility of react-native-maps using an empty module loaded on web builds');
+    const modulePath = 'node_modules/react-native-maps';
+    await writeFile(`${modulePath}/lib/index.web.js`, 'module.exports = {}', 'utf-8');
+    await copyFile(`${modulePath}/lib/index.d.ts`, `${modulePath}/lib/index.web.d.ts`);
+    const pkg = JSON.parse(await readFile(`${modulePath}/package.json`));
+    pkg['react-native'] = 'lib/index.js';
+    pkg['main'] = 'lib/index.web.js';
+    await writeFile(`${modulePath}/package.json`, JSON.stringify(pkg, null, 2), 'utf-8');
+    log('✅ script ran successfully');
+}
+reactNativeMaps();

src/components/NewsPanel.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import { View, Text, Pressable, StyleSheet, Image } from "react-native";
+
+const NewsPanel = ({ image, title, summary}) => {
+    const handlePress = () => {
+        console.log("I pressed this news");
+    };
+
+    return (
+        <Pressable style={styles.panel} onPress={handlePress}>
+            <Image
+                source={{ uri: image }}
+                style={styles.image}
+            />
+            <View style={styles.textSection}>
+                <Text style={styles.title}>{title}</Text>
+                <Text numberOfLines={2} ellipsizeMode="tail" style={styles.summary}>{summary}</Text>
+            </View>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    panel: {
+        borderWidth: 5,
+        borderColor: '#CDDDDE',
+        backgroundColor: "#065758",
+        paddingBottom: 10,
+        paddingHorizontal: 0,
+        width: '100%',
+        marginVertical: 10,
+        marginHorizontal: 0,
+        borderRadius: 15,
+        height:175
+    },
+    textSection: {
+        paddingTop: 10,
+        paddingHorizontal: 15
+    },
+    title: {
+        fontSize: 20, // Equivalent to text-2xl
+        fontWeight: "bold",
+        color: '#FFFFFF',
+        paddingBottom: 5
+    },
+    summary: {
+        fontSize: 12,
+        color: '#CDDDDE',
+    },
+    image: {
+        width: '100%',
+        height: '50%',
+        objectFit: 'cover',
+        borderTopStartRadius:8,
+        borderTopRightRadius:8
+    }
+});
+
+export default NewsPanel;

src/screens/NewsAndEventsPage.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { ScrollView, View, Text, StyleSheet } from "react-native";
+import { useNavigation } from "@react-navigation/native";
+import NewsPanel from "../components/NewsPanel";
+import CustomButton from "../components/CustomButton";
+
+export default function NewsAndEventsPage() {
+    const navigation = useNavigation();
+
+
+    const handleSubmit = () => {
+        console.log("Going to Home Page...");
+        navigation.navigate("Home");
+    };
+
+    return (
+            <View style={styles.container}>
+                <View style={styles.header}>
+                    <Text style={styles.title}>
+                        <Text style={{color: '#CDDDDE'}}>Campus </Text>
+                        <Text style={{color: '#CFB991'}}>News and Events</Text></Text>
+                </View>
+                <ScrollView style={styles.contentBox}>
+                    <NewsPanel 
+                        title = "Rohit is bad!!!!!!" 
+                        summary = "He is not understanding what iim doing" 
+                        image = "https://static2.bigstockphoto.com/1/1/3/large1500/311375767.jpg">
+                    </NewsPanel>
+                    <NewsPanel 
+                        title = "Rohit's Birthday Party" 
+                        summary = "10:27AM | Ross Ade Stadium | Be there or be square! As in I will pick you up and shove you into a CoRec cubicle if you do not show up and give Rohit the attention he deserves!!!!" 
+                        image = "https://www.orangeville.ca/en/things-to-do/resources/Images/Facility%20and%20Parks%20Rentals/Birthday%20Party%20Kids.jpg">
+                    </NewsPanel>
+                    <NewsPanel 
+                        title = "Rohit is evil!!!!!!" 
+                        summary = "He burned down my crop harvest!!! What the heck man? You and your cs180 midterm grade will be cursed for several generations!!!" 
+                        image = "https://img.freepik.com/premium-photo/sad-indian-farmer-sitting-dry-soil-patiently-waiting-rain_846334-2675.jpg">
+                    </NewsPanel>
+                    <NewsPanel 
+                        title = "Rohit is nice :)" 
+                        summary = "He gave my grandmother one THOUSAND dollars???" 
+                        image = "https://www.shutterstock.com/shutterstock/videos/20390998/thumb/1.jpg?ip=x480://media.tenor.com/dtmNkhiWbe4AAAAe/granny-grandma-cash-counting.png">
+                    </NewsPanel>
+                </ScrollView>
+            </View>
+
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "top",
+        backgroundColor: "#FFFFFF", // Equivalent to bg-green-50
+        width: "100%",
+        height: "100%",
+    },
+    header: {
+        paddingTop: 36,
+        paddingHorizontal: 20,
+        display: 'flex',
+        flexDirection: 'row',
+        backgroundColor: '#065758'
+    },
+    buttonOverride: {
+        flex: 1,
+        width: 50
+    },
+    title: {
+        flex: 1,
+        fontSize: 36, // Equivalent to text-2xl
+        fontWeight: "bold",
+        textAlign: "center",
+        marginVertical: 20
+    },
+    contentBox: {
+        paddingVertical: 10,
+        paddingHorizontal: 15,
+        width: '100%'
+    }
+});