From 44a50ac8760a406ea269c18a41006226cc02cef3 Mon Sep 17 00:00:00 2001
From: Akshay Thakur <78326649+akshaynthakur@users.noreply.github.com>
Date: Mon, 2 Oct 2023 16:56:25 -0700
Subject: [PATCH 1/2] [nav] Add MyContentStackNavigator and remove basic nav on
 HomeScreen #13

---
 App.tsx                                       | 51 +----------------
 assets/icons.tsx                              |  2 +
 package-lock.json                             | 54 ++++++++++++++++++
 package.json                                  |  1 +
 src/navigation/TabNavigator.tsx               | 57 +++++++++++++++++++
 .../stacks/MyContentStackNavigator.tsx        | 20 +++++++
 src/screens/HomeScreen.tsx                    | 18 +-----
 src/screens/MyContent.tsx                     | 24 ++++++++
 src/screens/SearchScreen.tsx                  | 10 ++++
 src/types/navigation.tsx                      | 10 ++++
 src/types/types.tsx                           |  6 --
 11 files changed, 182 insertions(+), 71 deletions(-)
 create mode 100644 src/navigation/TabNavigator.tsx
 create mode 100644 src/navigation/stacks/MyContentStackNavigator.tsx
 create mode 100644 src/screens/MyContent.tsx
 create mode 100644 src/screens/SearchScreen.tsx
 create mode 100644 src/types/navigation.tsx

diff --git a/App.tsx b/App.tsx
index cfd8941a..3cc577e7 100644
--- a/App.tsx
+++ b/App.tsx
@@ -1,57 +1,10 @@
-import { Ionicons } from '@expo/vector-icons';
-import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
 import { NavigationContainer } from '@react-navigation/native';
-import HomeScreen from './src/screens/HomeScreen';
-import StoryScreen from './src/screens/StoryScreen';
-import ToastScreen from './src/screens/ToastScreen';
-import { RootStackParamsList } from './src/types/types';
-
-const Tab = createMaterialBottomTabNavigator<RootStackParamsList>();
-
-function HomeIcon({ color }: { color: string }) {
-  return <Ionicons name="home-outline" color={color} size={26} />;
-}
-
-function StoryIcon({ color }: { color: string }) {
-  return <Ionicons name="document-outline" color={color} size={26} />;
-}
-
-function ToastIcon({ color }: { color: string }) {
-  return <Ionicons name="notifications-outline" color={color} size={26} />;
-}
+import TabNavigator from './src/navigation/TabNavigator';
 
 export default function App() {
   return (
     <NavigationContainer>
-      <Tab.Navigator
-        initialRouteName="Home"
-        barStyle={{ backgroundColor: '#E5E4E2' }}
-      >
-        <Tab.Screen
-          name="Home"
-          component={HomeScreen}
-          options={{
-            tabBarLabel: 'Home',
-            tabBarIcon: HomeIcon,
-          }}
-        />
-        <Tab.Screen
-          name="Story"
-          component={StoryScreen}
-          options={{
-            tabBarLabel: 'Story',
-            tabBarIcon: StoryIcon,
-          }}
-        />
-        <Tab.Screen
-          name="Toast"
-          component={ToastScreen}
-          options={{
-            tabBarLabel: 'Toast',
-            tabBarIcon: ToastIcon,
-          }}
-        />
-      </Tab.Navigator>
+      <TabNavigator />
     </NavigationContainer>
   );
 }
diff --git a/assets/icons.tsx b/assets/icons.tsx
index bc0d2686..4c72dac0 100644
--- a/assets/icons.tsx
+++ b/assets/icons.tsx
@@ -3,11 +3,13 @@ import React from 'react';
 
 export type IconType =
   | 'home_outline'
+  | 'search_outline'
   | 'document_outline'
   | 'notifications_outline';
 
 const IconSvgs: Record<IconType, React.ReactElement> = {
   home_outline: <Ionicons name="home-outline" size={23} />,
+  search_outline: <Ionicons name="search-outline" size={23} />,
   document_outline: <Ionicons name="document-outline" size={23} />,
   notifications_outline: <Ionicons name="notifications-outline" size={23} />,
 };
