feat: add support for react compiler on RN 0.77 (#3024)

Author: isekovanic

package/expo-package/yarn.lock

@@ -4733,10 +4733,10 @@ [email protected], stream-buffers@~2.2.0:
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4"
   integrity sha512-uyQK/mx5QjHun80FLJTfaWE7JtwfRMKBLkMne6udYOmvH0CawotVa7TfgYHzAnpphn4+TweIx1QKMnRIbipmUg==
 
-[email protected].7:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.7.tgz#d887234af18890c3396f1b8b5f169d9b28a793ab"
-  integrity sha512-Xc/S92nUBSwfVPZqNjt/zNs/DJcRV1aRa/+yCSBCqjCwo0EuiWEP9yKy3xGxBkehNe4vaIDvkeREduA4dRUGpA==
+[email protected].8:
+  version "6.6.8"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.8.tgz#483ade63ba051426480ab2dfd8ab3b248b90ae88"
+  integrity sha512-F8S70DHaiit6BEdKOkSMHq2bjMONhrouvJ+szBQuE430EJDgUlc2VErHk3yJCzqIt5lwfVZktjHuqSIOGVg5LQ==
   dependencies:
     "@gorhom/bottom-sheet" "^5.1.1"
     dayjs "1.10.5"

package/native-package/src/optionalDependencies/FlatList.ts

@@ -1,10 +1,9 @@
 import { FlatList as DefaultFlatList, Platform } from 'react-native';
 let FlatList;
 
-
 if (Platform.constants.reactNativeVersion.minor < 72) {
   const upgradeLog =
-  "'@stream-io/flat-list-mvcp' is deprecated, please upgrade your react-native version to >0.71 to get same the benefits on the default FlatList and uninstall the package.";
+    "'@stream-io/flat-list-mvcp' is deprecated, please upgrade your react-native version to >0.71 to get same the benefits on the default FlatList and uninstall the package.";
   try {
     FlatList = require('@stream-io/flat-list-mvcp').FlatList;
     console.log(upgradeLog);

package/native-package/yarn.lock

@@ -3409,10 +3409,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-[email protected].7:
-  version "6.6.7"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.7.tgz#d887234af18890c3396f1b8b5f169d9b28a793ab"
-  integrity sha512-Xc/S92nUBSwfVPZqNjt/zNs/DJcRV1aRa/+yCSBCqjCwo0EuiWEP9yKy3xGxBkehNe4vaIDvkeREduA4dRUGpA==
+[email protected].8:
+  version "6.6.8"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-6.6.8.tgz#483ade63ba051426480ab2dfd8ab3b248b90ae88"
+  integrity sha512-F8S70DHaiit6BEdKOkSMHq2bjMONhrouvJ+szBQuE430EJDgUlc2VErHk3yJCzqIt5lwfVZktjHuqSIOGVg5LQ==
   dependencies:
     "@gorhom/bottom-sheet" "^5.1.1"
     dayjs "1.10.5"

package/src/components/Attachment/AudioAttachment.tsx

@@ -8,9 +8,8 @@ import { useTheme } from '../../contexts';
 import { useAudioPlayer } from '../../hooks/useAudioPlayer';
 import { Audio, Pause, Play } from '../../icons';
 import {
+  NativeHandlers,
   PlaybackStatus,
-  SDK,
-  Sound,
   SoundReturnType,
   VideoPayloadData,
   VideoProgressData,
@@ -51,7 +50,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
     testID,
   } = props;
   const { changeAudioSpeed, pauseAudio, playAudio, seekAudio } = useAudioPlayer({ soundRef });
-  const isExpoCLI = SDK === 'stream-chat-expo';
+  const isExpoCLI = NativeHandlers.SDK === 'stream-chat-expo';
   const isVoiceRecording = item.type === FileTypes.VoiceRecording;
 
   /** This is for Native CLI Apps */
@@ -181,8 +180,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
   useEffect(() => {
     if (isExpoCLI) {
       const initiateSound = async () => {
-        if (item && item.file && item.file.uri) {
-          soundRef.current = await Sound.initializeSound(
+        if (item && item.file && item.file.uri && NativeHandlers.Sound?.initializeSound) {
+          soundRef.current = await NativeHandlers.Sound.initializeSound(
             { uri: item.file.uri },
             {
               progressUpdateIntervalMillis: 100,
@@ -216,7 +215,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       }
     };
     // For expo CLI
-    if (!Sound.Player) {
+    if (!NativeHandlers.Sound?.Player) {
       initalPlayPause();
     }
   }, [item.paused, isExpoCLI, pauseAudio, playAudio]);
@@ -344,8 +343,8 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
             </View>
           )}
         </View>
-        {Sound.Player && (
-          <Sound.Player
+        {NativeHandlers.Sound?.Player && (
+          <NativeHandlers.Sound.Player
             onEnd={handleEnd}
             onLoad={handleLoad}
             onProgress={handleProgress}

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -17,7 +17,7 @@ import {
 } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useScreenDimensions } from '../../hooks/useScreenDimensions';
-import { getPhotos, oniOS14GalleryLibrarySelectionChange } from '../../native';
+import { NativeHandlers } from '../../native';
 import type { Asset } from '../../types/types';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
 import { BottomSheetFlatList } from '../BottomSheetCompatibility/BottomSheetFlatList';
@@ -122,11 +122,12 @@ export const AttachmentPicker = React.forwardRef(
         setLoadingPhotos(true);
         const endCursor = endCursorRef.current;
         try {
-          if (!getPhotos) {
+          if (!NativeHandlers.getPhotos) {
             setPhotos([]);
             setIosLimited(false);
+            return;
           }
-          const results = await getPhotos({
+          const results = await NativeHandlers.getPhotos({
             after: endCursor,
             first: numberOfAttachmentImagesToLoadPerCall ?? 60,
           });
@@ -153,11 +154,11 @@ export const AttachmentPicker = React.forwardRef(
         return;
       }
 
-      if (!oniOS14GalleryLibrarySelectionChange) {
+      if (!NativeHandlers.oniOS14GalleryLibrarySelectionChange) {
         return;
       }
       // ios 14 library selection change event is fired when user reselects the images that are permitted to be readable by the app
-      const { unsubscribe } = oniOS14GalleryLibrarySelectionChange(() => {
+      const { unsubscribe } = NativeHandlers.oniOS14GalleryLibrarySelectionChange(() => {
         // we reset the cursor and has next page to true to facilitate fetching of the first page of photos again
         hasNextPageRef.current = true;
         endCursorRef.current = undefined;

package/src/components/AttachmentPicker/components/AttachmentPickerIOSSelectMorePhotos.tsx

@@ -3,7 +3,7 @@ import { Pressable, StyleSheet, Text } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { iOS14RefreshGallerySelection } from '../../../native';
+import { NativeHandlers } from '../../../native';
 
 export const AttachmentPickerIOSSelectMorePhotos = () => {
   const { t } = useTranslationContext();
@@ -13,13 +13,13 @@ export const AttachmentPickerIOSSelectMorePhotos = () => {
     },
   } = useTheme();
 
-  if (!iOS14RefreshGallerySelection) {
+  if (!NativeHandlers.iOS14RefreshGallerySelection) {
     return null;
   }
 
   return (
     <Pressable
-      onPress={iOS14RefreshGallerySelection}
+      onPress={NativeHandlers.iOS14RefreshGallerySelection}
       style={[styles.container, { backgroundColor: white }]}
     >
       <Text style={[styles.text, { color: accent_blue }]}>{t<string>('Select More Photos')}</Text>

package/src/components/Channel/Channel.tsx

@@ -84,10 +84,10 @@ import {
   WutReaction,
 } from '../../icons';
 import {
-  FlatList as FlatListDefault,
   isDocumentPickerAvailable,
   isImageMediaLibraryAvailable,
   isImagePickerAvailable,
+  NativeHandlers,
 } from '../../native';
 import * as dbApi from '../../store/apis';
 import { ChannelUnreadState, DefaultStreamChatGenerics, FileTypes } from '../../types/types';
@@ -538,7 +538,7 @@ const ChannelWithContext = <
     FileAttachmentGroup = FileAttachmentGroupDefault,
     FileAttachmentIcon = FileIconDefault,
     FileUploadPreview = FileUploadPreviewDefault,
-    FlatList = FlatListDefault,
+    FlatList = NativeHandlers.FlatList,
     forceAlignMessages,
     Gallery = GalleryDefault,
     getMessagesGroupStyles,

package/src/components/Chat/Chat.tsx

@@ -23,7 +23,7 @@ import {
 import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
 
-import { SDK } from '../../native';
+import { NativeHandlers } from '../../native';
 import { SqliteClient } from '../../store/SqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { DBSyncManager } from '../../utils/DBSyncManager';
@@ -187,9 +187,9 @@ const ChatWithContext = <
 
   useEffect(() => {
     if (client) {
-      const sdkName = (SDK ? SDK.replace('stream-chat-', '') : 'react-native') as
-        | 'react-native'
-        | 'expo';
+      const sdkName = (
+        NativeHandlers.SDK ? NativeHandlers.SDK.replace('stream-chat-', '') : 'react-native'
+      ) as 'react-native' | 'expo';
       client.sdkIdentifier = {
         name: sdkName,
         version,

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -28,7 +28,9 @@ jest.mock('../../../native.ts', () => {
     isImageMediaLibraryAvailable: jest.fn(() => true),
     isShareImageAvailable: jest.fn(() => true),
     isVideoPlayerAvailable: jest.fn(() => true),
-    Video: View,
+    NativeHandlers: {
+      Video: View,
+    },
   };
 });
 

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -19,22 +19,24 @@ import {
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
-import * as NativeUtils from '../../../native';
+import { NativeHandlers } from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
-    deleteFile: jest.fn(),
     isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
     isShareImageAvailable: jest.fn(() => true),
     isVideoPlayerAvailable: jest.fn(() => true),
-    saveFile: jest.fn(),
-    shareImage: jest.fn(),
-    Video: View,
+    NativeHandlers: {
+      deleteFile: jest.fn(),
+      saveFile: jest.fn(),
+      shareImage: jest.fn(),
+      Video: View,
+    },
   };
 });
 
@@ -160,9 +162,9 @@ describe('ImageGalleryFooter', () => {
   it('should trigger the share button onPress Handler', async () => {
     const user = userEvent.setup();
     const chatClient = await getTestClientWithUser({ id: 'testID' });
-    const saveFileMock = jest.spyOn(NativeUtils, 'saveFile');
-    const shareImageMock = jest.spyOn(NativeUtils, 'shareImage');
-    const deleteFileMock = jest.spyOn(NativeUtils, 'deleteFile');
+    const saveFileMock = jest.spyOn(NativeHandlers, 'saveFile');
+    const shareImageMock = jest.spyOn(NativeHandlers, 'shareImage');
+    const deleteFileMock = jest.spyOn(NativeHandlers, 'deleteFile');
 
     render(
       <OverlayProvider>