@sendbird/uikit-react-native 3.1.2 → 3.2.0

package/lib/module/platform/createRecorderService.native.js

@@ -0,0 +1,149 @@
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { Platform } from 'react-native';
+import { matchesOneOf, sleep } from '@sendbird/uikit-utils';
+import VoiceMessageConfig from '../libs/VoiceMessageConfig';
+import nativePermissionGranted from '../utils/nativePermissionGranted';
+const createNativeRecorderService = _ref => {
+  let {
+    audioRecorderModule,
+    permissionModule
+  } = _ref;
+  const module = new audioRecorderModule.default();
+  class VoiceRecorder {
+    constructor() {
+      _defineProperty(this, "uri", undefined);
+      _defineProperty(this, "state", 'idle');
+      _defineProperty(this, "options", {
+        minDuration: VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,
+        maxDuration: VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,
+        extension: VoiceMessageConfig.DEFAULT.RECORDER.EXTENSION
+      });
+      // NOTE: In Android, even when startRecorder() is awaited, if stop() is executed immediately afterward, an error occurs
+      _defineProperty(this, "_recordStartedAt", 0);
+      _defineProperty(this, "_getRecorderStopSafeBuffer", () => {
+        const minWaitingTime = 500;
+        const elapsedTime = Date.now() - this._recordStartedAt;
+        if (elapsedTime > minWaitingTime) return 0;else return minWaitingTime - elapsedTime;
+      });
+      _defineProperty(this, "recordingSubscribers", new Set());
+      _defineProperty(this, "stateSubscribers", new Set());
+      _defineProperty(this, "audioSettings", {
+        sampleRate: VoiceMessageConfig.DEFAULT.RECORDER.SAMPLE_RATE,
+        bitRate: VoiceMessageConfig.DEFAULT.RECORDER.BIT_RATE,
+        audioChannels: VoiceMessageConfig.DEFAULT.RECORDER.CHANNELS
+        // encoding: mpeg4_aac
+      });
+      _defineProperty(this, "audioOptions", Platform.select({
+        android: {
+          AudioEncodingBitRateAndroid: this.audioSettings.bitRate,
+          AudioChannelsAndroid: this.audioSettings.audioChannels,
+          AudioSamplingRateAndroid: this.audioSettings.sampleRate,
+          AudioEncoderAndroid: audioRecorderModule.AudioEncoderAndroidType.AAC,
+          OutputFormatAndroid: audioRecorderModule.OutputFormatAndroidType.MPEG_4,
+          AudioSourceAndroid: audioRecorderModule.AudioSourceAndroidType.VOICE_RECOGNITION
+        },
+        ios: {
+          AVEncoderBitRateKeyIOS: this.audioSettings.bitRate,
+          AVNumberOfChannelsKeyIOS: this.audioSettings.audioChannels,
+          AVSampleRateKeyIOS: this.audioSettings.sampleRate,
+          AVFormatIDKeyIOS: audioRecorderModule.AVEncodingOption.mp4,
+          // same with aac
+          AVEncoderAudioQualityKeyIOS: audioRecorderModule.AVEncoderAudioQualityIOSType.high
+        },
+        default: {}
+      }));
+      _defineProperty(this, "setState", state => {
+        this.state = state;
+        this.stateSubscribers.forEach(callback => {
+          callback(state);
+        });
+      });
+      _defineProperty(this, "requestPermission", async () => {
+        const permission = Platform.select({
+          android: [permissionModule.PERMISSIONS.ANDROID.RECORD_AUDIO],
+          ios: [permissionModule.PERMISSIONS.IOS.MICROPHONE],
+          windows: [permissionModule.PERMISSIONS.WINDOWS.MICROPHONE],
+          default: undefined
+        });
+        if (Platform.OS === 'android' && Platform.Version <= 28) {
+          permission === null || permission === void 0 ? void 0 : permission.push(permissionModule.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE);
+        }
+        if (permission) {
+          const status = await permissionModule.checkMultiple(permission);
+          if (nativePermissionGranted(status)) {
+            return true;
+          } else {
+            const status = await permissionModule.requestMultiple(permission);
+            return nativePermissionGranted(status);
+          }
+        } else {
+          return true;
+        }
+      });
+      _defineProperty(this, "addRecordingListener", callback => {
+        this.recordingSubscribers.add(callback);
+        return () => {
+          this.recordingSubscribers.delete(callback);
+        };
+      });
+      _defineProperty(this, "addStateListener", callback => {
+        this.stateSubscribers.add(callback);
+        return () => {
+          this.stateSubscribers.delete(callback);
+        };
+      });
+      _defineProperty(this, "record", async uri => {
+        if (matchesOneOf(this.state, ['idle', 'completed'])) {
+          try {
+            this.setState('preparing');
+            await module.startRecorder(uri, {
+              ...this.audioOptions
+            });
+            if (Platform.OS === 'android') {
+              this._recordStartedAt = Date.now();
+            }
+            this.uri = uri;
+            this.setState('recording');
+          } catch (e) {
+            this.setState('idle');
+            throw e;
+          }
+        }
+      });
+      _defineProperty(this, "stop", async () => {
+        if (matchesOneOf(this.state, ['recording'])) {
+          if (Platform.OS === 'android') {
+            const buffer = this._getRecorderStopSafeBuffer();
+            if (buffer > 0) await sleep(buffer);
+          }
+          await module.stopRecorder();
+          this.setState('completed');
+        }
+      });
+      _defineProperty(this, "reset", async () => {
+        await this.stop();
+        this.uri = undefined;
+        this.recordingSubscribers.clear();
+        this.setState('idle');
+      });
+      module.setSubscriptionDuration(0.1);
+      module.addRecordBackListener(data => {
+        const completed = data.currentPosition >= this.options.maxDuration;
+        if (completed) this.stop();
+        if (this.state === 'recording') {
+          this.recordingSubscribers.forEach(callback => {
+            callback({
+              currentTime: data.currentPosition,
+              completed
+            });
+          });
+        }
+      });
+    }
+  }
+  return new VoiceRecorder();
+};
+export default createNativeRecorderService;
+//# sourceMappingURL=createRecorderService.native.js.map

