Merge pull request #1686 from GetStream/develop

Next Release

Author: vanGalilea

docusaurus/docs/reactnative/guides/push_notifications_v2.mdx

@@ -27,7 +27,6 @@ Easiest way to integrate push notifications in your Chat applications is using F
 
 :::note
 
-- If you would like to get push notifications only when users are offline, please contact [email protected].
 - Push notifications require membership. Watching a channel isn't enough.
 
 :::
@@ -463,6 +462,11 @@ notifee.onBackgroundEvent(async ({ detail, type }) => {
 
 The `notification_template` is a JSON object that includes the keys relevant to push notifications for Android. See the [AndroidNotification](https://firebase.google.com/docs/reference/fcm/rest/v1/projects.messages#AndroidNotification) type in the firebase documentation for all the supported keys.
 
+:::
+:::caution
+
+We do not recommend doing this. If `notification_template` is added, then notifications will be shown in the foreground for Android. iOS will, by default, not show any notifications in the foreground. Generally, chat applications do not show push notifications in the foreground. This is why we do not recommend it. However, if you want foreground notifications in both platforms, please follow the steps mentioned in the [display-notification-in-foreground](#display-notification-in-foreground) section.
+
 :::
 
 ### Show badge number on the iOS app

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import {
+  FlatList,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  View,
+} from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -87,9 +95,8 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
       messageInput: {
-        imageUploadPreview: { dismiss, flatList, itemContainer, upload },
+        imageUploadPreview: { flatList, itemContainer, upload },
       },
     },
   } = useTheme();
@@ -140,15 +147,11 @@ const ImageUploadPreviewWithContext = <
             style={[styles.upload, upload]}
           />
         </UploadProgressIndicator>
-        <TouchableOpacity
+        <DismissUpload
           onPress={() => {
             removeImage(item.id);
           }}
-          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-          testID='remove-image-upload-preview'
-        >
-          <Close pathFill={white} />
-        </TouchableOpacity>
+        />
         <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
       </View>
     );
@@ -170,6 +173,29 @@ const ImageUploadPreviewWithContext = <
   ) : null;
 };
 
+type DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;
+
+const DismissUpload = ({ onPress }: DismissUploadProps) => {
+  const {
+    theme: {
+      colors: { overlay, white },
+      messageInput: {
+        imageUploadPreview: { dismiss, dismissIconColor },
+      },
+    },
+  } = useTheme();
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+      testID='remove-image-upload-preview'
+    >
+      <Close pathFill={dismissIconColor || white} />
+    </TouchableOpacity>
+  );
+};
+
 const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
   prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,
   nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,

package/src/contexts/themeContext/utils/theme.ts

@@ -267,6 +267,7 @@ export type Theme = {
     };
     imageUploadPreview: {
       dismiss: ViewStyle;
+      dismissIconColor: Color;
       flatList: ViewStyle;
       itemContainer: ViewStyle;
       upload: ImageStyle;
@@ -766,6 +767,7 @@ export const defaultTheme: Theme = {
     },
     imageUploadPreview: {
       dismiss: {},
+      dismissIconColor: '',
       flatList: {},
       itemContainer: {},
       upload: {},