stream-chat-react-native-core 4.0.0-beta.2 → 4.0.0-beta.3

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Check, CheckAll } from '../../icons';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
+
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
 
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { Check, CheckAll } from '../../icons';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text } from 'react-native';
 
-import { useTheme } from '../../contexts/themeContext/ThemeContext';
-
 import type { ChannelPreviewProps } from './ChannelPreview';
 
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+import type { ChannelPreviewProps } from './ChannelPreview';
+
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/__tests__/ChannelPreview.test.js

@@ -1,19 +1,18 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { act, render, waitFor } from '@testing-library/react-native';
-
-import { ChannelPreview } from '../ChannelPreview';
 
-import { Chat } from '../../Chat/Chat';
+import { act, render, waitFor } from '@testing-library/react-native';
 
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchMessageReadEvent from '../../../mock-builders/event/messageRead';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelPreview } from '../ChannelPreview';
 
 const ChannelPreviewUIComponent = (props) => (
   <>
@@ -63,7 +62,7 @@ describe('ChannelPreview', () => {
     const message = generateMessage({
       user: clientUser,
     });
-    const c = generateChannel({
+    const c = generateChannelResponse({
       messages: [message],
     });
     await initializeChannel(c);
@@ -72,7 +71,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should mark channel as read, when message.read event is received for current user', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
     channel.countUnread = () => 20;
 
@@ -92,7 +91,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should update the lastest message on "message.new" event', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
 
     const { getByTestId } = render(getComponent());
@@ -113,7 +112,7 @@ describe('ChannelPreview', () => {
   });
 
   it('should update the unread count on "message.new" event', async () => {
-    const c = generateChannel();
+    const c = generateChannelResponse();
     await initializeChannel(c);
 
     const { getByTestId } = render(getComponent());

package/src/components/ChannelPreview/__tests__/ChannelPreviewMessenger.test.js

@@ -1,18 +1,17 @@
 import React from 'react';
+
 import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import truncate from 'lodash/truncate';
 
-import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
-
-import { Chat } from '../../Chat/Chat';
-
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Chat } from '../../Chat/Chat';
+import { ChannelPreviewMessenger } from '../ChannelPreviewMessenger';
 
 describe('ChannelPreviewMessenger', () => {
   const clientUser = generateUser();
@@ -59,7 +58,7 @@ describe('ChannelPreviewMessenger', () => {
 
   it('should call setActiveChannel on click', async () => {
     const onSelect = jest.fn();
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { getByTestId } = render(
       getComponent({
@@ -80,7 +79,7 @@ describe('ChannelPreviewMessenger', () => {
   it('should render name of channel', async () => {
     const channelName = Date.now().toString();
     await initializeChannel(
-      generateChannel({
+      generateChannelResponse({
         channel: {
           name: channelName,
         },
@@ -96,7 +95,7 @@ describe('ChannelPreviewMessenger', () => {
     const m3 = generateMember();
 
     await initializeChannel(
-      generateChannel({
+      generateChannelResponse({
         members: [m1, m2, m3],
       }),
     );
@@ -109,7 +108,7 @@ describe('ChannelPreviewMessenger', () => {
 
   it('should render latest message, truncated to length given by latestMessageLength', async () => {
     const message = generateMessage();
-    await initializeChannel(generateChannel());
+    await initializeChannel(generateChannelResponse());
 
     const { queryByText } = render(
       getComponent({

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayAvatar.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
-import { vw } from '../../../utils/utils';
-
 import type { Channel } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -16,6 +14,7 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../../types/types';
+import { vw } from '../../../utils/utils';
 
 const maxCharacterLengthDefault = (vw(100) - 16) / 6;
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
-
 import type { Channel, StreamChat } from 'stream-chat';
 
+import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ChannelPreview/hooks/useLatestMessagePreview.ts

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 
+import type { Channel, ChannelState, MessageResponse, StreamChat } from 'stream-chat';
+
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import {
   isDayOrMoment,
@@ -7,8 +9,6 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
-import type { Channel, ChannelState, MessageResponse, StreamChat } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/Chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Platform } from 'react-native';
+
 import Dayjs from 'dayjs';
 
+import type { Channel } from 'stream-chat';
+
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -9,6 +12,7 @@ import { useMutedUsers } from './hooks/useMutedUsers';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { DeepPartial, ThemeProvider } from '../../contexts/themeContext/ThemeContext';
+import type { Theme } from '../../contexts/themeContext/utils/theme';
 import {
   TranslationContextValue,
   TranslationProvider,
@@ -16,12 +20,6 @@ import {
 import { useStreami18n } from '../../hooks/useStreami18n';
 
 import { SDK } from '../../native';
-import { version } from '../../version.json';
-
-import type { Channel } from 'stream-chat';
-
-import type { Theme } from '../../contexts/themeContext/utils/theme';
-import type { Streami18n } from '../../utils/Streami18n';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -32,6 +30,8 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import type { Streami18n } from '../../utils/Streami18n';
+import { version } from '../../version.json';
 
 export type ChatProps<
   At extends UnknownType = DefaultAttachmentType,

package/src/components/Chat/__tests__/Chat.test.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { View } from 'react-native';
-import { act, cleanup, render, waitFor } from '@testing-library/react-native';
-
-import { Chat } from '../Chat';
 
-import { Streami18n } from '../../../utils/Streami18n';
+import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
+import { setNetInfoFetchMock } from '../../../../jest-setup';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import { getTestClient } from '../../../mock-builders/mock';
-import { setNetInfoFetchMock } from '../../../../jest-setup';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Chat } from '../Chat';
 
 const ChatContextConsumer = ({ fn }) => {
   fn(useChatContext());

package/src/components/Chat/hooks/useIsOnline.ts

@@ -1,12 +1,13 @@
 import { useCallback, useEffect, useState } from 'react';
 
+import type { NetInfoSubscription } from '@react-native-community/netinfo';
+
+import type { StreamChat, Event as StreamEvent } from 'stream-chat';
+
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 import { NetInfo } from '../../../native';
 
-import type { NetInfoSubscription } from '@react-native-community/netinfo';
-import type { StreamChat, Event as StreamEvent } from 'stream-chat';
-
 import type {
   DefaultAttachmentType,
   DefaultChannelType,

package/src/components/ImageGallery/ImageGallery.tsx

@@ -9,7 +9,7 @@ import {
   StyleSheet,
   ViewStyle,
 } from 'react-native';
-import BottomSheet from '@gorhom/bottom-sheet';
+
 import {
   PanGestureHandler,
   PanGestureHandlerGestureEvent,
@@ -18,6 +18,7 @@ import {
   TapGestureHandler,
   TapGestureHandlerGestureEvent,
 } from 'react-native-gesture-handler';
+
 import Animated, {
   cancelAnimation,
   Easing,
@@ -32,6 +33,10 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { BottomSheetModal, BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+import type { UserResponse } from 'stream-chat';
+
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import {
   ImageGalleryFooter,
@@ -52,9 +57,6 @@ import { useImageGalleryContext } from '../../contexts/imageGalleryContext/Image
 import { useOverlayContext } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { triggerHaptic } from '../../native';
-import { vh, vw } from '../../utils/utils';
-
-import type { UserResponse } from 'stream-chat';
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -65,6 +67,9 @@ import type {
   DefaultUserType,
   UnknownType,
 } from '../../types/types';
+import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
+import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
+import { vh, vw } from '../../utils/utils';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -160,6 +165,7 @@ export const ImageGallery = <
       imageGallery: { backgroundColor },
     },
   } = useTheme();
+  const [gridPhotos, setGridPhotos] = useState<Photo<Us>[]>([]);
   const { overlay, setOverlay, translucentStatusBar } = useOverlayContext();
   const { image, images, setImage } = useImageGalleryContext<At, Ch, Co, Ev, Me, Re, Us>();
 
@@ -180,15 +186,15 @@ export const ImageGallery = <
     : vh(100);
   const halfScreenHeight = screenHeight / 2;
   const quarterScreenHeight = screenHeight / 4;
-  const snapPoints = React.useMemo(() => [0, (screenHeight * 9) / 10], []);
+  const snapPoints = React.useMemo(() => [(screenHeight * 9) / 10], []);
 
   /**
-   * BottomSheet ref
+   * BottomSheetModal ref
    */
-  const bottomSheetRef = useRef<BottomSheet>(null);
+  const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   /**
-   * BottomSheet state
+   * BottomSheetModal state
    */
   const [currentBottomSheetIndex, setCurrentBottomSheetIndex] = useState(0);
   const animatedBottomSheetIndex = useSharedValue(0);
@@ -344,20 +350,30 @@ export const ImageGallery = <
           attachment.type === 'image' &&
           !attachment.title_link &&
           !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
+          getUrlOfImageAttachment(attachment),
       ) || [];
 
-    const attachmentPhotos = attachmentImages.map((attachmentImage) => ({
-      channelId: cur.cid,
-      created_at: cur.created_at,
-      id: `photoId-${cur.id}-${attachmentImage.image_url || attachmentImage.thumb_url}`,
-      messageId: cur.id,
-      uri: attachmentImage.image_url || attachmentImage.thumb_url || '',
-      user: cur.user,
-      user_id: cur.user_id,
-    }));
-
-    return [...acc, ...attachmentPhotos];
+    const attachmentPhotos = attachmentImages.map((a) => {
+      const imageUrl = getUrlOfImageAttachment(a) as string;
+
+      return {
+        channelId: cur.cid,
+        created_at: cur.created_at,
+        id: `photoId-${cur.id}-${imageUrl}`,
+        messageId: cur.id,
+        original_height: a.original_height,
+        original_width: a.original_width,
+        uri: getResizedImageUrl({
+          height: screenHeight,
+          url: imageUrl,
+          width: screenWidth,
+        }),
+        user: cur.user,
+        user_id: cur.user_id,
+      };
+    });
+
+    return [...acc, ...attachmentPhotos] as Photo<Us>[];
   }, []);
 
   /**
@@ -398,8 +414,15 @@ export const ImageGallery = <
   const uriForCurrentImage = photos[selectedIndex]?.uri;
   useEffect(() => {
     setCurrentImageHeight(screenHeight);
-    if (photos[index.value]?.uri) {
-      Image.getSize(photos[index.value].uri, (width, height) => {
+    const photo = photos[index.value];
+    const height = photo?.original_height;
+    const width = photo?.original_width;
+
+    if (height && width) {
+      const imageHeight = Math.floor(height * (screenWidth / width));
+      setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
+    } else if (photo?.uri) {
+      Image.getSize(photo.uri, (width, height) => {
         const imageHeight = Math.floor(height * (screenWidth / width));
         setCurrentImageHeight(imageHeight > screenHeight ? screenHeight : imageHeight);
       });
@@ -1038,16 +1061,22 @@ export const ImageGallery = <
   );
 
   /**
-   * Functions to open and close BottomSheet with image grid
+   * Functions toclose BottomSheetModal with image grid
    */
   const closeGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.close();
+    if (bottomSheetModalRef.current?.close) {
+      bottomSheetModalRef.current.close();
+      setGridPhotos([]);
     }
   };
+
+  /**
+   * Function to open BottomSheetModal with image grid
+   */
   const openGridView = () => {
-    if (bottomSheetRef.current) {
-      bottomSheetRef.current.snapTo(1);
+    if (bottomSheetModalRef.current?.present) {
+      bottomSheetModalRef.current.present();
+      setGridPhotos(photos);
     }
   };
 
@@ -1153,30 +1182,32 @@ export const ImageGallery = <
         closeGridView={closeGridView}
         currentBottomSheetIndex={currentBottomSheetIndex}
       />
-      <BottomSheet
-        animatedIndex={animatedBottomSheetIndex}
-        containerHeight={fullScreenHeight}
-        handleComponent={() => (
-          <ImageGridHandle
+      <BottomSheetModalProvider>
+        <BottomSheetModal
+          animatedIndex={animatedBottomSheetIndex}
+          enablePanDownToClose={true}
+          handleComponent={() => (
+            <ImageGridHandle
+              closeGridView={closeGridView}
+              {...imageGalleryCustomComponents?.gridHandle}
+            />
+          )}
+          handleHeight={imageGalleryGridHandleHeight ?? 40}
+          index={0}
+          onChange={(index: number) => setCurrentBottomSheetIndex(index)}
+          ref={bottomSheetModalRef}
+          snapPoints={imageGalleryGridSnapPoints || snapPoints}
+        >
+          <ImageGrid
             closeGridView={closeGridView}
-            {...imageGalleryCustomComponents?.gridHandle}
+            numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
+            photos={gridPhotos}
+            resetVisibleValues={resetVisibleValues}
+            setImage={setImage}
+            {...imageGalleryCustomComponents?.grid}
           />
-        )}
-        handleHeight={imageGalleryGridHandleHeight ?? 40}
-        index={0}
-        onChange={(index: number) => setCurrentBottomSheetIndex(index)}
-        ref={bottomSheetRef}
-        snapPoints={imageGalleryGridSnapPoints || snapPoints}
-      >
-        <ImageGrid
-          closeGridView={closeGridView}
-          numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
-          photos={photos}
-          resetVisibleValues={resetVisibleValues}
-          setImage={setImage}
-          {...imageGalleryCustomComponents?.grid}
-        />
-      </BottomSheet>
+        </BottomSheetModal>
+      </BottomSheetModalProvider>
     </Animated.View>
   );
 };
@@ -1202,6 +1233,8 @@ export type Photo<Us extends UnknownType = DefaultUserType> = {
   channelId?: string;
   created_at?: string | Date;
   messageId?: string;
+  original_height?: number;
+  original_width?: number;
   user?: UserResponse<Us> | null;
   user_id?: string;
 };

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
+import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { vw } from '../../../utils/utils';
 
-import type { ImageStyle, StyleProp } from 'react-native';
-
 const screenWidth = vw(100);
 const halfScreenWidth = vw(50);
 const oneEight = 1 / 8;

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

@@ -7,9 +7,8 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
 import { deleteFile, saveFile, shareImage } from '../../../native';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)
@@ -126,9 +125,7 @@ export const ImageGalleryFooter = <Us extends UnknownType = DefaultUserType>(pro
     setShareMenuOpen(true);
     try {
       const localImage = await saveFile({
-        fileName: `${photo.user?.name || photo.user_id || 'ChatPhoto'}-${
-          photo.messageId
-        }-${selectedIndex}.jpg`,
+        fileName: `${photo.user?.id || 'ChatPhoto'}-${photo.messageId}-${selectedIndex}.jpg`,
         fromUrl: photo.uri,
       });
       await shareImage({ type: 'image/jpeg', url: localImage });

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -19,9 +19,8 @@ import {
 } from '../../../contexts/translationContext/TranslationContext';
 import { Close } from '../../../icons';
 
-import type { Photo } from '../ImageGallery';
-
 import type { DefaultUserType, UnknownType } from '../../../types/types';
+import type { Photo } from '../ImageGallery';
 
 const ReanimatedSafeAreaView = Animated.createAnimatedComponent
   ? Animated.createAnimatedComponent(SafeAreaView)

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ImageBackground, StyleSheet } from 'react-native';
-import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
-import { Avatar } from '../../Avatar/Avatar';
+import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { DefaultUserType, UnknownType } from '../../../types/types';
 import { vw } from '../../../utils/utils';
+import { Avatar } from '../../Avatar/Avatar';
 
 import type { Photo } from '../ImageGallery';
 
-import type { DefaultUserType, UnknownType } from '../../../types/types';
-
 const styles = StyleSheet.create({
   avatarImage: {
     borderRadius: 22,
@@ -161,7 +160,7 @@ export const ImageGrid = <Us extends UnknownType = DefaultUserType>(props: Props
         { backgroundColor: white },
         contentContainer,
       ]}
-      data={imageGridItems}
+      data={imageGridItems as GridImageItem<UnknownType>[]}
       keyExtractor={(item, index) => `${item.uri}-${index}`}
       numColumns={numberOfImageGalleryGridColumns || 3}
       renderItem={renderItem}

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+
 import { TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';

package/src/components/Indicators/LoadingIndicator.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { Spinner } from '../Spinner/Spinner';
-
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Spinner } from '../Spinner/Spinner';
 
 const styles = StyleSheet.create({
   container: {