package/lib/module/platform/createRecorderService.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","matchesOneOf","sleep","VoiceMessageConfig","nativePermissionGranted","createNativeRecorderService","_ref","audioRecorderModule","permissionModule","module","default","VoiceRecorder","constructor","_defineProperty","undefined","minDuration","DEFAULT","RECORDER","MIN_DURATION","maxDuration","MAX_DURATION","extension","EXTENSION","minWaitingTime","elapsedTime","Date","now","_recordStartedAt","Set","sampleRate","SAMPLE_RATE","bitRate","BIT_RATE","audioChannels","CHANNELS","select","android","AudioEncodingBitRateAndroid","audioSettings","AudioChannelsAndroid","AudioSamplingRateAndroid","AudioEncoderAndroid","AudioEncoderAndroidType","AAC","OutputFormatAndroid","OutputFormatAndroidType","MPEG_4","AudioSourceAndroid","AudioSourceAndroidType","VOICE_RECOGNITION","ios","AVEncoderBitRateKeyIOS","AVNumberOfChannelsKeyIOS","AVSampleRateKeyIOS","AVFormatIDKeyIOS","AVEncodingOption","mp4","AVEncoderAudioQualityKeyIOS","AVEncoderAudioQualityIOSType","high","state","stateSubscribers","forEach","callback","permission","PERMISSIONS","ANDROID","RECORD_AUDIO","IOS","MICROPHONE","windows","WINDOWS","OS","Version","push","WRITE_EXTERNAL_STORAGE","status","checkMultiple","requestMultiple","recordingSubscribers","add","delete","uri","setState","startRecorder","audioOptions","e","buffer","_getRecorderStopSafeBuffer","stopRecorder","stop","clear","setSubscriptionDuration","addRecordBackListener","data","completed","currentPosition","options","currentTime"],"sources":["createRecorderService.native.tsx"],"sourcesContent":["import { Platform } from 'react-native';\nimport * as RNAudioRecorder from 'react-native-audio-recorder-player';\nimport * as Permissions from 'react-native-permissions';\nimport { Permission } from 'react-native-permissions/src/types';\n\nimport { matchesOneOf, sleep } from '@sendbird/uikit-utils';\n\nimport VoiceMessageConfig from '../libs/VoiceMessageConfig';\nimport nativePermissionGranted from '../utils/nativePermissionGranted';\nimport type { RecorderServiceInterface, Unsubscribe } from './types';\n\ntype RecordingListener = Parameters<RecorderServiceInterface['addRecordingListener']>[number];\ntype StateListener = Parameters<RecorderServiceInterface['addStateListener']>[number];\ntype Modules = {\n  audioRecorderModule: typeof RNAudioRecorder;\n  permissionModule: typeof Permissions;\n};\nconst createNativeRecorderService = ({ audioRecorderModule, permissionModule }: Modules): RecorderServiceInterface => {\n  const module = new audioRecorderModule.default();\n\n  class VoiceRecorder implements RecorderServiceInterface {\n    public uri: RecorderServiceInterface['uri'] = undefined;\n    public state: RecorderServiceInterface['state'] = 'idle';\n    public options: RecorderServiceInterface['options'] = {\n      minDuration: VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,\n      maxDuration: VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,\n      extension: VoiceMessageConfig.DEFAULT.RECORDER.EXTENSION,\n    };\n\n    // NOTE: In Android, even when startRecorder() is awaited, if stop() is executed immediately afterward, an error occurs\n    private _recordStartedAt = 0;\n    private _getRecorderStopSafeBuffer = () => {\n      const minWaitingTime = 500;\n      const elapsedTime = Date.now() - this._recordStartedAt;\n      if (elapsedTime > minWaitingTime) return 0;\n      else return minWaitingTime - elapsedTime;\n    };\n\n    private readonly recordingSubscribers = new Set<RecordingListener>();\n    private readonly stateSubscribers = new Set<StateListener>();\n    private readonly audioSettings = {\n      sampleRate: VoiceMessageConfig.DEFAULT.RECORDER.SAMPLE_RATE,\n      bitRate: VoiceMessageConfig.DEFAULT.RECORDER.BIT_RATE,\n      audioChannels: VoiceMessageConfig.DEFAULT.RECORDER.CHANNELS,\n      // encoding: mpeg4_aac\n    };\n    private readonly audioOptions = Platform.select({\n      android: {\n        AudioEncodingBitRateAndroid: this.audioSettings.bitRate,\n        AudioChannelsAndroid: this.audioSettings.audioChannels,\n        AudioSamplingRateAndroid: this.audioSettings.sampleRate,\n        AudioEncoderAndroid: audioRecorderModule.AudioEncoderAndroidType.AAC,\n        OutputFormatAndroid: audioRecorderModule.OutputFormatAndroidType.MPEG_4,\n        AudioSourceAndroid: audioRecorderModule.AudioSourceAndroidType.VOICE_RECOGNITION,\n      },\n      ios: {\n        AVEncoderBitRateKeyIOS: this.audioSettings.bitRate,\n        AVNumberOfChannelsKeyIOS: this.audioSettings.audioChannels,\n        AVSampleRateKeyIOS: this.audioSettings.sampleRate,\n        AVFormatIDKeyIOS: audioRecorderModule.AVEncodingOption.mp4, // same with aac\n        AVEncoderAudioQualityKeyIOS: audioRecorderModule.AVEncoderAudioQualityIOSType.high,\n      },\n      default: {},\n    });\n\n    constructor() {\n      module.setSubscriptionDuration(0.1);\n      module.addRecordBackListener((data) => {\n        const completed = data.currentPosition >= this.options.maxDuration;\n\n        if (completed) this.stop();\n        if (this.state === 'recording') {\n          this.recordingSubscribers.forEach((callback) => {\n            callback({ currentTime: data.currentPosition, completed });\n          });\n        }\n      });\n    }\n\n    private setState = (state: RecorderServiceInterface['state']) => {\n      this.state = state;\n      this.stateSubscribers.forEach((callback) => {\n        callback(state);\n      });\n    };\n\n    public requestPermission = async (): Promise<boolean> => {\n      const permission: Permission[] | undefined = Platform.select({\n        android: [permissionModule.PERMISSIONS.ANDROID.RECORD_AUDIO],\n        ios: [permissionModule.PERMISSIONS.IOS.MICROPHONE],\n        windows: [permissionModule.PERMISSIONS.WINDOWS.MICROPHONE],\n        default: undefined,\n      });\n\n      if (Platform.OS === 'android' && Platform.Version <= 28) {\n        permission?.push(permissionModule.PERMISSIONS.ANDROID.WRITE_EXTERNAL_STORAGE);\n      }\n\n      if (permission) {\n        const status = await permissionModule.checkMultiple(permission);\n        if (nativePermissionGranted(status)) {\n          return true;\n        } else {\n          const status = await permissionModule.requestMultiple(permission);\n          return nativePermissionGranted(status);\n        }\n      } else {\n        return true;\n      }\n    };\n\n    public addRecordingListener = (callback: RecordingListener): Unsubscribe => {\n      this.recordingSubscribers.add(callback);\n      return () => {\n        this.recordingSubscribers.delete(callback);\n      };\n    };\n\n    public addStateListener = (callback: StateListener): Unsubscribe => {\n      this.stateSubscribers.add(callback);\n      return () => {\n        this.stateSubscribers.delete(callback);\n      };\n    };\n\n    public record = async (uri: string): Promise<void> => {\n      if (matchesOneOf(this.state, ['idle', 'completed'])) {\n        try {\n          this.setState('preparing');\n          await module.startRecorder(uri, {\n            ...this.audioOptions,\n          });\n\n          if (Platform.OS === 'android') {\n            this._recordStartedAt = Date.now();\n          }\n\n          this.uri = uri;\n          this.setState('recording');\n        } catch (e) {\n          this.setState('idle');\n          throw e;\n        }\n      }\n    };\n\n    public stop = async (): Promise<void> => {\n      if (matchesOneOf(this.state, ['recording'])) {\n        if (Platform.OS === 'android') {\n          const buffer = this._getRecorderStopSafeBuffer();\n          if (buffer > 0) await sleep(buffer);\n        }\n\n        await module.stopRecorder();\n        this.setState('completed');\n      }\n    };\n\n    public reset = async (): Promise<void> => {\n      await this.stop();\n      this.uri = undefined;\n      this.recordingSubscribers.clear();\n      this.setState('idle');\n    };\n  }\n\n  return new VoiceRecorder();\n};\n\nexport default createNativeRecorderService;\n"],"mappings":"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"}

package/lib/module/platform/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type SBUError from '../libs/SBUError';\n\nexport type Unsubscribe = () => void | undefined;\nexport type DownloadedPath = string;\nexport type FilePickerResponse = FileType | null;\n\n/**\n * We are following the file format of react-native FormData\n * @see https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Network/FormData.js#L37-L41\n * */\nexport type FileType = { name: string; uri: string; size: number; type: string };\n\n// ---------- NotificationService ---------- //\nexport interface NotificationServiceInterface {\n  hasPushPermission(): Promise<boolean>;\n  requestPushPermission(): Promise<boolean>;\n\n  getAPNSToken(): Promise<string | null>;\n  getFCMToken(): Promise<string | null>;\n  onTokenRefresh(handler: (token: string) => void): Unsubscribe;\n}\n\n// ---------- ClipboardService ---------- //\nexport interface ClipboardServiceInterface {\n  setString(text: string): void;\n  getString(): Promise<string>;\n}\n\n// ---------- FileService ---------- //\nexport interface FileServiceInterface extends FilePickerServiceInterface, FileSystemServiceInterface {}\n\nexport interface OpenResultListener {\n  onOpenFailure?: (error: SBUError, originError?: unknown) => void;\n}\nexport interface OpenMediaLibraryOptions extends OpenResultListener {\n  selectionLimit?: number;\n  mediaType?: 'photo' | 'video' | 'all';\n}\nexport interface OpenCameraOptions extends OpenResultListener {\n  cameraType?: 'front' | 'back';\n  mediaType?: 'photo' | 'video' | 'all';\n}\nexport type OpenDocumentOptions = OpenResultListener;\nexport interface SaveOptions {\n  fileUrl: string;\n  fileName: string;\n  fileType?: string | null;\n}\n\nexport interface FilePickerServiceInterface {\n  openMediaLibrary(options?: OpenMediaLibraryOptions): Promise<null | FilePickerResponse[]>;\n  openCamera(options?: OpenCameraOptions): Promise<FilePickerResponse>;\n  openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse>;\n}\n\nexport interface FileSystemServiceInterface {\n  // NOTE: On iOS, You can access the downloaded files by providing options below to info.plist\n  // - Supports opening documents in place\n  // - Application supports iTunes file sharing\n  save(options?: SaveOptions): Promise<DownloadedPath | null>;\n}\n\n// ---------- MediaService ---------- //\nexport type VideoProps = {\n  source: { uri: string } | number;\n  resizeMode?: 'cover' | 'contain' | 'stretch';\n  onLoad?: () => void;\n};\n\nexport type GetVideoThumbnailOptions = {\n  url: string;\n  timeMills?: number;\n  quality?: number;\n};\nexport type GetVideoThumbnailResult = Promise<{ path: string } | null>;\n\nexport type CompressImageOptions = {\n  /**\n   * A uri of image file to compress\n   * */\n  uri: string;\n\n  /**\n   * A resize width, apply only to downscale\n   * */\n  maxWidth?: number;\n\n  /**\n   * A resize height, apply only to downscale\n   * */\n  maxHeight?: number;\n\n  /**\n   * A value in range 0.0 - 1.0 specifying compression level of the result image.\n   * 1 means highest quality and 0 the lowest quality.\n   * */\n  compressionRate?: number;\n};\nexport type CompressImageResult = Promise<{ uri: string; size: number } | null>;\n\nexport interface MediaServiceInterface {\n  VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;\n  getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;\n  compressImage(options: CompressImageOptions): CompressImageResult;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type SBUError from '../libs/SBUError';\n\nexport type Unsubscribe = () => void | undefined;\nexport type DownloadedPath = string;\nexport type FilePickerResponse = FileType | null;\n\n/**\n * We are following the file format of react-native FormData\n * @see https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Network/FormData.js#L37-L41\n * */\nexport type FileType = { name: string; uri: string; size: number; type: string };\n\n// ---------- NotificationService ---------- //\nexport interface NotificationServiceInterface {\n  hasPushPermission(): Promise<boolean>;\n  requestPushPermission(): Promise<boolean>;\n\n  getAPNSToken(): Promise<string | null>;\n  getFCMToken(): Promise<string | null>;\n  onTokenRefresh(handler: (token: string) => void): Unsubscribe;\n}\n\n// ---------- ClipboardService ---------- //\nexport interface ClipboardServiceInterface {\n  setString(text: string): void;\n  getString(): Promise<string>;\n}\n\n// ---------- FileService ---------- //\nexport interface FileServiceInterface extends FilePickerServiceInterface, FileSystemServiceInterface {}\n\nexport interface OpenResultListener {\n  onOpenFailure?: (error: SBUError, originError?: unknown) => void;\n}\nexport interface OpenMediaLibraryOptions extends OpenResultListener {\n  selectionLimit?: number;\n  mediaType?: 'photo' | 'video' | 'all';\n}\nexport interface OpenCameraOptions extends OpenResultListener {\n  cameraType?: 'front' | 'back';\n  mediaType?: 'photo' | 'video' | 'all';\n}\nexport type OpenDocumentOptions = OpenResultListener;\nexport interface SaveOptions {\n  fileUrl: string;\n  fileName: string;\n  fileType?: string | null;\n}\n\nexport interface FilePickerServiceInterface {\n  openMediaLibrary(options?: OpenMediaLibraryOptions): Promise<null | FilePickerResponse[]>;\n  openCamera(options?: OpenCameraOptions): Promise<FilePickerResponse>;\n  openDocument(options?: OpenDocumentOptions): Promise<FilePickerResponse>;\n}\n\nexport interface FileSystemServiceInterface {\n  // NOTE: On iOS, You can access the downloaded files by providing options below to info.plist\n  // - Supports opening documents in place\n  // - Application supports iTunes file sharing\n  save(options?: SaveOptions): Promise<DownloadedPath | null>;\n  createRecordFilePath(customExtension?: string): { recordFilePath: string; uri: string };\n}\n\n// ---------- MediaService ---------- //\nexport type VideoProps = {\n  source: { uri: string } | number;\n  resizeMode?: 'cover' | 'contain' | 'stretch';\n  onLoad?: () => void;\n};\n\nexport type GetVideoThumbnailOptions = {\n  url: string;\n  timeMills?: number;\n  quality?: number;\n};\nexport type GetVideoThumbnailResult = Promise<{ path: string } | null>;\n\nexport type CompressImageOptions = {\n  /**\n   * A uri of image file to compress\n   * */\n  uri: string;\n\n  /**\n   * A resize width, apply only to downscale\n   * */\n  maxWidth?: number;\n\n  /**\n   * A resize height, apply only to downscale\n   * */\n  maxHeight?: number;\n\n  /**\n   * A value in range 0.0 - 1.0 specifying compression level of the result image.\n   * 1 means highest quality and 0 the lowest quality.\n   * */\n  compressionRate?: number;\n};\nexport type CompressImageResult = Promise<{ uri: string; size: number } | null>;\n\nexport interface MediaServiceInterface {\n  VideoComponent<Props = {}>(props: VideoProps & Props): ReactNode;\n  getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;\n  compressImage(options: CompressImageOptions): CompressImageResult;\n}\n\n// ---------- PlayerService ---------- //\nexport interface PlayerServiceInterface {\n  uri?: string;\n  state: 'idle' | 'preparing' | 'playing' | 'paused' | 'stopped';\n\n  /**\n   * Check and request permission for the player.\n   * */\n  requestPermission(): Promise<boolean>;\n\n  /**\n   * Add a playback listener.\n   * */\n  addPlaybackListener(\n    callback: (params: { currentTime: number; duration: number; stopped: boolean }) => void,\n  ): Unsubscribe;\n\n  /**\n   * Add a state listener.\n   * */\n  addStateListener(callback: (state: PlayerServiceInterface['state']) => void): Unsubscribe;\n\n  /**\n   * State transition:\n   *   [idle, stopped] to [playing] - start from the beginning\n   *   [paused] to [playing] - resume\n   * */\n  play(uri: string): Promise<void>;\n\n  /**\n   * State transition:\n   *   [playing] to [paused]\n   * */\n  pause(): Promise<void>;\n\n  /**\n   * State transition:\n   *   [preparing, playing, paused] to [stop]\n   * */\n  stop(): Promise<void>;\n\n  /**\n   * State transition:\n   *   [*] to [idle]\n   * */\n  reset(): Promise<void>;\n\n  /**\n   * Seek time, only available when the state is [playing, paused].\n   * */\n  seek(time: number): Promise<void>;\n}\n\n// ---------- RecorderService ---------- //\nexport interface RecorderOptions {\n  /**\n   * Minimum recording duration (milliseconds).\n   * */\n  minDuration: number;\n\n  /**\n   * Maximum recording duration (milliseconds).\n   * */\n  maxDuration: number;\n\n  /**\n   * File extension for recorded audio file\n   * */\n  extension: string;\n}\n\nexport interface RecorderServiceInterface {\n  uri?: string;\n  options: RecorderOptions;\n  state: 'idle' | 'preparing' | 'recording' | 'completed';\n\n  /**\n   * Check and request permission for the recorder.\n   * */\n  requestPermission(): Promise<boolean>;\n\n  /**\n   * Add recording listener.\n   * */\n  addRecordingListener(callback: (params: { currentTime: number; completed: boolean }) => void): Unsubscribe;\n\n  /**\n   * Add state listener.\n   * */\n  addStateListener(callback: (state: RecorderServiceInterface['state']) => void): Unsubscribe;\n\n  /**\n   * State transition:\n   *   [idle, completed] to [recording]\n   * */\n  record(uri?: string): Promise<void>;\n\n  /**\n   * State transition:\n   *   [recording] to [completed]\n   * */\n  stop(): Promise<void>;\n\n  /**\n   * State transition:\n   *   [*] to [idle]\n   * */\n  reset(): Promise<void>;\n}\n"],"mappings":""}

package/lib/module/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ErrorInfo, ReactNode } from 'react';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nexport type KeyValuePairGet = [string, string | null];\nexport type KeyValuePairSet = [string, string];\nexport interface LocalCacheStorage {\n  getAllKeys(): Promise<readonly string[] | string[]>;\n  getItem(key: string): Promise<string | null>;\n  setItem(key: string, value: string): Promise<void>;\n  removeItem(key: string): Promise<void>;\n\n  multiSet?(keyValuePairs: Array<KeyValuePairSet>): Promise<void>;\n  multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;\n  multiRemove?(keys: string[]): Promise<void>;\n}\n\nexport type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };\n\nexport type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | JSX.Element; //ReactNode;\n\nexport type MentionedUser = {\n  range: Range;\n  user: SendbirdUser;\n};\n\nexport type Range = {\n  start: number;\n  end: number;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { ErrorInfo, ReactNode } from 'react';\n\nimport type { SendbirdUser } from '@sendbird/uikit-utils';\n\nexport type KeyValuePairGet = [string, string | null];\nexport type KeyValuePairSet = [string, string];\nexport interface LocalCacheStorage {\n  getAllKeys(): Promise<readonly string[] | string[]>;\n  getItem(key: string): Promise<string | null>;\n  setItem(key: string, value: string): Promise<void>;\n  removeItem(key: string): Promise<void>;\n\n  multiSet?(keyValuePairs: Array<KeyValuePairSet>): Promise<void>;\n  multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;\n  multiRemove?(keys: string[]): Promise<void>;\n}\n\nexport type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };\n\nexport type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | ReactNode;\n\nexport type MentionedUser = {\n  range: Range;\n  user: SendbirdUser;\n};\n\nexport type Range = {\n  start: number;\n  end: number;\n};\n"],"mappings":""}

