introduced foreground notification component

src/components/foregroundNotification/foregroundNotification.tsx

@@ -0,0 +1,120 @@
+import React, { Component } from 'react';
+import { Animated, TouchableOpacity, Text, View } from 'react-native';
+import { IconButton } from '..';
+import UserAvatar from '../userAvatar';
+
+// Styles
+import styles from './styles';
+
+interface Props {
+  text:string;
+}
+
+const ForegroundNotification = ({text}:Props) => {
+  const position = {top:0};
+  return (
+    <View
+      style={{
+        ...styles.container,
+        ...position,
+        // transform: [{ translateY: 0 }],
+      }}
+    >
+      <View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingBottom:16, paddingHorizontal:16}}>
+        
+        <UserAvatar username="demo.com"/>
+
+        <View>
+          <Text style={styles.text}>New Upvote</Text>
+          <Text style={styles.text}>{text}</Text>
+        </View>
+     
+        <IconButton 
+          name='close'
+          color="white"
+          size={28}
+        />
+      </View>
+      
+    </View>
+  )
+}
+
+// class ToastNotification extends Component {
+  /* Props
+   * ------------------------------------------------
+   *   @prop { type }    name                - Description....
+   */
+
+  // constructor(props) {
+  //   super(props);
+  //   this.state = {
+  //     animatedValue: new Animated.Value(0),
+  //   };
+  // }
+
+  // Component Functions
+  // _showToast() {
+  //   const { duration } = this.props;
+  //   const animatedValue = new Animated.Value(0);
+
+  //   this.setState({ animatedValue });
+
+  //   Animated.timing(animatedValue, { toValue: 1, duration: 350 }).start();
+
+  //   if (duration) {
+  //     this.closeTimer = setTimeout(() => {
+  //       this._hideToast();
+  //     }, duration);
+  //   }
+  // }
+
+  // _hideToast() {
+  //   const { animatedValue } = this.state;
+  //   const { onHide } = this.props;
+
+  //   Animated.timing(animatedValue, { toValue: 0.0, duration: 350 }).start(() => {
+  //     if (onHide) {
+  //       onHide();
+  //     }
+  //   });
+
+  //   if (this.closeTimer) {
+  //     clearTimeout(this.closeTimer);
+  //   }
+  // }
+
+  // Component Life Cycles
+  // UNSAFE_componentWillMount() {
+  //   this._showToast();
+  // }
+
+//   render() {
+//     const { text, textStyle, style, onPress, isTop } = this.props;
+//     const { animatedValue } = this.state;
+//     const outputRange = isTop ? [-50, 0] : [50, 0];
+//     const y = animatedValue.interpolate({
+//       inputRange: [0, 1],
+//       outputRange,
+//     });
+//     const position = isTop ? { top: 100 } : { bottom: 100 };
+
+//     return (
+//       <TouchableOpacity disabled={!onPress} onPress={() => onPress && onPress()}>
+//         <Animated.View
+//           style={{
+//             ...styles.container,
+//             ...style,
+//             ...position,
+//             opacity: animatedValue,
+//             transform: [{ translateY: y }],
+//           }}
+//         >
+//           <Text style={[styles.text, textStyle]}>{text}</Text>
+//         </Animated.View>
+//       </TouchableOpacity>
+//     );
+//   }
+// }
+
+export default ForegroundNotification;

src/components/foregroundNotification/index.ts

@@ -0,0 +1,3 @@
+import ForegroundNotification from './foregroundNotification';
+
+export { ForegroundNotification };

src/components/foregroundNotification/styles.ts

@@ -0,0 +1,29 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    position: 'absolute',
+    zIndex: 9999,
+    justifyContent: 'flex-end',
+    alignSelf: 'center',
+    maxWidth: '$deviceWidth',
+    minWidth: '$deviceWidth / 1.9',
+    height: 100,
+    width:'100%',
+    backgroundColor: '$primaryDarkText',
+    margin: 5,
+    shadowOffset: {
+      height: 5,
+    },
+    shadowColor: '#5f5f5fbf',
+    shadowOpacity: 0.3,
+    elevation: 3,
+    marginTop:-4
+  },
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 14,
+    paddingRight: 10,
+  },
+});

src/components/index.js

@@ -89,6 +89,7 @@ import { SpinGame } from './spinGame/spinGameView';
 import { TabbedPosts } from './tabbedPosts';
 import { ActionModal } from './actionModal';
 import { CustomiseFiltersModal } from './customiseFiltersModal';
+import { ForegroundNotification } from './foregroundNotification';
 
 // Basic UI Elements
 import {
@@ -226,4 +227,5 @@ export {
   TabbedPosts,
   ActionModal,
   CustomiseFiltersModal,
+  ForegroundNotification,
 };