@sendbird/uikit-react-native 3.10.2 → 3.11.0

package/src/components/ChannelInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
-  Keyboard,
   KeyboardAvoidingView,
   Platform,
   StyleProp,
@@ -95,12 +94,7 @@ export type ChannelInputProps = {
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const isAndroidApi35Plus = Platform.OS === 'android' && Platform.Version >= 35;
-const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({
-  ios: 'padding' as const,
-  android: isAndroidApi35Plus ? ('padding' as const) : undefined,
-  default: undefined,
-});
+const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
@@ -115,16 +109,6 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const safeArea = useSafeAreaPadding(['top', 'left', 'right', 'bottom']);
 
-  // Android API 35+ keyboard avoidance handling
-  /**
-   * Android API 35+ introduced edge-to-edge layouts, which changed how keyboard avoidance should be handled.
-   * For API 35+, the system manages insets automatically, so we use the provided keyboardAvoidOffset directly.
-   * For older Android versions, we manually subtract the safe area bottom padding to avoid overlapping with system UI.
-   * See: https://developer.android.com/develop/ui/views/layout/edge-to-edge
-   */
-  const keyboardVerticalOffset = isAndroidApi35Plus
-    ? keyboardAvoidOffset
-    : -safeArea.paddingBottom + keyboardAvoidOffset;
   const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
@@ -161,30 +145,16 @@ const ChannelInput = (props: ChannelInputProps) => {
     onChangeText(replace(text, searchStringRange.start, searchStringRange.end, mentionedMessageText), { user, range });
   };
 
-  const [keyboardShown, setKeyboardShown] = useState(false);
-
-  useEffect(() => {
-    const keyboardDidShow = () => setKeyboardShown(true);
-    const keyboardDidHide = () => setKeyboardShown(false);
-
-    const showSubscription = Keyboard.addListener('keyboardDidShow', keyboardDidShow);
-    const hideSubscription = Keyboard.addListener('keyboardDidHide', keyboardDidHide);
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
-  const shouldShowSafeAreaBottom = !isAndroidApi35Plus || (isAndroidApi35Plus && !keyboardShown);
-
   if (!props.shouldRenderInput) {
     return <SafeAreaBottom height={safeArea.paddingBottom} />;
   }
 
   return (
     <>
-      <KeyboardAvoidingView keyboardVerticalOffset={keyboardVerticalOffset} behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}>
+      <KeyboardAvoidingView
+        keyboardVerticalOffset={-safeArea.paddingBottom + keyboardAvoidOffset}
+        behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
+      >
         <View
           style={{
             paddingStart: safeArea.paddingStart,
@@ -224,7 +194,7 @@ const ChannelInput = (props: ChannelInputProps) => {
               />
             )}
           </View>
-          {shouldShowSafeAreaBottom && <SafeAreaBottom height={safeArea.paddingBottom} />}
+          <SafeAreaBottom height={safeArea.paddingBottom} />
         </View>
       </KeyboardAvoidingView>
       {mentionAvailable && props.SuggestedMentionList && (

package/src/hooks/useVoiceMessageInput.ts

@@ -161,8 +161,10 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
               setVoiceMessageRecordingPath({ recordFilePath: recorderService.uri, uri: recorderService.uri });
             }
           } else {
-            setVoiceMessageRecordingPath(fileService.createRecordFilePath(recorderService.options.extension));
-            await recorderService.record(getVoiceMessageRecordingPath().recordFilePath);
+            const recordFilePath = fileService.createRecordFilePath(recorderService.options.extension);
+            const convertedRecordPath = recorderService.convertRecordPath(recordFilePath.recordFilePath);
+            setVoiceMessageRecordingPath({ ...recordFilePath, recordFilePath: convertedRecordPath });
+            await recorderService.record(convertedRecordPath);
           }
         }
       },
@@ -225,6 +227,9 @@ const useVoiceMessageInput = ({ onSend, onClose }: Props): VoiceMessageInputResu
           matchesOneOf(status, ['recording', 'recording_completed', 'playing', 'playing_paused']) &&
           recordingPath.current
         ) {
+          if (status === 'recording') {
+            await recorderService.stop();
+          }
           const voiceFile = getVoiceMessageFileObject(recordingPath.current.uri, recorderService.options.extension);
           onSend(voiceFile, Math.floor(recordingTime.currentTime));
           await clear();

package/src/platform/createFileService.native.ts

@@ -242,7 +242,7 @@ const createNativeFileService = ({
       return Platform.select({
         ios: {
           uri: path,
-          recordFilePath: filename,
+          recordFilePath: path,
         },
         android: {
           uri: path.startsWith('file://') ? path : 'file://' + path,

package/src/platform/createPlayerService.native.tsx

@@ -1,155 +1,279 @@
 import { Platform } from 'react-native';
-import type * as RNAudioRecorder from 'react-native-audio-recorder-player';
+import type * as LegacyModule from 'react-native-audio-recorder-player';
+import type * as NitroSoundOrLegacyV4Module from 'react-native-nitro-sound';
 import * as Permissions from 'react-native-permissions';
 
 import { Logger, matchesOneOf, sleep } from '@sendbird/uikit-utils';
 
+import { AudioRecorderModule } from './createRecorderService.native';
 import type { PlayerServiceInterface, Unsubscribe } from './types';
 
+export type AudioPlayerModule = typeof LegacyModule | typeof NitroSoundOrLegacyV4Module;
+
 type Modules = {
-  audioRecorderModule: typeof RNAudioRecorder;
+  audioRecorderModule: AudioPlayerModule;
   permissionModule: typeof Permissions;
 };
 type PlaybackListener = Parameters<PlayerServiceInterface['addPlaybackListener']>[number];
 type StateListener = Parameters<PlayerServiceInterface['addStateListener']>[number];
-const createNativePlayerService = ({ audioRecorderModule, permissionModule }: Modules): PlayerServiceInterface => {
-  const module = new audioRecorderModule.default();
 
-  class VoicePlayer implements PlayerServiceInterface {
-    uri?: string;
-    state: PlayerServiceInterface['state'] = 'idle';
+interface PlayBackData {
+  currentPosition: number;
+  duration: number;
+}
+
+interface PlayerModuleAdapter {
+  setSubscriptionDuration(duration: number): Promise<void> | void;
+  addPlayBackListener(callback: (data: PlayBackData) => void): void;
+  removePlayBackListener(): void;
+  startPlayer(uri: string): Promise<void>;
+  pausePlayer(): Promise<void>;
+  resumePlayer(): Promise<void>;
+  stopPlayer(): Promise<void>;
+  seekToPlayer(time: number): Promise<void>;
+}
+
+class AudioRecorderPlayerAdapter implements PlayerModuleAdapter {
+  private module: InstanceType<typeof LegacyModule.default>;
+
+  constructor(audioRecorderModule: typeof LegacyModule) {
+    this.module = new audioRecorderModule.default();
+  }
+
+  async setSubscriptionDuration(duration: number): Promise<void> {
+    await this.module.setSubscriptionDuration(duration);
+  }
+
+  addPlayBackListener(callback: (data: PlayBackData) => void): void {
+    this.module.addPlayBackListener(callback);
+  }
+
+  removePlayBackListener(): void {
+    this.module.removePlayBackListener();
+  }
+
+  async startPlayer(uri: string): Promise<void> {
+    await this.module.startPlayer(uri);
+  }
+
+  async pausePlayer(): Promise<void> {
+    await this.module.pausePlayer();
+  }
+
+  async resumePlayer(): Promise<void> {
+    await this.module.resumePlayer();
+  }
+
+  async stopPlayer(): Promise<void> {
+    await this.module.stopPlayer();
+  }
+
+  async seekToPlayer(time: number): Promise<void> {
+    await this.module.seekToPlayer(time);
+  }
+}
+
+class NitroSoundOrLegacyV4Adapter implements PlayerModuleAdapter {
+  private module;
+
+  constructor(audioRecorderModule: typeof NitroSoundOrLegacyV4Module) {
+    this.module = audioRecorderModule.default;
+  }
+
+  setSubscriptionDuration(duration: number): void {
+    try {
+      this.module.setSubscriptionDuration(duration);
+    } catch (error) {
+      Logger.warn('[PlayerService.Native] Failed to set subscription duration', error);
+    }
+  }
+
+  addPlayBackListener(callback: (data: PlayBackData) => void): void {
+    this.module.addPlayBackListener(callback);
+  }
+
+  removePlayBackListener(): void {
+    this.module.removePlayBackListener();
+  }
+
+  async startPlayer(uri: string): Promise<void> {
+    await this.module.startPlayer(uri);
+  }
+
+  async pausePlayer(): Promise<void> {
+    await this.module.pausePlayer();
+  }
+
+  async resumePlayer(): Promise<void> {
+    await this.module.resumePlayer();
+  }
+
+  async stopPlayer(): Promise<void> {
+    await this.module.stopPlayer();
+  }
+
+  async seekToPlayer(time: number): Promise<void> {
+    await this.module.seekToPlayer(time);
+  }
+}
+
+class VoicePlayer implements PlayerServiceInterface {
+  public uri?: string;
+  public state: PlayerServiceInterface['state'] = 'idle';
+
+  private readonly playbackSubscribers = new Set<PlaybackListener>();
+  private readonly stateSubscribers = new Set<StateListener>();
 
-    private readonly playbackSubscribers = new Set<PlaybackListener>();
-    private readonly stateSubscribers = new Set<StateListener>();
+  constructor(private readonly adapter: PlayerModuleAdapter, private readonly permissionModule: typeof Permissions) {
+    this.initialize();
+  }
 
-    constructor() {
-      module.setSubscriptionDuration(0.1).catch((error) => {
+  private initialize(): void {
+    const setDurationResult = this.adapter.setSubscriptionDuration(0.1);
+    if (setDurationResult instanceof Promise) {
+      setDurationResult.catch((error) => {
         Logger.warn('[PlayerService.Native] Failed to set subscription duration', error);
       });
     }
+  }
 
-    private setState = (state: PlayerServiceInterface['state']) => {
-      this.state = state;
-      this.stateSubscribers.forEach((callback) => {
-        callback(state);
-      });
-    };
+  private setState = (state: PlayerServiceInterface['state']) => {
+    this.state = state;
+    this.stateSubscribers.forEach((callback) => {
+      callback(state);
+    });
+  };
 
-    private setListener = () => {
-      module.addPlayBackListener(async (data) => {
-        const stopped = data.currentPosition >= data.duration;
-
-        if (stopped) {
-          this.stop().catch((error) => {
-            Logger.warn('[PlayerService.Native] Failed to stop in PlayBackListener', error);
-          });
-        }
-        if (this.state === 'playing') {
-          this.playbackSubscribers.forEach((callback) => {
-            callback({ currentTime: data.currentPosition, duration: data.duration, stopped });
-          });
-        }
-      });
-    };
+  private setListener = () => {
+    this.adapter.addPlayBackListener(async (data) => {
+      const stopped = data.currentPosition >= data.duration;
 
-    private removeListener = () => {
-      module.removePlayBackListener();
-    };
+      if (stopped) {
+        this.stop().catch((error) => {
+          Logger.warn('[PlayerService.Native] Failed to stop in PlayBackListener', error);
+        });
+      }
+      if (this.state === 'playing') {
+        this.playbackSubscribers.forEach((callback) => {
+          callback({ currentTime: data.currentPosition, duration: data.duration, stopped });
+        });
+      }
+    });
+  };
 
-    public requestPermission = async (): Promise<boolean> => {
-      if (Platform.OS === 'android') {
-        if (Platform.Version > 32) return true;
+  private removeListener = () => {
+    this.adapter.removePlayBackListener();
+  };
 
-        const { READ_EXTERNAL_STORAGE } = permissionModule.PERMISSIONS.ANDROID;
+  public requestPermission = async (): Promise<boolean> => {
+    if (Platform.OS === 'android') {
+      if (Platform.Version > 32) return true;
 
-        const status = await permissionModule.check(READ_EXTERNAL_STORAGE);
-        if (status === 'granted') {
-          return true;
-        } else {
-          const status = await permissionModule.request(READ_EXTERNAL_STORAGE);
-          return status === 'granted';
-        }
-      } else {
+      const { READ_EXTERNAL_STORAGE } = this.permissionModule.PERMISSIONS.ANDROID;
+
+      const status = await this.permissionModule.check(READ_EXTERNAL_STORAGE);
+      if (status === 'granted') {
         return true;
+      } else {
+        const status = await this.permissionModule.request(READ_EXTERNAL_STORAGE);
+        return status === 'granted';
       }
-    };
+    } else {
+      return true;
+    }
+  };
 
-    public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
-      this.playbackSubscribers.add(callback);
-      return () => {
-        this.playbackSubscribers.delete(callback);
-      };
+  public addPlaybackListener = (callback: PlaybackListener): Unsubscribe => {
+    this.playbackSubscribers.add(callback);
+    return () => {
+      this.playbackSubscribers.delete(callback);
     };
+  };
 
-    public addStateListener = (callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe => {
-      this.stateSubscribers.add(callback);
-      return () => {
-        this.stateSubscribers.delete(callback);
-      };
+  public addStateListener = (callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe => {
+    this.stateSubscribers.add(callback);
+    return () => {
+      this.stateSubscribers.delete(callback);
     };
+  };
 
-    public play = async (uri: string): Promise<void> => {
-      if (matchesOneOf(this.state, ['idle', 'stopped'])) {
-        try {
-          this.setState('preparing');
-          this.uri = uri;
-          this.setListener();
-
-          // FIXME: Workaround, `module.startPlayer()` caused a significant frame-drop and prevented the 'preparing' UI transition.
-          await sleep(0);
-          await module.startPlayer(uri);
-
-          this.setState('playing');
-        } catch (e) {
-          this.setState('idle');
-          this.uri = undefined;
-          this.removeListener();
-          throw e;
-        }
-      } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
-        try {
-          this.setListener();
-          await module.resumePlayer();
-          this.setState('playing');
-        } catch (e) {
-          this.removeListener();
-          throw e;
-        }
-      }
-    };
+  public play = async (uri: string): Promise<void> => {
+    if (matchesOneOf(this.state, ['idle', 'stopped'])) {
+      try {
+        this.setState('preparing');
+        this.uri = uri;
+        this.setListener();
+
+        // FIXME: Workaround, `module.startPlayer()` caused a significant frame-drop and prevented the 'preparing' UI transition.
+        await sleep(0);
+        await this.adapter.startPlayer(uri);
 
-    public pause = async (): Promise<void> => {
-      if (matchesOneOf(this.state, ['playing'])) {
-        await module.pausePlayer();
+        this.setState('playing');
+      } catch (e) {
+        this.setState('idle');
+        this.uri = undefined;
         this.removeListener();
-        this.setState('paused');
+        throw e;
       }
-    };
-
-    public stop = async (): Promise<void> => {
-      if (matchesOneOf(this.state, ['preparing', 'playing', 'paused'])) {
-        await module.stopPlayer();
+    } else if (matchesOneOf(this.state, ['paused']) && this.uri === uri) {
+      try {
+        this.setListener();
+        await this.adapter.resumePlayer();
+        this.setState('playing');
+      } catch (e) {
         this.removeListener();
-        this.setState('stopped');
+        throw e;
       }
-    };
+    }
+  };
 
-    public reset = async (): Promise<void> => {
-      await this.stop();
-      this.setState('idle');
-      this.uri = undefined;
-      this.playbackSubscribers.clear();
-      this.stateSubscribers.clear();
-    };
+  public pause = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing'])) {
+      await this.adapter.pausePlayer();
+      this.removeListener();
+      this.setState('paused');
+    }
+  };
 
-    public seek = async (time: number): Promise<void> => {
-      if (matchesOneOf(this.state, ['playing', 'paused'])) {
-        await module.seekToPlayer(time);
-      }
-    };
-  }
+  public stop = async (): Promise<void> => {
+    if (matchesOneOf(this.state, ['preparing', 'playing', 'paused'])) {
+      await this.adapter.stopPlayer();
+      this.removeListener();
+      this.setState('stopped');
+    }
+  };
 
-  return new VoicePlayer();
+  public reset = async (): Promise<void> => {
+    await this.stop();
+    this.setState('idle');
+    this.uri = undefined;
+    this.playbackSubscribers.clear();
+    this.stateSubscribers.clear();
+  };
+
+  public seek = async (time: number): Promise<void> => {
+    if (matchesOneOf(this.state, ['playing', 'paused'])) {
+      await this.adapter.seekToPlayer(time);
+    }
+  };
+}
+
+const createNativePlayerService = (modules: Modules): PlayerServiceInterface => {
+  const adapter = isNitroSoundOrLegacyV4Module(modules.audioRecorderModule)
+    ? new NitroSoundOrLegacyV4Adapter(modules.audioRecorderModule)
+    : new AudioRecorderPlayerAdapter(modules.audioRecorderModule as typeof LegacyModule);
+
+  return new VoicePlayer(adapter, modules.permissionModule);
 };
 
+function isNitroSoundOrLegacyV4Module(module: AudioRecorderModule): module is typeof NitroSoundOrLegacyV4Module {
+  const isNitroSound = 'createSound' in module && typeof module.createSound === 'function';
+  const isLegacyV4 =
+    'default' in module && 'getHybridObject' in module.default && typeof module.default.getHybridObject === 'function';
+  if (isLegacyV4) {
+    Logger.warn('react-native-audio-recorder-player is deprecated. Please use react-native-nitro-sound instead.');
+  }
+  return isNitroSound || isLegacyV4;
+}
+
 export default createNativePlayerService;

package/src/platform/createRecorderService.expo.tsx

@@ -152,6 +152,10 @@ const createExpoRecorderService = ({ avModule }: Modules): RecorderServiceInterf
       this._recorder = new avModule.Audio.Recording();
       this.setState('idle');
     };
+
+    public convertRecordPath = (uri: string): string => {
+      return uri;
+    };
   }
 
   return new VoiceRecorder();