diff --git a/package-lock.json b/package-lock.json
index 1567fb15..2e875b78 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@react-navigation/material-bottom-tabs": "^6.2.17",
         "@react-navigation/native": "^6.1.8",
         "@react-navigation/native-stack": "^6.9.14",
+        "@react-navigation/stack": "^6.3.18",
         "axios": "^1.5.0",
         "expo": "~49.0.11",
         "expo-status-bar": "~1.6.0",
@@ -2047,6 +2048,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@egjs/hammerjs": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
+      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
+      "peer": true,
+      "dependencies": {
+        "@types/hammerjs": "^2.0.36"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -6187,6 +6200,24 @@
         "nanoid": "^3.1.23"
       }
     },
+    "node_modules/@react-navigation/stack": {
+      "version": "6.3.18",
+      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.3.18.tgz",
+      "integrity": "sha512-jAXneaLAs57xvyMFkebEyGCZDyz90KnaN7fM9f5Bu+Gx3KnoppdNfT4drpmN/f5f32L0eXS4aRAvuDrFT1mFfw==",
+      "dependencies": {
+        "@react-navigation/elements": "^1.3.19",
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-gesture-handler": ">= 1.0.0",
+        "react-native-safe-area-context": ">= 3.0.0",
+        "react-native-screens": ">= 3.0.0"
+      }
+    },
     "node_modules/@segment/loosely-validate-event": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@segment/loosely-validate-event/-/loosely-validate-event-2.0.0.tgz",
@@ -6235,6 +6266,12 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.42",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.42.tgz",
+      "integrity": "sha512-Xxk14BrwHnGi0xlURPRb+Y0UNn2w3cTkeFm7pKMsYOaNgH/kabbJLhcBoNIodwsbTz7Z8KcWjtDvlGH0nc0U9w==",
+      "peer": true
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -14648,6 +14685,23 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-gesture-handler": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.13.1.tgz",
+      "integrity": "sha512-hW454X7sjuiBN+lobqw63pmT3boAmTl5OP6zQLq83iEe4T6PcHZ9lxzgCrebtgmutY8cJfq9rM2dOUVh9WBcww==",
+      "peer": true,
+      "dependencies": {
+        "@egjs/hammerjs": "^2.0.17",
+        "hoist-non-react-statics": "^3.3.0",
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-ionicons": {
       "version": "4.6.5",
       "resolved": "https://registry.npmjs.org/react-native-ionicons/-/react-native-ionicons-4.6.5.tgz",
diff --git a/package.json b/package.json
index 84cf2be5..6adc4f7c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",
     "@react-navigation/native-stack": "^6.9.14",
+    "@react-navigation/stack": "^6.3.18",
     "axios": "^1.5.0",
     "expo": "~49.0.11",
     "expo-status-bar": "~1.6.0",
diff --git a/src/navigation/TabNavigator.tsx b/src/navigation/TabNavigator.tsx
new file mode 100644
index 00000000..aa225797
--- /dev/null
+++ b/src/navigation/TabNavigator.tsx
@@ -0,0 +1,57 @@
+import { Ionicons } from '@expo/vector-icons';
+import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
+import { ReactElement } from 'react';
+import HomeScreen from '../screens/HomeScreen';
+import SearchScreen from '../screens/SearchScreen';
+import { RootStackParamsList } from '../types/navigation';
+import MyContentStackNavigator from './stacks/MyContentStackNavigator';
+
+function HomeIcon({ color }: { color: string }) {
+  return <Ionicons name="home-outline" color={color} size={26} />;
+}
+
+function SearchIcon({ color }: { color: string }) {
+  return <Ionicons name="search-outline" color={color} size={26} />;
+}
+
+function MyContentIcon({ color }: { color: string }) {
+  return <Ionicons name="document-outline" color={color} size={26} />;
+}
+
+const Tab = createMaterialBottomTabNavigator<RootStackParamsList>();
+
+function TabNavigator(): ReactElement {
+  return (
+    <Tab.Navigator
+      initialRouteName="Home"
+      barStyle={{ backgroundColor: '#E5E4E2' }}
+    >
+      <Tab.Screen
+        name="Home"
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Home',
+          tabBarIcon: HomeIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Search"
+        component={SearchScreen}
+        options={{
+          tabBarLabel: 'Search',
+          tabBarIcon: SearchIcon,
+        }}
+      />
+      <Tab.Screen
+        name="Content"
+        component={MyContentStackNavigator}
+        options={{
+          tabBarLabel: 'My Content',
+          tabBarIcon: MyContentIcon,
+        }}
+      />
+    </Tab.Navigator>
+  );
+}
+
+export default TabNavigator;
diff --git a/src/navigation/stacks/MyContentStackNavigator.tsx b/src/navigation/stacks/MyContentStackNavigator.tsx
new file mode 100644
index 00000000..808eb254
--- /dev/null
+++ b/src/navigation/stacks/MyContentStackNavigator.tsx
@@ -0,0 +1,20 @@
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import MyContentScreen from '../../screens/MyContent';
+import StoryScreen from '../../screens/StoryScreen';
+import { MyContentStackParamList } from '../../types/navigation';
+
+const MyContentStack = createStackNavigator<MyContentStackParamList>();
+
+export default function MyContentStackNavigator() {
+  return (
+    <MyContentStack.Navigator
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <MyContentStack.Screen name="MyContent" component={MyContentScreen} />
+      <MyContentStack.Screen name="Story" component={StoryScreen} />
+    </MyContentStack.Navigator>
+  );
+}
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index e7181236..00c2db13 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -1,24 +1,10 @@
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
-import { Button, Text, View } from 'react-native';
-import { RootStackParamsList } from '../types/types';
+import { Text, View } from 'react-native';
 
-type HomeScreenProps = NativeStackScreenProps<RootStackParamsList, 'Home'>;
-
-export default function HomeScreen(props: HomeScreenProps) {
-  const { navigation } = props;
+export default function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>GIRLS WRITE NOW!</Text>
-      <View style={{ padding: 20 }}>
-        <Button title="Story Page" onPress={() => navigation.push('Story')} />
-      </View>
-      <View style={{ padding: 20 }}>
-        <Button title="Login Page" onPress={() => navigation.push('Login')} />
-      </View>
-      <View style={{ padding: 20 }}>
-        <Button title="Toast Page" onPress={() => navigation.push('Toast')} />
-      </View>
     </View>
   );
 }
