using tiled notification in both android and ios

src/components/foregroundNotification/foregroundNotification.tsx

@@ -40,7 +40,7 @@ const ForegroundNotification = ({remoteMessage}:Props) => {
     const dispatch = useDispatch();
     const intl = useIntl();
 
-    const [duration] = useState(5000);
+    const [duration] = useState(50000);
     const [activeId, setActiveId] = useState('');
     const [isVisible, setIsVisible] = useState(false);
     const [username, setUsername] = useState('');
@@ -157,21 +157,20 @@ const ForegroundNotification = ({remoteMessage}:Props) => {
   return (
     <Animated.View
       style={{
-        ...containerStyle,
+        ...styles.container,
         transform: [{ translateY: animatedValue }],
       }}
     >
-      <View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingBottom:16, paddingHorizontal:16}}>
+      <View style={styles.contentContainer}>
         
-        <TouchableOpacity onPress={_onPress}>
-          <View style={{flexDirection:'row', alignItems:'center', flex:1, marginRight:24}}>
+        <TouchableOpacity onPress={_onPress} style={{flexShrink:1}}>
+          <View style={{flexDirection:'row', alignItems:'center', marginRight:24}}>
             <UserAvatar username={username}/>
 
-            <View>
+            <View style={{flexShrink:1}}>
               <Text style={styles.text} numberOfLines={1}>{title}</Text>
               <Text style={styles.text} numberOfLines={1}>{body}</Text>
             </View>
-
           </View>
         </TouchableOpacity>
 

src/components/foregroundNotification/styles.ts

@@ -1,34 +1,20 @@
 import EStyleSheet from 'react-native-extended-stylesheet';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
-export const CONTAINER_HEIGHT = getStatusBarHeight() + 72;
+export const CONTAINER_HEIGHT = getStatusBarHeight() + 100;
 
 export default EStyleSheet.create({
-  containerIOS: {
-    position: 'absolute',
-    zIndex: 9999,
-    justifyContent: 'flex-end',
-    maxWidth: '$deviceWidth',
-    minWidth: '$deviceWidth / 1.9',
-    height: CONTAINER_HEIGHT,
-    width:'100%',
-    backgroundColor: '$primaryDarkText',
-    shadowOffset: {
-      height: 5,
-    },
-    shadowColor: '#5f5f5fbf',
-    shadowOpacity: 0.3,
-    elevation: 3,
-    top:0,
-  },
-  containerAndroid:{
+  container:{
     position: 'absolute',
     top:0,
     justifyContent:'center',
     zIndex: 9999,
     marginHorizontal:8,
     paddingTop:16,
-    marginTop:8,
+    marginTop: Platform.select({
+      ios:getStatusBarHeight() + 12,
+      android:8,
+    }),
     backgroundColor: '$primaryDarkText',
     shadowColor: '#5f5f5fbf',
     shadowOpacity: 0.3,
@@ -39,8 +25,14 @@ export default EStyleSheet.create({
     borderRadius:12,
     width: '$deviceWidth - 16',
   },
+  contentContainer:{
+    flexDirection:'row', 
+    justifyContent:'space-between', 
+    alignItems:'center', 
+    paddingBottom:16, 
+    paddingHorizontal:16
+  },
   text: {
-    flex:1,
     color: 'white',
     fontWeight: 'bold',
     fontSize: 14,