package/lib/module/version.js

@@ -1,3 +1,3 @@
-const VERSION = '3.1.2';
+const VERSION = '3.2.0';
 export default VERSION;
 //# sourceMappingURL=version.js.map

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.1.2';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.2.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO"}

package/lib/typescript/src/components/ChannelCover.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { SendbirdBaseChannel } from '@sendbird/uikit-utils';
 type Props = {
@@ -5,5 +6,5 @@ type Props = {
     size: number;
     containerStyle?: StyleProp<ViewStyle>;
 };
-declare const ChannelCover: ({ channel, ...avatarProps }: Props) => JSX.Element;
+declare const ChannelCover: ({ channel, ...avatarProps }: Props) => React.JSX.Element;
 export default ChannelCover;

package/lib/typescript/src/components/ChannelInput/AttachmentsButton.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 export type AttachmentsButtonProps = {
     onPress: () => void;
     disabled: boolean;
 };
-declare const AttachmentsButton: ({ onPress, disabled }: AttachmentsButtonProps) => JSX.Element;
+declare const AttachmentsButton: ({ onPress, disabled }: AttachmentsButtonProps) => React.JSX.Element;
 export default AttachmentsButton;

package/lib/typescript/src/components/ChannelInput/MessageToReplyPreview.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+export type MessageToReplyPreviewProps = {
+    messageToReply?: SendbirdFileMessage | SendbirdUserMessage;
+    setMessageToReply?: (message?: undefined | SendbirdFileMessage | SendbirdUserMessage) => void;
+};
+export declare const MessageToReplyPreview: ({ messageToReply, setMessageToReply }: MessageToReplyPreviewProps) => React.JSX.Element | null;

package/lib/typescript/src/components/ChannelInput/VoiceMessageInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { FileType } from '../../platform/types';
+export type VoiceMessageInputProps = {
+    onClose: () => Promise<void>;
+    onSend: (params: {
+        file: FileType;
+        duration: number;
+    }) => void;
+};
+declare const VoiceMessageInput: ({ onClose, onSend }: VoiceMessageInputProps) => React.JSX.Element;
+export default VoiceMessageInput;

package/lib/typescript/src/components/ChannelInput/index.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import { SendbirdBaseChannel, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdFileMessageUpdateParams, SendbirdMember, SendbirdUserMessage, SendbirdUserMessageCreateParams, SendbirdUserMessageUpdateParams } from '@sendbird/uikit-utils';
 import type { MentionedUser, Range } from '../../types';
 import type { AttachmentsButtonProps } from './AttachmentsButton';
+import type { MessageToReplyPreviewProps } from './MessageToReplyPreview';
+import { VoiceMessageInputProps } from './VoiceMessageInput';
 export type SuggestedMentionListProps = {
     text: string;
     selection: Range;
@@ -26,8 +28,10 @@ export type ChannelInputProps = {
     setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
     messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
     setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
-    SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
-    AttachmentsButton?: (props: AttachmentsButtonProps) => JSX.Element | null;
+    SuggestedMentionList?: (props: SuggestedMentionListProps) => React.ReactNode | null;
+    AttachmentsButton?: (props: AttachmentsButtonProps) => React.ReactNode | null;
+    MessageToReplyPreview?: (props: MessageToReplyPreviewProps) => React.ReactNode | null;
+    VoiceMessageInput?: (props: VoiceMessageInputProps) => React.ReactNode | null;
 };
-declare const _default: React.MemoExoticComponent<(props: ChannelInputProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<(props: ChannelInputProps) => React.JSX.Element>;
 export default _default;

package/lib/typescript/src/components/ChannelMessageList/index.d.ts

@@ -52,5 +52,5 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
 } & {
     ref?: Ref<FlatList<SendbirdMessage>> | undefined;
 };
-declare const _default: <T extends import("@sendbird/chat/openChannel").OpenChannel | import("@sendbird/chat/groupChannel").GroupChannel>({ searchItem, hasNext, channel, onEditMessage, onReplyMessage, onDeleteMessage, onResendFailedMessage, onPressMediaMessage, onPressParentMessage, currentUserId, renderNewMessagesButton, renderScrollToBottomButton, renderMessage, messages, newMessages, enableMessageGrouping, onScrolledAwayFromBottom, scrolledAwayFromBottom, onBottomReached, onTopReached, flatListProps, onPressNewMessagesButton, onPressScrollToBottomButton, }: ChannelMessageListProps<T>, ref: React.ForwardedRef<FlatList<SendbirdMessage>>) => JSX.Element;
+declare const _default: <T extends import("@sendbird/chat/openChannel").OpenChannel | import("@sendbird/chat/groupChannel").GroupChannel>({ searchItem, hasNext, channel, onEditMessage, onReplyMessage, onDeleteMessage, onResendFailedMessage, onPressMediaMessage, onPressParentMessage, currentUserId, renderNewMessagesButton, renderScrollToBottomButton, renderMessage, messages, newMessages, enableMessageGrouping, onScrolledAwayFromBottom, scrolledAwayFromBottom, onBottomReached, onTopReached, flatListProps, onPressNewMessagesButton, onPressScrollToBottomButton, }: ChannelMessageListProps<T>, ref: React.ForwardedRef<FlatList<SendbirdMessage>>) => React.JSX.Element;
 export default _default;

package/lib/typescript/src/components/FileViewer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
 type Props = {
     fileMessage: SendbirdFileMessage;
@@ -8,5 +9,5 @@ type Props = {
     headerShown?: boolean;
     headerTopInset?: number;
 };
-declare const FileViewer: ({ headerShown, deleteMessage, headerTopInset, fileMessage, onPressDownload, onPressDelete, onClose, }: Props) => JSX.Element;
+declare const FileViewer: ({ headerShown, deleteMessage, headerTopInset, fileMessage, onPressDownload, onPressDelete, onClose, }: Props) => React.JSX.Element;
 export default FileViewer;

package/lib/typescript/src/components/GroupChannelMessageRenderer/GroupChannelMessageDateSeparator.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 declare const GroupChannelMessageDateSeparator: ({ message, prevMessage, }: {
     message: SendbirdMessage;
     prevMessage?: SendbirdMessage | undefined;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default GroupChannelMessageDateSeparator;

package/lib/typescript/src/components/GroupChannelMessageRenderer/GroupChannelMessageFocusAnimation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 declare const GroupChannelMessageFocusAnimation: (props: React.PropsWithChildren<{
     focused: boolean;
-}>) => JSX.Element;
+}>) => React.JSX.Element;
 export default GroupChannelMessageFocusAnimation;

package/lib/typescript/src/components/GroupChannelMessageRenderer/GroupChannelMessageOutgoingStatus.d.ts

@@ -6,5 +6,5 @@ type Props = {
     message: SendbirdMessage;
     style?: StyleProp<ImageStyle>;
 };
-declare const _default: React.MemoExoticComponent<({ channel, message, style }: Props) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ channel, message, style }: Props) => React.JSX.Element | null>;
 export default _default;

package/lib/typescript/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.d.ts

@@ -1,9 +1,11 @@
-import { SendbirdFileMessage, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import React from 'react';
+import { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
 type Props = {
     variant: 'outgoing' | 'incoming';
+    channel: SendbirdGroupChannel;
     message: SendbirdUserMessage | SendbirdFileMessage;
     childMessage: SendbirdUserMessage | SendbirdFileMessage;
     onPress?: (message: SendbirdMessage) => void;
 };
-declare const GroupChannelMessageParentMessage: ({ variant, message, childMessage, onPress }: Props) => JSX.Element;
+declare const GroupChannelMessageParentMessage: ({ variant, channel, message, childMessage, onPress }: Props) => React.JSX.Element;
 export default GroupChannelMessageParentMessage;

package/lib/typescript/src/components/NewMessagesButton.d.ts

@@ -5,5 +5,5 @@ type Props = {
     visible: boolean;
     onPress: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ newMessages, visible, onPress }: Props) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ newMessages, visible, onPress }: Props) => React.JSX.Element | null>;
 export default _default;

