@sendbird/uikit-react-native 3.12.1 → 3.12.3

package/src/components/ReactionBottomSheets/ReactionListBottomSheet.tsx

@@ -1,13 +1,63 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
 
 import type { BaseMessage } from '@sendbird/chat/message';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import type { ReactionBottomSheetProps } from './index';
 
+const ReactionEmojiPressable = ({
+  emojiKey,
+  url,
+  message,
+  channel,
+  currentUserId,
+  selectedBackground,
+  enabledBackground,
+  onClose,
+}: {
+  emojiKey: string;
+  url: string;
+  message: SendbirdBaseMessage | undefined;
+  channel: SendbirdBaseChannel | undefined;
+  currentUserId: string | undefined;
+  selectedBackground: string;
+  enabledBackground: string;
+  onClose: () => Promise<void>;
+}) => {
+  const [pressed, setPressed] = useState(false);
+
+  const reactedUserIds = message?.reactions?.find((it) => it.key === emojiKey)?.userIds ?? [];
+  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);
+  const reacted = idx > -1;
+
+  return (
+    <Pressable
+      onPress={async () => {
+        if (message && channel) {
+          const action = (msg: BaseMessage, key: string) => {
+            return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
+          };
+
+          action(message, emojiKey).catch((error) => {
+            const operation = reacted ? 'remove' : 'add';
+            Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
+          });
+        }
+        await onClose();
+      }}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}
+    >
+      <Image source={{ uri: url }} style={styles.emoji} />
+    </Pressable>
+  );
+};
+
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
@@ -45,34 +95,18 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
           contentContainerStyle={styles.flatlist}
           ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
           renderItem={({ item: { key, url } }) => {
-            const reactedUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];
-
-            const idx = reactedUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);
-            const reacted = idx > -1;
-
             return (
               <View style={styles.emojiItem}>
-                <Pressable
-                  key={key}
-                  onPress={async () => {
-                    if (message && channel) {
-                      const action = (message: BaseMessage, key: string) => {
-                        return reacted ? channel.deleteReaction(message, key) : channel.addReaction(message, key);
-                      };
-
-                      action(message, key).catch((error) => {
-                        Logger.warn('Failed to reaction', error);
-                      });
-                    }
-                    await onClose();
-                  }}
-                  style={({ pressed }) => [
-                    styles.button,
-                    { backgroundColor: reacted || pressed ? color.selected.background : color.enabled.background },
-                  ]}
-                >
-                  <Image source={{ uri: url }} style={styles.emoji} />
-                </Pressable>
+                <ReactionEmojiPressable
+                  emojiKey={key}
+                  url={url}
+                  message={message}
+                  channel={channel}
+                  currentUserId={currentUser?.userId}
+                  selectedBackground={color.selected.background}
+                  enabledBackground={color.enabled.background}
+                  onClose={onClose}
+                />
               </View>
             );
           }}

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -34,7 +34,7 @@ const ReactionUserListBottomSheet = ({
   const { colors } = useUIKitTheme();
 
   const [tabIndex, setTabIndex] = useState(0);
-  const scrollRef = useRef<ScrollView>();
+  const scrollRef = useRef<ScrollView | undefined>(undefined);
   const tabIndicatorValue = useRef<Array<{ x: number; width: number }>>([]);
   const tabIndicatorAnimated = useRef({ x: new Animated.Value(0), width: new Animated.Value(0) }).current;
   const focusedWithLayoutCalculated = useRef(false);

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -37,7 +37,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
   const isNewLineExistInChannelRef = useRef(false);
   const scrolledAwayFromBottomRef = useRef(false);
   const [isVisibleUnreadMessageFloating, setIsVisibleUnreadMessageFloating] = useState(false);
-  const viewableMessages = useRef<SendbirdMessage[]>();
+  const viewableMessages = useRef<SendbirdMessage[] | undefined>(undefined);
   const hasUserMarkedAsUnreadRef = useRef(false);
   const [unreadFirstMessage, setUnreadFirstMessage] = useState<SendbirdMessage | undefined>(undefined);
   const pendingBottomReachedRef = useRef<{ timeout: number; timestamp: number } | null>(null);
@@ -216,7 +216,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     isNewLineExistInChannelRef.current = !!props.isNewLineExistInChannel && !!viewableMessages.current;
   }, [props.isNewLineExistInChannel, viewableMessages.current]);
 
