[toast] Implement toast component (#11)

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",

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>
   );
 }