package/lib/typescript/src/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 declare const OpenChannelMessageDateSeparator: ({ message, prevMessage, }: {
     message: SendbirdMessage;
     prevMessage?: SendbirdMessage | undefined;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default OpenChannelMessageDateSeparator;

package/lib/typescript/src/components/ProviderLayout.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ProviderLayout: ({ children }: React.PropsWithChildren) => JSX.Element;
+declare const ProviderLayout: ({ children }: React.PropsWithChildren) => React.JSX.Element;
 export default ProviderLayout;

package/lib/typescript/src/components/ReactionAddons/BottomSheetReactionAddon.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 type Props = {
     onClose: () => Promise<void>;
     channel: SendbirdBaseChannel;
     message: SendbirdBaseMessage;
 };
-declare const BottomSheetReactionAddon: ({ onClose, message, channel }: Props) => JSX.Element;
+declare const BottomSheetReactionAddon: ({ onClose, message, channel }: Props) => React.JSX.Element;
 export default BottomSheetReactionAddon;

package/lib/typescript/src/components/ReactionAddons/MessageReactionAddon.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
 declare const MessageReactionAddon: ({ channel, message }: {
     channel: SendbirdBaseChannel;
     message: SendbirdBaseMessage;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default MessageReactionAddon;

package/lib/typescript/src/components/ReactionAddons/ReactionRoundedButton.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 type Props = {
     url: string;
@@ -6,9 +7,9 @@ type Props = {
     style: StyleProp<ViewStyle>;
 };
 declare const ReactionRoundedButton: {
-    ({ url, count, reacted, style }: Props): JSX.Element;
+    ({ url, count, reacted, style }: Props): React.JSX.Element;
     More({ pressed }: {
         pressed: boolean;
-    }): JSX.Element;
+    }): React.JSX.Element;
 };
 export default ReactionRoundedButton;

package/lib/typescript/src/components/ReactionAddons/index.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="react" />
 export declare const ReactionAddons: {
     BottomSheet: ({ onClose, message, channel }: {
         onClose: () => Promise<void>;
         channel: import("@sendbird/chat").BaseChannel;
         message: import("@sendbird/chat/message").BaseMessage;
-    }) => JSX.Element;
+    }) => import("react").JSX.Element;
     Message: ({ channel, message }: {
         channel: import("@sendbird/chat").BaseChannel;
         message: import("@sendbird/chat/message").BaseMessage;
-    }) => JSX.Element | null;
+    }) => import("react").JSX.Element | null;
 };