-  const unreadMessagesFloatingPropsRef = useRef<UnreadMessagesFloatingProps>();
+  const unreadMessagesFloatingPropsRef = useRef<UnreadMessagesFloatingProps | undefined>(undefined);
   const updateUnreadMessagesFloatingProps = useFreshCallback(() => {
     const canAutoMarkAsRead =
       !scrolledAwayFromBottomRef.current &&

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -29,7 +29,7 @@ const createGroupChannelMembersFragment = (
     sortComparator,
     queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
   }) => {
-    const refreshSchedule = useRef<NodeJS.Timeout>();
+    const refreshSchedule = useRef<NodeJS.Timeout | undefined>(undefined);
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();

package/src/fragments/createOpenChannelParticipantsFragment.tsx

@@ -29,7 +29,7 @@ const createOpenChannelParticipantsFragment = (
   }) => {
     const handlerId = useUniqHandlerId('OpenChannelParticipantsFragment');
 
-    const refreshSchedule = useRef<NodeJS.Timeout>();
+    const refreshSchedule = useRef<NodeJS.Timeout | undefined>(undefined);
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();

package/src/hooks/useMentionTextInput.ts

@@ -12,7 +12,7 @@ const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | Sen
   const { mentionManager, sbOptions } = useSendbirdChat();
 
   const mentionedUsersRef = useRef<MentionedUser[]>([]);
-  const textInputRef = useRef<TextInput>();
+  const textInputRef = useRef<TextInput | undefined>(undefined);
 
   const [text, setText] = useState('');
   const [selection, setSelection] = useState({ start: 0, end: 0 });

package/src/hooks/usePushTokenRegistration.ts

@@ -9,7 +9,7 @@ const usePushTokenRegistration = () => {
   const { sdk } = useSendbirdChat();
   const { notificationService } = usePlatformService();
 
-  const refreshListener = useRef<() => void>();
+  const refreshListener = useRef<(() => void) | undefined>(undefined);
   const [registerToken, unregisterToken, getToken] = useIIFE(() => {
     return [
       Platform.select({

package/src/hooks/useVoiceMessageInput.ts

@@ -76,7 +76,7 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
     duration: 0,
   });
 
-  const recordingPath = useRef<{ recordFilePath: string; uri: string }>();
+  const recordingPath = useRef<{ recordFilePath: string; uri: string } | undefined>(undefined);
   const getVoiceMessageRecordingPath = () => {
     if (!recordingPath.current) throw new Error('No recording path');
     return recordingPath.current;

package/src/platform/createFileService.expo.ts

@@ -29,6 +29,8 @@ const createExpoFileService = ({
   mediaLibraryModule: typeof ExpoMediaLibrary;
   fsModule: typeof ExpoFs;
 }): FileServiceInterface => {
+  const preferredAssetRepresentationMode = imagePickerModule.UIImagePickerPreferredAssetRepresentationMode?.Compatible;
+
   class ExpoFileServiceInterface implements FileServiceInterface {
     async hasCameraPermission(): Promise<boolean> {
       const res = (await imagePickerModule.getCameraPermissionsAsync()) as ExpoPermissionResponse;
@@ -75,6 +77,7 @@ const createExpoFileService = ({
       }
 
       const response = await imagePickerModule.launchCameraAsync({
+        preferredAssetRepresentationMode,
         mediaTypes: (() => {
           switch (options?.mediaType) {
             case 'photo':
@@ -108,6 +111,7 @@ const createExpoFileService = ({
       const selectionLimit = options?.selectionLimit || 1;
       const response = await imagePickerModule.launchImageLibraryAsync({
         selectionLimit,
+        preferredAssetRepresentationMode,
         mediaTypes: (() => {
           switch (options?.mediaType) {
             case 'photo':

package/src/platform/createFileService.native.ts

@@ -110,6 +110,7 @@ const createNativeFileService = ({
       const response = await imagePickerModule.launchCamera({
         presentationStyle: 'fullScreen',
         cameraType: options?.cameraType ?? 'back',
+        assetRepresentationMode: 'compatible',
         mediaType: (() => {
           switch (options?.mediaType) {
             case 'photo':
@@ -151,6 +152,7 @@ const createNativeFileService = ({
       const response = await imagePickerModule.launchImageLibrary({
         presentationStyle: 'fullScreen',
         selectionLimit,
+        assetRepresentationMode: 'compatible',
         mediaType: (() => {
           switch (options?.mediaType) {
             case 'photo':

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.12.1';
+const VERSION = '3.12.3';
 export default VERSION;