From 60d60400ed9b8e6eb967783e9326eb75ee72a2cd Mon Sep 17 00:00:00 2001 From: jonne Date: Thu, 19 Sep 2024 20:01:53 -0400 Subject: [PATCH 1/7] add news and events page, temporarily route home page to news and events page for testing --- App.js | 2 ++ package.json | 3 +- postInstall.js | 18 ++++++++++++ src/screens/HomePage.js | 3 +- src/screens/NewsAndEventsPage.js | 47 ++++++++++++++++++++++++++++++++ 5 files changed, 71 insertions(+), 2 deletions(-) create mode 100644 postInstall.js create mode 100644 src/screens/NewsAndEventsPage.js diff --git a/App.js b/App.js index 1886093..ecdea58 100644 --- a/App.js +++ b/App.js @@ -6,6 +6,7 @@ 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(); @@ -21,6 +22,7 @@ export default function App() { + ); diff --git a/package.json b/package.json index cbc833b..b8b591c 100644 --- a/package.json +++ b/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", diff --git a/postInstall.js b/postInstall.js new file mode 100644 index 0000000..cff1dd8 --- /dev/null +++ b/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(); \ No newline at end of file diff --git a/src/screens/HomePage.js b/src/screens/HomePage.js index c2203f0..c9173b6 100644 --- a/src/screens/HomePage.js +++ b/src/screens/HomePage.js @@ -8,7 +8,8 @@ export default function HomePage() { const handleSubmit = () => { console.log("Going to Map Page..."); - navigation.navigate("React Native Maps"); + // navigation.navigate("React Native Maps"); + navigation.navigate("NewsAndEventsPage") }; return ( diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js new file mode 100644 index 0000000..dd4fdd4 --- /dev/null +++ b/src/screens/NewsAndEventsPage.js @@ -0,0 +1,47 @@ +import * as React from "react"; +import { View, Text, StyleSheet } from "react-native"; +import { useNavigation } from "@react-navigation/native"; +import CustomButton from "../components/CustomButton"; + +export default function NewsAndEventsPage() { + const navigation = useNavigation(); + + const handleSubmit = () => { + console.log("Going to Map Page..."); + navigation.navigate("React Native Maps"); + }; + + return ( + + ASP.NET + React Native Demo Project + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#F0FDF4", // Equivalent to bg-green-50 + width: "100%", + height: "100%", + }, + title: { + fontSize: 24, // Equivalent to text-2xl + fontWeight: "bold", + textAlign: "center", + }, + buttonContainer: { + alignItems: "center", + justifyContent: "center", + marginTop: 16, // Equivalent to mt-4 + }, +}); From 7c682d88f19971cd6980019da0d0d0d951b5e65c Mon Sep 17 00:00:00 2001 From: jonne Date: Thu, 19 Sep 2024 20:14:26 -0400 Subject: [PATCH 2/7] add NewsPanel to NewsAndEventsPage --- src/components/NewsPanel.js | 42 ++++++++++++++++++++++++++++++++ src/screens/NewsAndEventsPage.js | 10 +++----- 2 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 src/components/NewsPanel.js diff --git a/src/components/NewsPanel.js b/src/components/NewsPanel.js new file mode 100644 index 0000000..e431563 --- /dev/null +++ b/src/components/NewsPanel.js @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import { Text, Pressable, StyleSheet, Image } from "react-native"; + +const NewsPanel = ({ image, title, summary}) => { + const handlePress = () => { + console.log("I pressed this news"); + }; + + return ( + + + {title} + {summary} + + ); +}; + +const styles = StyleSheet.create({ + button: { + backgroundColor: "#38a169", + width: 240, + paddingVertical: 10, + paddingHorizontal: 50, + borderRadius: 7, + alignItems: "center", + justifyContent: "center", + }, + buttonText: { + fontWeight: "500", + color: "#ffffff", + fontSize: 18, + textAlign: "center", + }, + text: { + fontSize: 12, // Equivalent to text-2xl + } +}); + +export default NewsPanel; diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index dd4fdd4..624131f 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -2,6 +2,7 @@ import * as React from "react"; import { View, Text, StyleSheet } from "react-native"; import { useNavigation } from "@react-navigation/native"; import CustomButton from "../components/CustomButton"; +import NewsPanel from "../components/NewsPanel"; export default function NewsAndEventsPage() { const navigation = useNavigation(); @@ -14,13 +15,8 @@ export default function NewsAndEventsPage() { return ( ASP.NET + React Native Demo Project - - - + + ); } From 0388dceaa3a00988a1cb4c685054002a73ed2667 Mon Sep 17 00:00:00 2001 From: jonne Date: Thu, 19 Sep 2024 20:21:43 -0400 Subject: [PATCH 3/7] change home page to news and events page temporarily --- App.js | 2 +- src/screens/HomePage.js | 3 +-- src/screens/NewsAndEventsPage.js | 5 ----- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/App.js b/App.js index ecdea58..9aa6466 100644 --- a/App.js +++ b/App.js @@ -14,7 +14,7 @@ export default function App() { return ( { console.log("Going to Map Page..."); - // navigation.navigate("React Native Maps"); - navigation.navigate("NewsAndEventsPage") + navigation.navigate("React Native Maps"); }; return ( diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index 624131f..99c968b 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -7,11 +7,6 @@ import NewsPanel from "../components/NewsPanel"; export default function NewsAndEventsPage() { const navigation = useNavigation(); - const handleSubmit = () => { - console.log("Going to Map Page..."); - navigation.navigate("React Native Maps"); - }; - return ( ASP.NET + React Native Demo Project From 1df080f6dc23f4fd6c02f8aa2bb565c5ad3b31c6 Mon Sep 17 00:00:00 2001 From: jonne Date: Thu, 19 Sep 2024 20:30:38 -0400 Subject: [PATCH 4/7] add styles for title and summary --- src/components/NewsPanel.js | 24 +++++++++--------------- src/screens/NewsAndEventsPage.js | 8 +------- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/src/components/NewsPanel.js b/src/components/NewsPanel.js index e431563..86b7e4f 100644 --- a/src/components/NewsPanel.js +++ b/src/components/NewsPanel.js @@ -7,35 +7,29 @@ const NewsPanel = ({ image, title, summary}) => { }; return ( - + - {title} - {summary} + {title} + {summary} ); }; const styles = StyleSheet.create({ - button: { + panel: { backgroundColor: "#38a169", - width: 240, paddingVertical: 10, paddingHorizontal: 50, - borderRadius: 7, - alignItems: "center", - justifyContent: "center", }, - buttonText: { - fontWeight: "500", - color: "#ffffff", - fontSize: 18, - textAlign: "center", + title: { + fontSize: 20, // Equivalent to text-2xl + fontWeight: "semibold" }, - text: { - fontSize: 12, // Equivalent to text-2xl + summary: { + fontSize: 12 } }); diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index 99c968b..217fe72 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -1,7 +1,6 @@ import * as React from "react"; import { View, Text, StyleSheet } from "react-native"; import { useNavigation } from "@react-navigation/native"; -import CustomButton from "../components/CustomButton"; import NewsPanel from "../components/NewsPanel"; export default function NewsAndEventsPage() { @@ -9,7 +8,7 @@ export default function NewsAndEventsPage() { return ( - ASP.NET + React Native Demo Project + News and Events @@ -30,9 +29,4 @@ const styles = StyleSheet.create({ fontWeight: "bold", textAlign: "center", }, - buttonContainer: { - alignItems: "center", - justifyContent: "center", - marginTop: 16, // Equivalent to mt-4 - }, }); From 19d37117811d32e49df310550b92ef39c38a16d9 Mon Sep 17 00:00:00 2001 From: Daniel Ng Date: Tue, 24 Sep 2024 19:53:36 -0400 Subject: [PATCH 5/7] adjusted panel size, width, padding, margins to better reflect figma design. created multiple panels in the news and events page and created a scrollview to handle many events --- src/components/NewsPanel.js | 26 ++++++++++++++++++++------ src/screens/NewsAndEventsPage.js | 24 +++++++++++++++++------- 2 files changed, 37 insertions(+), 13 deletions(-) diff --git a/src/components/NewsPanel.js b/src/components/NewsPanel.js index 86b7e4f..bad3a60 100644 --- a/src/components/NewsPanel.js +++ b/src/components/NewsPanel.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import { Text, Pressable, StyleSheet, Image } from "react-native"; +import { View, Text, Pressable, StyleSheet, Image } from "react-native"; const NewsPanel = ({ image, title, summary}) => { const handlePress = () => { @@ -10,10 +10,12 @@ const NewsPanel = ({ image, title, summary}) => { - {title} - {summary} + + {title} + {summary} + ); }; @@ -21,8 +23,15 @@ const NewsPanel = ({ image, title, summary}) => { const styles = StyleSheet.create({ panel: { backgroundColor: "#38a169", - paddingVertical: 10, - paddingHorizontal: 50, + paddingBottom: 10, + paddingHorizontal: 0, + width: '100%', + marginVertical: 10, + marginHorizontal: 0 + }, + textSection: { + paddingVertical: 15, + paddingHorizontal: 20 }, title: { fontSize: 20, // Equivalent to text-2xl @@ -30,6 +39,11 @@ const styles = StyleSheet.create({ }, summary: { fontSize: 12 + }, + image: { + width: '100%', + height: 125, + objectFit: 'cover' } }); diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index 217fe72..c756d95 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -1,5 +1,5 @@ import * as React from "react"; -import { View, Text, StyleSheet } from "react-native"; +import { ScrollView, View, Text, StyleSheet } from "react-native"; import { useNavigation } from "@react-navigation/native"; import NewsPanel from "../components/NewsPanel"; @@ -7,11 +7,20 @@ export default function NewsAndEventsPage() { const navigation = useNavigation(); return ( - - News and Events - - - + + News and Events + + + + + + + + + + + + ); } @@ -19,7 +28,7 @@ const styles = StyleSheet.create({ container: { flex: 1, alignItems: "center", - justifyContent: "center", + justifyContent: "top", backgroundColor: "#F0FDF4", // Equivalent to bg-green-50 width: "100%", height: "100%", @@ -28,5 +37,6 @@ const styles = StyleSheet.create({ fontSize: 24, // Equivalent to text-2xl fontWeight: "bold", textAlign: "center", + marginVertical: 20 }, }); From e8ba1c044dd6e4746096586bc186a6bc3e9bbdd7 Mon Sep 17 00:00:00 2001 From: Daniel Ng Date: Tue, 24 Sep 2024 20:19:15 -0400 Subject: [PATCH 6/7] added a back to home button (appears too big because the component width is fixed) --- src/screens/NewsAndEventsPage.js | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index c756d95..5d369b7 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -2,13 +2,27 @@ 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 ( - News and Events + + + News and Events + @@ -33,7 +47,16 @@ const styles = StyleSheet.create({ width: "100%", height: "100%", }, + header: { + display: 'flex', + flexDirection: 'row' + }, + buttonOverride: { + flex: 1, + width: 50 + }, title: { + flex: 1, fontSize: 24, // Equivalent to text-2xl fontWeight: "bold", textAlign: "center", From 503b6cd1f941a9e2e6fc9bab8bf835621724a558 Mon Sep 17 00:00:00 2001 From: Daniel Ng Date: Thu, 3 Oct 2024 20:14:10 -0400 Subject: [PATCH 7/7] styled news and events page and panels to reflect current FIGMA design --- src/components/NewsPanel.js | 27 ++++++++++++------- src/screens/NewsAndEventsPage.js | 45 ++++++++++++++++++++++---------- 2 files changed, 49 insertions(+), 23 deletions(-) diff --git a/src/components/NewsPanel.js b/src/components/NewsPanel.js index bad3a60..3be36bb 100644 --- a/src/components/NewsPanel.js +++ b/src/components/NewsPanel.js @@ -14,7 +14,7 @@ const NewsPanel = ({ image, title, summary}) => { /> {title} - {summary} + {summary} ); @@ -22,28 +22,37 @@ const NewsPanel = ({ image, title, summary}) => { const styles = StyleSheet.create({ panel: { - backgroundColor: "#38a169", + borderWidth: 5, + borderColor: '#CDDDDE', + backgroundColor: "#065758", paddingBottom: 10, paddingHorizontal: 0, width: '100%', marginVertical: 10, - marginHorizontal: 0 + marginHorizontal: 0, + borderRadius: 15, + height:175 }, textSection: { - paddingVertical: 15, - paddingHorizontal: 20 + paddingTop: 10, + paddingHorizontal: 15 }, title: { fontSize: 20, // Equivalent to text-2xl - fontWeight: "semibold" + fontWeight: "bold", + color: '#FFFFFF', + paddingBottom: 5 }, summary: { - fontSize: 12 + fontSize: 12, + color: '#CDDDDE', }, image: { width: '100%', - height: 125, - objectFit: 'cover' + height: '50%', + objectFit: 'cover', + borderTopStartRadius:8, + borderTopRightRadius:8 } }); diff --git a/src/screens/NewsAndEventsPage.js b/src/screens/NewsAndEventsPage.js index 5d369b7..e60af13 100644 --- a/src/screens/NewsAndEventsPage.js +++ b/src/screens/NewsAndEventsPage.js @@ -16,21 +16,30 @@ export default function NewsAndEventsPage() { return ( - - News and Events + + Campus + News and Events - - + + - + - + - + @@ -43,13 +52,16 @@ const styles = StyleSheet.create({ flex: 1, alignItems: "center", justifyContent: "top", - backgroundColor: "#F0FDF4", // Equivalent to bg-green-50 + backgroundColor: "#FFFFFF", // Equivalent to bg-green-50 width: "100%", height: "100%", }, header: { + paddingTop: 36, + paddingHorizontal: 20, display: 'flex', - flexDirection: 'row' + flexDirection: 'row', + backgroundColor: '#065758' }, buttonOverride: { flex: 1, @@ -57,9 +69,14 @@ const styles = StyleSheet.create({ }, title: { flex: 1, - fontSize: 24, // Equivalent to text-2xl + fontSize: 36, // Equivalent to text-2xl fontWeight: "bold", textAlign: "center", marginVertical: 20 }, + contentBox: { + paddingVertical: 10, + paddingHorizontal: 15, + width: '100%' + } });