diff --git a/src/screens/MyContent.tsx b/src/screens/MyContent.tsx
new file mode 100644
index 00000000..fe9d668e
--- /dev/null
+++ b/src/screens/MyContent.tsx
@@ -0,0 +1,24 @@
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+import { MyContentStackParamList } from '../types/navigation';
+
+type MyContentScreenProps = NativeStackScreenProps<
+  MyContentStackParamList,
+  'MyContent'
+>;
+
+export default function MyContentScreen(props: MyContentScreenProps) {
+  const { navigation } = props;
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>My Content</Text>
+      <View style={{ padding: 20 }}>
+        <Button
+          title="Story Page"
+          onPress={() => navigation.navigate('Story')}
+        />
+      </View>
+    </View>
+  );
+}
diff --git a/src/screens/SearchScreen.tsx b/src/screens/SearchScreen.tsx
new file mode 100644
index 00000000..20417fa6
--- /dev/null
+++ b/src/screens/SearchScreen.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export default function SearchScreen() {
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <Text>Search Screen</Text>
+    </View>
+  );
+}
diff --git a/src/types/navigation.tsx b/src/types/navigation.tsx
new file mode 100644
index 00000000..5663a561
--- /dev/null
+++ b/src/types/navigation.tsx
@@ -0,0 +1,10 @@
+export type RootStackParamsList = {
+  Home: undefined;
+  Search: undefined;
+  Content: undefined;
+};
+
+export type MyContentStackParamList = {
+  MyContent: undefined;
+  Story: undefined;
+};
diff --git a/src/types/types.tsx b/src/types/types.tsx
index c3fac758..e69de29b 100644
--- a/src/types/types.tsx
+++ b/src/types/types.tsx
@@ -1,6 +0,0 @@
-export type RootStackParamsList = {
-  Home: undefined;
-  Story: undefined;
-  Login: undefined;
-  Toast: undefined;
-};

