feat: add custom toast

apps/mobile/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, {useState, useEffect} from 'react';
 import NavigationService, {
   AppContainer,
 } from './src/services/NavigationService';
@@ -9,19 +9,49 @@ import {
   TouchableOpacity,
   DeviceEventEmitter,
   Platform,
+  Text,
 } from 'react-native';
-import { COLOR_SCHEME, SIZE, opacity, WEIGHT } from './src/common/common';
+import {COLOR_SCHEME, SIZE, opacity, WEIGHT, pv, ph} from './src/common/common';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ActionButton from 'react-native-action-button';
 import Storage from 'notes-core/api/database';
 import StorageInterface from './src/utils/storage';
-import { RenderSideMenu } from './src/views/Home';
+import {RenderSideMenu} from './src/views/Home';
 import * as Animatable from 'react-native-animatable';
+import {h} from './src/utils/utils';
+import {Toast} from './src/components/Toast';
+
 const App = () => {
   const [colors, setColors] = useState(COLOR_SCHEME);
   const [fab, setFab] = useState(true);
   const [sidebar, setSidebar] = useState('30%');
 
+  useEffect(() => {
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor('transparent');
+      StatusBar.setTranslucent(true);
+      StatusBar.setBarStyle('dark-content');
+    }
+  }, []);
+
+  useEffect(() => {
+    DeviceEventEmitter.addListener('openSidebar', () => {
+      setSidebar('30%');
+    });
+    DeviceEventEmitter.addListener('closeSidebar', () => {
+      setSidebar('0%');
+    });
+
+    return () => {
+      DeviceEventEmitter.removeListener('openSidebar', () => {
+        setSidebar('30%');
+      });
+      DeviceEventEmitter.removeListener('closeSidebar', () => {
+        setSidebar('0%');
+      });
+    };
+  }, []);
+
   useEffect(() => {
     DeviceEventEmitter.addListener('hide', () => {
       setFab(false);
@@ -29,18 +59,7 @@ const App = () => {
     DeviceEventEmitter.addListener('show', () => {
       setFab(true);
     });
-    DeviceEventEmitter.addListener('openSidebar', () => {
-      setSidebar('30%');
-    });
-    DeviceEventEmitter.addListener('closeSidebar', () => {
-      setSidebar('0%');
-    });
 
-    if (Platform.OS === 'android') {
-      StatusBar.setBackgroundColor('transparent');
-      StatusBar.setTranslucent(true);
-      StatusBar.setBarStyle('dark-content');
-    }
     return () => {
       DeviceEventEmitter.removeListener('hide', () => {
         setFab(false);
@@ -48,12 +67,6 @@ const App = () => {
       DeviceEventEmitter.removeListener('show', () => {
         setFab(true);
       });
-      DeviceEventEmitter.removeListener('openSidebar', () => {
-        setSidebar('30%');
-      });
-      DeviceEventEmitter.removeListener('closeSidebar', () => {
-        setSidebar('0%');
-      });
     };
   }, []);
 
@@ -80,8 +93,8 @@ const App = () => {
           : undefined
         </Animatable.View>
       ) : (
-          undefined
-        )}
+        undefined
+      )}
 
       <AppContainer
         style={{
@@ -93,6 +106,8 @@ const App = () => {
         }}
       />
 
+      <Toast />
+
       {fab ? (
         <ActionButton elevation={5} buttonColor={colors.accent}>
           <ActionButton.Item
@@ -137,14 +152,12 @@ const App = () => {
           </ActionButton.Item>
         </ActionButton>
       ) : (
-          undefined
-        )}
+        undefined
+      )}
     </View>
   );
 };
 
-
-
 export default App;
 
 export const storage = new Storage(StorageInterface);

apps/mobile/src/components/Toast/index.js

@@ -0,0 +1,96 @@
+import React, {useState, useEffect} from 'react';
+
+import {DeviceEventEmitter, Text} from 'react-native';
+import {COLOR_SCHEME, SIZE, opacity, WEIGHT, pv, ph} from '../../common/common';
+import Icon from 'react-native-vector-icons/Feather';
+import * as Animatable from 'react-native-animatable';
+import {h} from '../../utils/utils';
+
+export const Toast = () => {
+  const [colors, setColors] = useState(COLOR_SCHEME);
+  const [toast, setToast] = useState(false);
+  const [toastStyle, setToastStyle] = useState({
+    backgroundColor: colors.errorBg,
+    color: colors.errorText,
+  });
+
+  useEffect(() => {
+    DeviceEventEmitter.addListener('showToast', data => {
+      setToast(true);
+
+      if (data.type === 'success') {
+        setToastStyle({
+          backgroundColor: colors.successBg,
+          color: colors.successText,
+        });
+      } else {
+        setToastStyle({
+          backgroundColor: colors.errorBg,
+          color: colors.errorText,
+        });
+      }
+
+      setTimeout(() => {
+        setToast(false);
+      }, data.duration || 1000);
+    });
+    DeviceEventEmitter.addListener('hideToast', data => {
+      setToast(false);
+    });
+
+    return () => {
+      DeviceEventEmitter.removeListener('showToast', data => {
+        setToast(true);
+        if (data.type === 'success') {
+          setToastStyle({
+            backgroundColor: colors.successBg,
+            color: colors.successText,
+          });
+        } else {
+          setToastStyle({
+            backgroundColor: colors.errorBg,
+            color: colors.errorText,
+          });
+        }
+
+        setTimeout(() => {
+          setToast(false);
+        }, data.duration || 1000);
+      });
+
+      DeviceEventEmitter.removeListener('hideToast', data => {
+        setToast(false);
+      });
+    };
+  }, []);
+
+  return (
+    <Animatable.View
+      transition="translateY"
+      duration={250}
+      useNativeDriver={true}
+      style={{
+        ...toastStyle,
+        height: 55,
+        width: '90%',
+        marginHorizontal: '5%',
+        marginBottom: h * 0.025,
+        position: 'absolute',
+        bottom: 0,
+        fontFamily: WEIGHT.regular,
+        fontSize: SIZE.md,
+        zIndex: 999,
+        borderRadius: 5,
+        paddingHorizontal: ph,
+        justifyContent: 'center',
+        elevation: 10,
+        transform: [
+          {
+            translateY: toast ? 0 : 150,
+          },
+        ],
+      }}>
+      <Text>Hello</Text>
+    </Animatable.View>
+  );
+};

apps/mobile/src/utils/utils.js

@@ -1,4 +1,4 @@
-import {Dimensions} from 'react-native';
+import {Dimensions, DeviceEventEmitter} from 'react-native';
 export const getElevation = elevation => {
   return {
     elevation,
@@ -38,3 +38,12 @@ export function timeSince(date) {
 
 export const w = Dimensions.get('window').width;
 export const h = Dimensions.get('window').height;
+
+export const ToastEvent = {
+  show: (message, type, duration = 1000, func = null) => {
+    DeviceEventEmitter.emit('showToast', {message, type, duration, func});
+  },
+  hide: (message, type, duration = 1000, func = null) => {
+    DeviceEventEmitter.emit('hideToast', {message, type, duration, func});
+  },
+};

apps/mobile/src/views/Home/index.js

@@ -29,7 +29,7 @@ import Icon from 'react-native-vector-icons/Feather';
 import {Search} from '../../components/SearchInput';
 import {Reminder} from '../../components/Reminder';
 import {RecentList} from '../../components/Recents';
-import {getElevation, w, h} from '../../utils/utils';
+import {getElevation, w, h, Toast} from '../../utils/utils';
 import {Header} from '../../components/header';
 import {tsPropertySignature} from '@babel/types';
 import {NavigationEvents} from 'react-navigation';