package/lib/typescript/src/components/ReactionBottomSheets/ReactionListBottomSheet.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactionBottomSheetProps } from './index';
-declare const ReactionListBottomSheet: ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => JSX.Element;
+declare const ReactionListBottomSheet: ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => React.JSX.Element;
 export default ReactionListBottomSheet;

package/lib/typescript/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ReactionBottomSheetProps } from './index';
-declare const ReactionUserListBottomSheet: ({ visible, onClose, onDismiss, reactionCtx, chatCtx, localizationCtx, userProfileCtx, }: ReactionBottomSheetProps) => JSX.Element;
+declare const ReactionUserListBottomSheet: ({ visible, onClose, onDismiss, reactionCtx, chatCtx, localizationCtx, onPressUserProfile, }: ReactionBottomSheetProps) => React.JSX.Element;
 export default ReactionUserListBottomSheet;

package/lib/typescript/src/components/ReactionBottomSheets/index.d.ts

@@ -1,20 +1,20 @@
 import type React from 'react';
+import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
 import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
-import type { UserProfileContext } from '../../contexts/UserProfileCtx';
 type GetFromContext<T> = T extends React.Context<infer Value> ? NonNullable<Value> : never;
 export type ReactionBottomSheetProps = {
     visible: boolean;
     onDismiss: () => void;
     onClose: () => Promise<void>;
+    onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
     chatCtx: GetFromContext<typeof SendbirdChatContext>;
     reactionCtx: GetFromContext<typeof ReactionContext>;
     localizationCtx: GetFromContext<typeof LocalizationContext>;
-    userProfileCtx: GetFromContext<typeof UserProfileContext>;
 };
 export declare const ReactionBottomSheets: {
-    ReactionList: ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => JSX.Element;
-    UserList: ({ visible, onClose, onDismiss, reactionCtx, chatCtx, localizationCtx, userProfileCtx, }: ReactionBottomSheetProps) => JSX.Element;
+    ReactionList: ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => React.JSX.Element;
+    UserList: ({ visible, onClose, onDismiss, reactionCtx, chatCtx, localizationCtx, onPressUserProfile, }: ReactionBottomSheetProps) => React.JSX.Element;
 };
 export {};