From 82a09734e3db76401c5660deaccbeea08241815a Mon Sep 17 00:00:00 2001
From: Inaya Yusuf <71958031+InayaY3@users.noreply.github.com>
Date: Mon, 2 Oct 2023 17:19:38 -0700
Subject: [PATCH 2/2] [toast] Implement toast component (#11)

---
 package-lock.json           | 30 ++++++++++++++++++++++++++++++
 package.json                |  2 ++
 src/screens/ToastScreen.tsx | 28 ++++++++++++++++++++++++----
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2e875b78..0c22c0b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,8 @@
         "react": "18.2.0",
         "react-native": "0.72.4",
         "react-native-ionicons": "^4.6.5",
+        "react-native-root-siblings": "^4.1.1",
+        "react-native-root-toast": "^3.5.1",
         "react-native-safe-area-context": "4.6.3",
         "react-native-screens": "~3.22.0",
         "react-native-vector-icons": "^10.0.0"
@@ -14738,6 +14740,34 @@
         "color-string": "^1.6.0"
       }
     },
+    "node_modules/react-native-root-siblings": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-root-siblings/-/react-native-root-siblings-4.1.1.tgz",
+      "integrity": "sha512-sdmLElNs5PDWqmZmj4/aNH4anyxreaPm61c4ZkRiR8SO/GzLg6KjAbb0e17RmMdnBdD0AIQbS38h/l55YKN4ZA=="
+    },
+    "node_modules/react-native-root-toast": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/react-native-root-toast/-/react-native-root-toast-3.5.1.tgz",
+      "integrity": "sha512-zqsuec7Ugx2/9hR9BHqcmb3WWC/WBouqn2RYIpeTG+OpVvVfvr2UhWK4kLPJLk5/icZWl3xJrqiktPpbRpEA2A==",
+      "dependencies": {
+        "deprecated-react-native-prop-types": "^2.3.0",
+        "prop-types": "^15.5.10",
+        "react-native-root-siblings": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react-native": ">=0.47.0"
+      }
+    },
+    "node_modules/react-native-root-toast/node_modules/deprecated-react-native-prop-types": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/deprecated-react-native-prop-types/-/deprecated-react-native-prop-types-2.3.0.tgz",
+      "integrity": "sha512-pWD0voFtNYxrVqvBMYf5gq3NA2GCpfodS1yNynTPc93AYA/KEMGeWDqqeUB6R2Z9ZofVhks2aeJXiuQqKNpesA==",
+      "dependencies": {
+        "@react-native/normalize-color": "*",
+        "invariant": "*",
+        "prop-types": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz",
diff --git a/package.json b/package.json
index 6adc4f7c..ad5dbee1 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,8 @@
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
     "react-native": "0.72.4",
+    "react-native-root-siblings": "^4.1.1",
+    "react-native-root-toast": "^3.5.1",
     "react-native-ionicons": "^4.6.5",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
diff --git a/src/screens/ToastScreen.tsx b/src/screens/ToastScreen.tsx
index 47cb2a87..4d0f4775 100644
--- a/src/screens/ToastScreen.tsx
+++ b/src/screens/ToastScreen.tsx
@@ -1,10 +1,30 @@
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Button, Text, View } from 'react-native';
+import { RootSiblingParent } from 'react-native-root-siblings';
+import Toast from 'react-native-root-toast';
+
+const toast = () => {
+  Toast.show('Testing this out?', {
+    duration: Toast.durations.LONG,
+    position: Toast.positions.BOTTOM,
+    shadow: true,
+    animation: true,
+    hideOnPress: true,
+    delay: 0,
+    // onShow: () => {},
+    // onShown: () => {},
+    // onHide: () => {},
+    // onHidden: () => {}
+  });
+};
 
 export default function ToastScreen() {
   return (
-    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Text>Toast Page</Text>
-    </View>
+    <RootSiblingParent>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Toast Page</Text>
+        <Button onPress={toast} title="Toast" />
+      </View>
+    </RootSiblingParent>
   );
 }