Merge pull request #539 from GetStream/review-fixes

App review and feedback fixes on SDK

Author: nhannah

examples/SampleApp/src/components/ChannelInfoOverlay.tsx

@@ -45,16 +45,11 @@ import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayConte
 
 dayjs.extend(relativeTime);
 
-const avatarPresenceIndicator = {
-  cx: 6,
-  cy: 6,
-  r: 6,
-};
 const avatarSize = 64;
 
 const styles = StyleSheet.create({
   avatarPresenceIndicator: {
-    right: 4,
+    right: 5,
     top: 1,
   },
   channelName: {
@@ -101,7 +96,7 @@ const styles = StyleSheet.create({
   userItemContainer: { marginHorizontal: 8, width: 64 },
   userName: {
     fontSize: 12,
-    fontWeight: 'bold',
+    fontWeight: '600',
     paddingTop: 4,
     textAlign: 'center',
   },
@@ -353,7 +348,6 @@ export const ChannelInfoOverlay = (props: ChannelInfoOverlayProps) => {
                                   image={item.image}
                                   name={item.name || item.id}
                                   online={item.online}
-                                  presenceIndicator={avatarPresenceIndicator}
                                   presenceIndicatorContainerStyle={
                                     styles.avatarPresenceIndicator
                                   }

examples/SampleApp/src/components/ChannelPreview.tsx

@@ -13,6 +13,7 @@ import {
 } from 'stream-chat-react-native';
 
 import { useAppOverlayContext } from '../context/AppOverlayContext';
+import { useBottomSheetOverlayContext } from '../context/BottomSheetOverlayContext';
 import { useChannelInfoOverlayContext } from '../context/ChannelInfoOverlayContext';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -65,7 +66,9 @@ export const ChannelPreview: React.FC<
 
   const { setOverlay } = useAppOverlayContext();
 
-  const { setData } = useChannelInfoOverlayContext();
+  const { setData: setDataBottomSheet } = useBottomSheetOverlayContext();
+
+  const { setData, data } = useChannelInfoOverlayContext();
 
   const { client } = useChatContext<
     LocalAttachmentType,
@@ -85,6 +88,12 @@ export const ChannelPreview: React.FC<
     },
   } = useTheme();
 
+  const otherMembers = channel
+    ? Object.values(channel.state.members).filter(
+        (member) => member.user?.id !== data?.clientId,
+      )
+    : [];
+
   return (
     <Swipeable
       overshootLeft={false}
@@ -103,7 +112,22 @@ export const ChannelPreview: React.FC<
             <MenuPointHorizontal />
           </RectButton>
           <RectButton
-            onPress={() => channel.delete()}
+            onPress={() => {
+              setDataBottomSheet({
+                confirmText: 'DELETE',
+                onConfirm: () => {
+                  channel.delete();
+                  setOverlay('none');
+                },
+                subtext: `Are you sure you want to delete this ${
+                  otherMembers.length === 1 ? 'conversation' : 'group'
+                }?`,
+                title: `Delete ${
+                  otherMembers.length === 1 ? 'Conversation' : 'Group'
+                }`,
+              });
+              setOverlay('confirmation');
+            }}
             style={[styles.rightSwipeableButton]}
           >
             <Delete pathFill={accent_red} />

examples/SampleApp/src/components/ConfirmationBottomSheet.tsx

@@ -25,18 +25,25 @@ const styles = StyleSheet.create({
   },
   container: {
     height: 224,
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
   },
   description: {
     alignItems: 'center',
     flex: 1,
     justifyContent: 'center',
   },
   subtext: {
+    fontSize: 14,
+    fontWeight: '500',
     marginTop: 8,
+    paddingHorizontal: 16,
   },
   title: {
-    fontWeight: '600',
+    fontSize: 16,
+    fontWeight: '700',
     marginTop: 18,
+    paddingHorizontal: 16,
   },
 });
 

examples/SampleApp/src/components/RoundButton.tsx

@@ -15,7 +15,7 @@ const styles = StyleSheet.create({
       },
       default: {
         shadowOffset: {
-          height: 1,
+          height: 2,
           width: 0,
         },
         shadowOpacity: 0.25,

examples/SampleApp/src/components/UserInfoOverlay.tsx

@@ -54,18 +54,13 @@ import type {
 
 dayjs.extend(relativeTime);
 
-const avatarPresenceIndicator = {
-  cx: 6,
-  cy: 6,
-  r: 6,
-};
 const avatarSize = 64;
 
 const permissions = ['admin', 'moderator'];
 
 const styles = StyleSheet.create({
   avatarPresenceIndicator: {
-    right: 4,
+    right: 5,
     top: 1,
   },
   channelName: {
@@ -327,7 +322,6 @@ export const UserInfoOverlay = (props: UserInfoOverlayProps) => {
                             image={member.user?.image}
                             name={member.user?.name || member.user?.id}
                             online={member.user?.online}
-                            presenceIndicator={avatarPresenceIndicator}
                             presenceIndicatorContainerStyle={
                               styles.avatarPresenceIndicator
                             }

examples/SampleApp/src/screens/ChannelListScreen.tsx

@@ -49,7 +49,7 @@ const styles = StyleSheet.create({
   },
   searchContainer: {
     alignItems: 'center',
-    borderRadius: 18,
+    borderRadius: 30,
     borderWidth: 1,
     flexDirection: 'row',
     margin: 8,

examples/SampleApp/src/screens/UserSelectorScreen.tsx

@@ -8,7 +8,10 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import { useTheme } from 'stream-chat-react-native';
 
 import { USERS } from '../ChatUsers';
@@ -96,13 +99,17 @@ export const UserSelectorScreen: React.FC<Props> = ({ navigation }) => {
     },
   } = useTheme();
   const { switchUser } = useContext(AppContext);
+  const { bottom } = useSafeAreaInsets();
 
   useEffect(() => {
     AsyncStore.setItem('@stream-rn-sampleapp-user-id', '');
   }, []);
 
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: white_snow }]}>
+    <SafeAreaView
+      style={[styles.container, { backgroundColor: white_snow }]}
+      edges={['right', 'top', 'left']}
+    >
       <ScrollView
         contentContainerStyle={styles.contentContainer}
         style={styles.scrollContainer}
@@ -192,9 +199,19 @@ export const UserSelectorScreen: React.FC<Props> = ({ navigation }) => {
           </View>
         </TouchableOpacity>
       </ScrollView>
-      <Text style={[styles.footerText, { color: grey_gainsboro }]}>
-        Stream SDK v{version}
-      </Text>
+      <View
+        style={[
+          {
+            paddingBottom: bottom ? bottom : 16,
+            paddingTop: 16,
+            backgroundColor: white_snow,
+          },
+        ]}
+      >
+        <Text style={[styles.footerText, { color: grey_gainsboro }]}>
+          Stream SDK v{version}
+        </Text>
+      </View>
     </SafeAreaView>
   );
 };

src/components/Attachment/Card.tsx

@@ -70,9 +70,11 @@ const styles = StyleSheet.create({
   },
   description: {
     fontSize: 12,
+    marginHorizontal: 8,
   },
   title: {
     fontSize: 12,
+    marginHorizontal: 8,
   },
 });
 

src/components/Attachment/Gallery.tsx

@@ -88,6 +88,7 @@ const styles = StyleSheet.create({
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
+    margin: 1,
   },
   moreImagesText: { color: '#FFFFFF', fontSize: 26, fontWeight: '700' },
 });
@@ -201,7 +202,7 @@ const GalleryWithContext = <
       return returnArray;
     }, [] as { height: number | string; url: string }[][]);
 
-  const groupStyle = `${alignment}_${groupStyles[0].toLowerCase()}`;
+  const groupStyle = `${alignment}_${groupStyles?.[0]?.toLowerCase?.()}`;
 
   return (
     <View
@@ -265,6 +266,7 @@ const GalleryWithContext = <
                     {
                       borderBottomLeftRadius:
                         (images.length === 1 ||
+                          (images.length === 2 && rowIndex === 0) ||
                           (images.length === 3 &&
                             colIndex === 0 &&
                             rowIndex === 0) ||
@@ -294,7 +296,8 @@ const GalleryWithContext = <
                           rowIndex === 0) ||
                         (images.length === 3 &&
                           colIndex === 0 &&
-                          rowIndex === 1)
+                          rowIndex === 1) ||
+                        (images.length === 2 && rowIndex === 1)
                           ? 14
                           : 0,
                     },

src/components/AttachmentPicker/components/AttachmentSelectionBar.tsx

@@ -75,7 +75,10 @@ export const AttachmentSelectionBar: React.FC = () => {
         { height: attachmentSelectionBarHeight ?? 52 },
       ]}
     >
-      <TouchableOpacity onPress={() => setPicker('images')}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={() => setPicker('images')}
+      >
         <View style={[styles.icon, icon]}>
           <ImageSelectorIcon
             numberOfImageUploads={imageUploads.length}
@@ -86,6 +89,7 @@ export const AttachmentSelectionBar: React.FC = () => {
       {hasFilePicker && (
         <TouchableOpacity
           disabled={imageUploads.length > 0}
+          hitSlop={{ bottom: 15, top: 15 }}
           onPress={openFilePicker}
         >
           <View style={[styles.icon, icon]}>
@@ -96,7 +100,10 @@ export const AttachmentSelectionBar: React.FC = () => {
           </View>
         </TouchableOpacity>
       )}
-      <TouchableOpacity onPress={takeAndUploadImage}>
+      <TouchableOpacity
+        hitSlop={{ bottom: 15, top: 15 }}
+        onPress={takeAndUploadImage}
+      >
         <View style={[styles.icon, icon]}>
           <CameraSelectorIcon
             numberOfImageUploads={imageUploads.length}