package/lib/typescript/src/components/ScrollToBottomButton.d.ts

@@ -3,5 +3,5 @@ type Props = {
     visible: boolean;
     onPress: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ visible, onPress }: Props) => JSX.Element | null>;
+declare const _default: React.MemoExoticComponent<({ visible, onPress }: Props) => React.JSX.Element | null>;
 export default _default;

package/lib/typescript/src/components/StatusComposition.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 type Props = {
     loading?: boolean;
-    LoadingComponent?: JSX.Element;
+    LoadingComponent?: ReactNode;
     error?: boolean;
-    ErrorComponent?: JSX.Element;
+    ErrorComponent?: ReactNode;
     children: React.ReactNode;
 };
-declare const StatusComposition: ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => JSX.Element;
+declare const StatusComposition: ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => React.JSX.Element;
 export default StatusComposition;

package/lib/typescript/src/components/TypedPlaceholder.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 type Props = {
     type: 'no-muted-members' | 'no-muted-participants' | 'no-banned-users' | 'no-channels' | 'no-messages' | 'no-users' | 'no-results-found' | 'error-wrong' | 'loading';
     onPressRetry?: () => void;
 };
-declare const TypedPlaceholder: ({ type, onPressRetry }: Props) => JSX.Element;
+declare const TypedPlaceholder: ({ type, onPressRetry }: Props) => React.JSX.Element;
 export default TypedPlaceholder;

