Add Events Screen

App.js

@@ -7,19 +7,14 @@ import ProfileScreen from './screens/ProfileScreen';
 import SearchScreen from './screens/SearchScreen';
 import FeedScreen from './screens/FeedScreen';
 import NotifScreen from './screens/NotifScreen';
+import EventScreenNav from './screens/EventScreenNav'
 
 
-function DefaultScreen() {
-  return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>Default!</Text>
-    </View>
-  );
-}
-
 
 const Tab = createBottomTabNavigator();
 
+
+
 export default function App() {
   return (
     <NavigationContainer>
@@ -35,8 +30,8 @@ export default function App() {
               case 'Search':
                 iconName = 'ios-search';
                 break;
-              case 'Add':
-                iconName = 'ios-add-circle';
+              case 'Events':
+                iconName = 'ios-disc';
                 break;
               case 'Notifications':
                 iconName = 'ios-notifications';
@@ -61,10 +56,11 @@ export default function App() {
       >
         <Tab.Screen name="Feed" component={ FeedScreen } />
         <Tab.Screen name="Search" component={ SearchScreen } />
-        <Tab.Screen name="Add" component={ DefaultScreen } />
+        <Tab.Screen name="Events" component={ EventScreenNav } />
         <Tab.Screen name="Notifications" component={ NotifScreen } />
         <Tab.Screen name="Profile" component={ ProfileScreen } />
       </Tab.Navigator>
+
     </NavigationContainer>
   );
 }

package.json

@@ -12,6 +12,7 @@
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/bottom-tabs": "^5.9.2",
     "@react-navigation/native": "^5.7.6",
+    "@react-navigation/stack": "^5.9.3",
     "expo": "~39.0.2",
     "expo-status-bar": "~1.0.2",
     "react": "16.13.1",

screens/ActiveEventsScreen.js

@@ -0,0 +1,25 @@
+import { Button, View } from 'react-native';
+import React from 'react';
+import { StyleSheet, Text, SafeAreaView } from 'react-native';
+
+export default function App( {navigation} ) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Button
+            title="Add"
+            onPress={() => navigation.navigate('Add')}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FDFDFD',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

screens/AddForm.js

@@ -0,0 +1,20 @@
+import { Button, View } from 'react-native';
+import React from 'react';
+import { StyleSheet, Text, SafeAreaView } from 'react-native';
+
+export default function App( {navigation} ) {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text>Add form</Text>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FDFDFD',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

screens/EventScreenNav.js

@@ -0,0 +1,29 @@
+import { StatusBar } from 'expo-status-bar';
+import React from 'react';
+import { StyleSheet, Text, SafeAreaView, View } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+
+import ActiveEventsScreen from './ActiveEventsScreen'
+import AddForm from './AddForm'
+
+
+const Stack = createStackNavigator();
+
+
+export default function App() {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen name='Active Events' component={ ActiveEventsScreen }/>
+            <Stack.Screen name='Add' component={ AddForm }/>
+        </Stack.Navigator>        
+    );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#FDFDFD',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});