About page and fixing some ESLint problems by import react package

src/mobile/package.json

@@ -15,19 +15,19 @@
     "@react-navigation/native": "6.0.7",
     "@react-navigation/native-stack": "6.3.0",
     "expo": "44.0.6",
-    "expo-status-bar": "1.2.0",
-    "expo-updates": "0.11.6",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-native": "0.67.3",
+    "expo-status-bar": "~1.2.0",
+    "expo-updates": "~0.11.6",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-native": "0.64.3",
     "react-native-elements": "3.4.2",
     "react-native-safe-area-context": "3.3.2",
-    "react-native-screens": "3.10.2",
-    "react-native-web": "0.17.6"
+    "react-native-screens": "~3.10.1",
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
     "@senecacdot/eslint-config-telescope": "1.0.0",
-    "@babel/core": "7.17.5"
+    "@babel/core": "^7.12.9"
   },
   "private": true
 }

src/mobile/src/App.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { registerRootComponent } from 'expo';
 

src/mobile/src/components/Banner/Banner.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import BannerButtons from './BannerButtons';
 import BannerText from './BannerText';
@@ -16,7 +17,6 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-    boxSizing: 'border-box',
     margin: 0,
     backgroundColor: '#000000',
     opacity: 0.8,

src/mobile/src/navigation/Navigation.jsx

@@ -5,7 +5,7 @@ import { MaterialIcons, Entypo, EvilIcons } from '@expo/vector-icons';
 import SearchScreen from '../screens/SearchScreen';
 import HomeScreen from '../screens/HomeScreen';
 import SignUpScreen from '../screens/SignUpScreen';
-import ContactScreen from '../screens/ContactScreen';
+import AboutScreen from '../screens/AboutScreen';
 
 const Tab = createBottomTabNavigator();
 
@@ -54,7 +54,7 @@ const Navigation = () => {
       />
       <Tab.Screen
         name="Contact"
-        component={ContactScreen}
+        component={AboutScreen}
         options={{
           tabBarIcon: () => (
             <View style={styles.navBarIcon}>

src/mobile/src/screens/AboutScreen.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ScrollView, Text, StyleSheet, Linking, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  scrollView: {
+    width: '80%',
+  },
+  header: {
+    color: '#A0D1FB',
+    fontWeight: 'bold',
+    paddingVertical: 10,
+  },
+  aboutHeader: {
+    fontSize: 32,
+  },
+  paragraphHeader: {
+    fontSize: 22,
+  },
+  hyperlink: {
+    color: 'blue',
+    textDecorationLine: 'underline',
+  },
+  quote: {
+    fontStyle: 'italic',
+    width: '80%',
+    paddingVertical: 10,
+  },
+});
+
+const AboutScreen = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
+        <Text style={[styles.header, styles.aboutHeader]}>About</Text>
+        <Text>
+          One of the key features of Seneca's open source involvement has been the emphasis on
+          sharing what we're working on, teaching, and learning through blogging. We believe that
+          one of the most rewarding parts of learning to work in the open source community is
+          discovering that one can become part of the fabric of the web, find a voice, and build a
+          following.{'\n\n'}
+          We also believe that reading each other's blog posts is important. In the blog posts of
+          our colleagues, we find that we are not alone in our struggles to make things work, our
+          interests in various topics, and that imposter syndrome isn't something unique to "me."
+          {'\n\n'}
+          To better enable the discovery of blogs within our community, we set up an open blog
+          <Text
+            style={styles.hyperlink}
+            onPress={() => Linking.openURL('https://en.wikipedia.org/wiki/Planet_(software)')}
+          >
+            {' '}
+            Planet:
+          </Text>{' '}
+          an aggregated feed of blog posts from Seneca faculty and students working on open source
+          in a single page. Our old blog Planet used to live at
+          <Text
+            style={styles.hyperlink}
+            onPress={() => Linking.openURL('https://matrix.senecacollege.ca/')}
+          >
+            {' '}
+            http://zenit.senecac.on.ca/~chris.tyler/planet/
+          </Text>
+          , and was run faithfully by Chris Tyler for more than a decade. We've made a re-creation
+          of what it looked like at{' '}
+          <Text
+            style={styles.hyperlink}
+            onPress={() => Linking.openURL('http://telescope.cdot.systems/planet')}
+          >
+            {' '}
+            http://telescope.cdot.systems/planet
+          </Text>{' '}
+          if you want to see it..
+        </Text>
+        <Text style={[styles.header, styles.paragraphHeader]}>What is a Planet?</Text>
+        <View style={[styles.container]}>
+          <Text style={styles.quote}>
+            Planet is a feed aggregator application designed to collect posts from the weblogs of
+            members of an Internet community and display them on a single page. Planet runs on a web
+            server. It creates pages with entries from the original feeds in chronological order,
+            most recent entries first. --Wikipedia
+          </Text>
+          <Text>
+            In the early 2000s, before the rise of social media apps like Twitter and Facebook,
+            Planet solved an important problem in the free and open source community. It used
+            various "feed" technologies (RSS, Atom, CDF) to allow blog posts from different
+            platforms to be aggregated into a single page that was constantly updated with the
+            latest posts by people within a particular community. {'\n\n'}
+            Written in Python by Jeff Waugh and Scott James Remnant, Planet could be configured with
+            a list of blog feeds and an HTML template. It would use these to dynamically generate a
+            site with posts in chronological order from the specified feeds.
+          </Text>
+        </View>
+        <Text style={[styles.header, styles.paragraphHeader]}>In Search of a New Planet</Text>
+        <Text>
+          Our original Planet was shutdown in January 2020. The software we use was last updated 13
+          years ago. While the underlying code has drifted further into the past, our needs have
+          moved forward. Maintaining the existing system, especially with the number of students
+          involved in open source at Seneca, has become too difficult. Our current site often
+          breaks, and needs manual interventions on a regular basis. Going forward, we need a new
+          planet to call home.{'\n\n'}
+          We have decided it is time to consider moving to a new system. Unfortunately, almost every
+          system that came to replace Planet has itself become unmaintained.{'\n\n'}
+          Rather than try to find an existing solution, we have instead decided to try and create
+          one. Because we need this software, we also feel that we should create and maintain it.
+          And, since our need for a Planet comes out of our collective work on open source, we think
+          that creating it together as open source would be the most desireable path forward.
+        </Text>
+        <Text style={[styles.header, styles.paragraphHeader]}>Trying to Define Our Planet</Text>
+        <Text>
+          We have learned a number of things over the past decade running our own planet. We've also
+          watched as social media and modern technologies have reshaped our expectations for what a
+          system like this can and should be.{'\n\n'}
+          It's not 100% clear what we need to build, which is part of the fun. It is our hope that
+          you will leave a mark on this project, and bring your own ideas, experience, and code to
+          the task of defining our planet.
+        </Text>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+export default AboutScreen;

src/mobile/src/screens/HomeScreen.jsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet } from 'react-native';
-import Banner from '../components/Banner/Banner';
+import React from 'react';
+import { StyleSheet } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import Banner from '../components/Banner/Banner';
 
 const styles = StyleSheet.create({
   container: {

src/mobile/src/screens/SearchScreen.jsx

@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import React from 'react';
+import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 const SearchScreen = () => {

src/mobile/src/screens/SignUpScreen.jsx

@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import React from 'react';
+import { Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
 const SignUpScreen = () => {