package/lib/typescript/src/components/UserActionBar.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { GestureResponderEvent } from 'react-native';
 type Props = {
     uri: string;
@@ -8,5 +9,5 @@ type Props = {
     onPressActionMenu?: (ev: GestureResponderEvent) => void;
     onPressAvatar?: (ev: GestureResponderEvent) => void;
 };
-declare const UserActionBar: ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => JSX.Element;
+declare const UserActionBar: ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => React.JSX.Element;
 export default UserActionBar;

package/lib/typescript/src/components/UserSelectableBar.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 type Props = {
     uri: string;
     name: string;
     selected: boolean;
     disabled: boolean;
 };
-declare const UserSelectableBar: ({ uri, name, selected, disabled }: Props) => JSX.Element;
+declare const UserSelectableBar: ({ uri, name, selected, disabled }: Props) => React.JSX.Element;
 export default UserSelectableBar;

package/lib/typescript/src/constants.d.ts

@@ -2,3 +2,5 @@ export declare const DEFAULT_LONG_PRESS_DELAY = 350;
 export declare const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
 export declare const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
 export declare const UNKNOWN_USER_ID = "##__USER_ID_IS_NOT_PROVIDED__##";
+export declare const VOICE_MESSAGE_META_ARRAY_DURATION_KEY = "KEY_VOICE_MESSAGE_DURATION";
+export declare const VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY = "KEY_INTERNAL_MESSAGE_TYPE";

package/lib/typescript/src/containers/GroupChannelPreviewContainer.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 type Props = {
     channel: SendbirdGroupChannel;
     onPress: () => void;
     onLongPress: () => void;
 };
-declare const GroupChannelPreviewContainer: ({ onPress, onLongPress, channel }: Props) => JSX.Element;
+declare const GroupChannelPreviewContainer: ({ onPress, onLongPress, channel }: Props) => React.JSX.Element;
 export default GroupChannelPreviewContainer;

package/lib/typescript/src/containers/InternalErrorBoundaryContainer.d.ts

@@ -2,11 +2,11 @@ import React, { ErrorInfo } from 'react';
 import type { ErrorBoundaryProps } from '../types';
 declare class InternalErrorBoundaryContainer extends React.PureComponent<{
     onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
     children?: React.ReactNode;
 }> {
     static defaultProps: {
-        ErrorInfoComponent: (props: ErrorBoundaryProps) => JSX.Element;
+        ErrorInfoComponent: (props: ErrorBoundaryProps) => React.JSX.Element;
     };
     state: {
         error: Error | null;
@@ -14,6 +14,6 @@ declare class InternalErrorBoundaryContainer extends React.PureComponent<{
     };
     componentDidCatch: (error: Error, errorInfo: ErrorInfo) => void;
     reset: () => void;
-    render: () => JSX.Element | null;
+    render: () => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null;
 }
 export default InternalErrorBoundaryContainer;