stream-chat-react-native-core 5.0.0-beta.0 → 5.0.0-beta.3

package/src/components/ImageGallery/ImageGallery.tsx

@@ -65,6 +65,7 @@ import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { vh, vw } from '../../utils/utils';
+import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
@@ -161,7 +162,8 @@ export const ImageGallery = <
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
   const { overlay, translucentStatusBar } = useOverlayContext();
-  const { image, images, setImage } = useImageGalleryContext<StreamChatGenerics>();
+  const { messages, selectedMessage, setSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
 
   /**
    * Height constants
@@ -256,20 +258,22 @@ export const ImageGallery = <
    * photo attachments
    */
 
-  const photos = images.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
+  const photos = messages.reduce((acc: Photo<StreamChatGenerics>[], cur) => {
     const attachmentImages =
-      cur.attachments?.filter(
-        (attachment) =>
-          (attachment.type === 'giphy' &&
-            (attachment.giphy?.[giphyVersion]?.url ||
-              attachment.thumb_url ||
-              attachment.image_url)) ||
-          (attachment.type === 'image' &&
-            !attachment.title_link &&
-            !attachment.og_scrape_url &&
-            getUrlOfImageAttachment(attachment)) ||
-          (isVideoPackageAvailable() && attachment.type === 'video'),
-      ) || [];
+      cur.attachments
+        ?.filter(
+          (attachment) =>
+            (attachment.type === 'giphy' &&
+              (attachment.giphy?.[giphyVersion]?.url ||
+                attachment.thumb_url ||
+                attachment.image_url)) ||
+            (attachment.type === 'image' &&
+              !attachment.title_link &&
+              !attachment.og_scrape_url &&
+              getUrlOfImageAttachment(attachment)) ||
+            (isVideoPackageAvailable() && attachment.type === 'video'),
+        )
+        .reverse() || [];
 
     const attachmentPhotos = attachmentImages.map((a) => {
       const imageUrl = getUrlOfImageAttachment(a) as string;
@@ -280,7 +284,7 @@ export const ImageGallery = <
         created_at: cur.created_at,
         id: `photoId-${cur.id}-${imageUrl}`,
         messageId: cur.id,
-        mime_type: a.type === 'giphy' ? 'image/gif' : a.mime_type,
+        mime_type: a.type === 'giphy' ? getGiphyMimeType(giphyURL ?? '') : a.mime_type,
         original_height: a.original_height,
         original_width: a.original_width,
         type: a.type,
@@ -297,7 +301,7 @@ export const ImageGallery = <
       };
     });
 
-    return [...acc, ...attachmentPhotos] as Photo<StreamChatGenerics>[];
+    return [...attachmentPhotos, ...acc] as Photo<StreamChatGenerics>[];
   }, []);
 
   /**
@@ -308,6 +312,12 @@ export const ImageGallery = <
    */
   const photoLength = photos.length;
 
+  /**
+   * The URL for the images may differ because of dimensions passed as
+   * part of the query.
+   */
+  const stripQueryFromUrl = (url: string) => url.split('?')[0];
+
   /**
    * Set selected photo when changed via pressing in the message list
    */
@@ -323,7 +333,9 @@ export const ImageGallery = <
     };
 
     const newIndex = photos.findIndex(
-      (photo) => photo.messageId === image?.messageId && photo.uri === image?.url,
+      (photo) =>
+        photo.messageId === selectedMessage?.messageId &&
+        stripQueryFromUrl(photo.uri) === stripQueryFromUrl(selectedMessage?.url || ''),
     );
 
     if (photoLength > 1) {
@@ -331,7 +343,7 @@ export const ImageGallery = <
     }
 
     runOnUI(updatePosition)(newIndex);
-  }, [image, photoLength]);
+  }, [selectedMessage, photoLength]);
 
   /**
    * Image heights are not provided and therefore need to be calculated.
@@ -370,6 +382,7 @@ export const ImageGallery = <
     scale,
     screenHeight,
     screenWidth,
+    selectedIndex,
     setSelectedIndex,
     translateX,
     translateY,
@@ -664,7 +677,7 @@ export const ImageGallery = <
             closeGridView={closeGridView}
             numberOfImageGalleryGridColumns={numberOfImageGalleryGridColumns}
             photos={gridPhotos}
-            setImage={setImage}
+            setSelectedMessage={setSelectedMessage}
             {...imageGalleryCustomComponents?.grid}
           />
         </BottomSheetModal>

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

@@ -48,7 +48,7 @@ describe('ImageGallery', () => {
   it('render image gallery component', () => {
     const { queryAllByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [
               generateImageAttachment(),
@@ -66,7 +66,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is available', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -89,7 +89,7 @@ describe('ImageGallery', () => {
   it('handle handleLoad function when video item present and payload duration is undefined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -112,7 +112,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is well defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -140,7 +140,7 @@ describe('ImageGallery', () => {
   it('handle handleProgress function when video item present and payload is not defined', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),
@@ -168,7 +168,7 @@ describe('ImageGallery', () => {
   it('handle handleEnd function when video item present', () => {
     const { getByA11yLabel } = render(
       getComponent({
-        images: [
+        messages: [
           generateMessage({
             attachments: [generateVideoAttachment({ type: 'video' })],
           }),

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

@@ -71,7 +71,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -123,7 +123,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -162,7 +162,7 @@ describe('ImageGalleryFooter', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

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

@@ -76,13 +76,13 @@ describe('ImageGalleryOverlay', () => {
 
   it('should trigger the selectAndClose when the Image item is pressed', () => {
     const closeGridViewMock = jest.fn();
-    const setImageMock = jest.fn();
+    const setSelectedMessageMock = jest.fn();
 
     const { getAllByA11yLabel } = render(
       getComponent({
         closeGridView: closeGridViewMock,
         photos: [generateImageAttachment(), generateVideoAttachment({ type: 'video' })],
-        setImage: setImageMock,
+        setSelectedMessage: setSelectedMessageMock,
       }),
     );
 
@@ -93,6 +93,6 @@ describe('ImageGalleryOverlay', () => {
     });
 
     expect(closeGridViewMock).toHaveBeenCalledTimes(1);
-    expect(setImageMock).toHaveBeenCalledTimes(1);
+    expect(setSelectedMessageMock).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -65,7 +65,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),
@@ -109,7 +109,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateVideoAttachment({ type: 'video' })],
                 }),
@@ -146,7 +146,7 @@ describe('ImageGalleryHeader', () => {
         <ImageGalleryContext.Provider
           value={
             {
-              images: [
+              messages: [
                 generateMessage({
                   attachments: [generateImageAttachment()],
                 }),

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

@@ -107,7 +107,7 @@ export type ImageGridType<
 > = ImageGalleryGridImageComponents<StreamChatGenerics> & {
   closeGridView: () => void;
   photos: Photo<StreamChatGenerics>[];
-  setImage: React.Dispatch<
+  setSelectedMessage: React.Dispatch<
     React.SetStateAction<
       | {
           messageId?: string | undefined;
@@ -130,7 +130,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     photos,
-    setImage,
+    setSelectedMessage,
   } = props;
 
   const {
@@ -148,7 +148,7 @@ export const ImageGrid = <
     imageComponent,
     numberOfImageGalleryGridColumns,
     selectAndClose: () => {
-      setImage({ messageId: photo.messageId, url: photo.uri });
+      setSelectedMessage({ messageId: photo.messageId, url: photo.uri });
       closeGridView();
     },
   }));

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -42,6 +42,7 @@ export const useImageGalleryGestures = ({
   scale,
   screenHeight,
   screenWidth,
+  selectedIndex,
   setSelectedIndex,
   translateX,
   translateY,
@@ -57,6 +58,7 @@ export const useImageGalleryGestures = ({
   scale: SharedValue<number>;
   screenHeight: number;
   screenWidth: number;
+  selectedIndex: number;
   setSelectedIndex: React.Dispatch<React.SetStateAction<number>>;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
@@ -82,6 +84,20 @@ export const useImageGalleryGestures = ({
   const focalY = useSharedValue(0);
   const index = useSharedValue(0);
 
+  /**
+   * if a specific image index > 0 has been passed in
+   * while creating the hook, set the value of the index
+   * reference to its value.
+   *
+   * This makes it possible to seelct an image in the list,
+   * and scroll/pan as normal. Prior to this,
+   * it was always assumed that one started at index 0 in the
+   * gallery.
+   * */
+  if (index.value !== selectedIndex) {
+    index.value = selectedIndex;
+  }
+
   /**
    * Shared values for movement
    */

package/src/components/Message/Message.tsx

@@ -73,15 +73,23 @@ export type UrlTouchableHandlerPayload = {
   additionalInfo?: { url?: string };
 };
 
+export type FileAttachmentTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'fileAttachment';
+  additionalInfo?: { attachment?: Attachment<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
   event?: GestureResponderEvent;
 } & (
   | {
-      emitter?: TouchableEmitter;
+      emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
     }
   | TextMentionTouchableHandlerPayload
   | UrlTouchableHandlerPayload
+  | FileAttachmentTouchableHandlerPayload
 );
 
 export type MessageTouchableHandlerPayload<

package/src/components/Message/MessageSimple/MessageTextContainer.tsx

@@ -117,8 +117,16 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
   prevProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
   nextProps: MessageTextContainerPropsWithContext<StreamChatGenerics>,
 ) => {
-  const { message: prevMessage, onlyEmojis: prevOnlyEmojis } = prevProps;
-  const { message: nextMessage, onlyEmojis: nextOnlyEmojis } = nextProps;
+  const {
+    markdownStyles: prevMarkdownStyles,
+    message: prevMessage,
+    onlyEmojis: prevOnlyEmojis,
+  } = prevProps;
+  const {
+    markdownStyles: nextMarkdownStyles,
+    message: nextMessage,
+    onlyEmojis: nextOnlyEmojis,
+  } = nextProps;
 
   const messageTextEqual = prevMessage.text === nextMessage.text;
   if (!messageTextEqual) return false;
@@ -134,6 +142,18 @@ const areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = Default
         prevMessage.mentioned_users[0].name === nextMessage.mentioned_users[0].name));
   if (!mentionedUsersEqual) return false;
 
+  // stringify could be an expensive operation, so lets rule out the obvious
+  // possibilities first such as different object reference or empty objects etc.
+  // Also keeping markdown equality check at the last to make sure other less
+  // expensive equality checks get executed first and markdown check will be skipped if returned
+  // false from previous checks.
+  const markdownStylesEqual =
+    prevMarkdownStyles === nextMarkdownStyles ||
+    (Object.keys(prevMarkdownStyles || {}).length === 0 &&
+      Object.keys(nextMarkdownStyles || {}).length === 0) ||
+    JSON.stringify(prevMarkdownStyles) === JSON.stringify(nextMarkdownStyles);
+  if (!markdownStylesEqual) return false;
+
   return true;
 };
 

package/src/components/Message/MessageSimple/__tests__/__snapshots__/MessageAvatar.test.js.snap

@@ -47,6 +47,7 @@ exports[`MessageAvatar should render message avatar 1`] = `
               "width": 32,
             },
             Object {
+              "backgroundColor": "#ececec",
               "borderRadius": 16,
               "height": 32,
               "width": 32,

package/src/components/Message/MessageSimple/utils/renderText.tsx

@@ -261,7 +261,7 @@ export const renderText = <
   );
 
   const customRules = {
-    link: { link },
+    link: { react: link },
     list: { react: list },
     // Truncate long text content in the message overlay
     paragraph: messageTextNumberOfLines ? { react: paragraphText } : {},

package/src/components/MessageList/MessageList.tsx

@@ -124,7 +124,7 @@ type MessageListPropsWithContext<
     | 'targetedMessage'
   > &
   Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> &
   Pick<
     PaginatedMessageListContextValue<StreamChatGenerics>,
     'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'
@@ -270,7 +270,7 @@ const MessageListWithContext = <
     scrollToFirstUnreadThreshold,
     selectedPicker,
     setFlatListRef,
-    setImages,
+    setMessages,
     setSelectedPicker,
     setTargetedMessage,
     StickyHeader,
@@ -530,7 +530,7 @@ const MessageListWithContext = <
     index: number;
     item: MessageType<StreamChatGenerics>;
   }) => {
-    if (!channel || (!channel.initialized && !channel.staticState)) return null;
+    if (!channel || (!channel.initialized && !channel.offlineMode)) return null;
 
     const lastRead = channel.lastRead();
 
@@ -898,7 +898,7 @@ const MessageListWithContext = <
       isListActive &&
       ((threadList && thread) || (!threadList && !thread))
     ) {
-      setImages(messagesWithImages as MessageType<StreamChatGenerics>[]);
+      setMessages(messagesWithImages as MessageType<StreamChatGenerics>[]);
     }
   }, [
     imageString,
@@ -1044,7 +1044,7 @@ export const MessageList = <
     targetedMessage,
   } = useChannelContext<StreamChatGenerics>();
   const { client } = useChatContext<StreamChatGenerics>();
-  const { setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
     deletedMessagesVisibilityType,
@@ -1104,7 +1104,7 @@ export const MessageList = <
         ScrollToBottomButton,
         scrollToFirstUnreadThreshold,
         selectedPicker,
-        setImages,
+        setMessages,
         setSelectedPicker,
         setTargetedMessage,
         StickyHeader,

package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap

@@ -321,6 +321,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -569,6 +570,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -817,6 +819,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                     "width": 32,
                                   },
                                   Object {
+                                    "backgroundColor": "#ececec",
                                     "borderRadius": 16,
                                     "height": 32,
                                     "width": 32,
@@ -1108,6 +1111,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                       "width": 32,
                                     },
                                     Object {
+                                      "backgroundColor": "#ececec",
                                       "borderRadius": 16,
                                       "height": 32,
                                       "width": 32,

package/src/contexts/imageGalleryContext/ImageGalleryContext.md

@@ -8,7 +8,7 @@ can get access to context as following:
 import { useChannelsContext } from 'stream-chat-react-native';
 
 const SomeChildComponent = () => {
-  const { image, setImage, setImages } = useImageGalleryContext();
+  const { selectedMessage, setSelectedMessage, setMessages } = useImageGalleryContext();
 
   return (
     <View />

package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx

@@ -7,13 +7,18 @@ import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
+type SelectedMessage = {
+  messageId?: string;
+  url?: string;
+};
+
 export type ImageGalleryContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
-  images: MessageType<StreamChatGenerics>[];
-  setImage: React.Dispatch<React.SetStateAction<{ messageId?: string; url?: string } | undefined>>;
-  setImages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
-  image?: { messageId?: string; url?: string };
+  messages: MessageType<StreamChatGenerics>[];
+  setMessages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
+  setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
+  selectedMessage?: SelectedMessage;
 };
 
 export const ImageGalleryContext = React.createContext(
@@ -25,19 +30,19 @@ export const ImageGalleryProvider = <
 >({
   children,
 }: PropsWithChildren<UnknownType>) => {
-  const [images, setImages] = useState<MessageType<StreamChatGenerics>[]>([]);
-  const [image, setImage] = useState<{ messageId?: string; url?: string }>();
-
-  const imageGalleryContext = {
-    image,
-    images,
-    setImage,
-    setImages,
-  };
+  const [messages, setMessages] = useState<MessageType<StreamChatGenerics>[]>([]);
+  const [selectedMessage, setSelectedMessage] = useState<SelectedMessage>();
 
   return (
     <ImageGalleryContext.Provider
-      value={imageGalleryContext as unknown as ImageGalleryContextValue}
+      value={
+        {
+          messages,
+          selectedMessage,
+          setMessages,
+          setSelectedMessage,
+        } as unknown as ImageGalleryContextValue
+      }
     >
       {children}
     </ImageGalleryContext.Provider>

package/src/index.ts

@@ -22,3 +22,6 @@ export { default as heTranslations } from './i18n/he.json';
 
 export { QuickSqliteClient } from './store/QuickSqliteClient';
 export { version } from './version.json';
+
+import * as OfflineStoreApis from './store/apis';
+export { OfflineStoreApis };

package/src/mock-builders/DB/mock.ts

@@ -1,8 +1,8 @@
-import Database from 'better-sqlite3';
+import Sqlite3 from 'better-sqlite3';
 
 import type { PreparedQueries } from '../../store/types';
 
-export let db: Database;
+export let db: Sqlite3.Database;
 
 export const sqliteMock = {
   close: () => {
@@ -15,7 +15,7 @@ export const sqliteMock = {
   executeSql: (dbName: string, queryInput: string, params: unknown[]) => {
     const query = queryInput.trim().toLowerCase();
     const stmt = db.prepare(query);
-    let result = [];
+    let result: unknown[] = [];
 
     if (query.indexOf('select') === 0) {
       if (params) {
@@ -98,15 +98,10 @@ export const sqliteMock = {
     };
   },
   open: () => {
-    db = new Database('foobar.db');
+    db = new Sqlite3('foobar.db');
     return {
       message: '',
       status: 0,
     };
   },
 };
-
-export const initializeDBMocking = () => {
-  global.sqlite = sqliteMock;
-};
-export const resetDBMocking = () => (global.sqlite = undefined);

package/src/mock-builders/event/messageNew.js

@@ -1,6 +1,8 @@
 export default (client, newMessage, channel = {}) => {
   client.dispatchEvent({
     channel,
+    channel_id: channel.id,
+    channel_type: channel.type,
     cid: channel.cid,
     message: newMessage,
     type: 'message.new',

package/src/store/QuickSqliteClient.ts

@@ -1,11 +1,9 @@
 /* eslint-disable no-underscore-dangle */
-// Importing following package just to avoid errors using sqlite global.
-// @ts-ignore
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-import types from 'react-native-quick-sqlite';
+import type { QuickSQLite } from 'react-native-quick-sqlite';
+let sqlite: typeof QuickSQLite;
 
 try {
-  require('react-native-quick-sqlite');
+  sqlite = require('react-native-quick-sqlite')?.QuickSQLite;
 } catch (e) {
   // Failed for one of the reason
   // 1. Running on expo, where we don't support offline storage yet.
@@ -17,13 +15,18 @@ import { tables } from './schema';
 import { createCreateTableQuery } from './sqlite-utils/createCreateTableQuery';
 import type { PreparedQueries, Table } from './types';
 
+/**
+ * QuickSqliteClient takes care of any direct interaction with sqlite.
+ * This way usage react-native-quick-sqlite package is scoped to a single class/file.
+ */
 export class QuickSqliteClient {
-  static dbVersion = 0;
+  static dbVersion = 2;
 
   static dbName = DB_NAME;
   static dbLocation = DB_LOCATION;
 
   static getDbVersion = () => this.dbVersion;
+  // Force a specific db version. This is mainly useful for testsuit.
   static setDbVersion = (version: number) => (this.dbVersion = version);
 
   static openDB = () => {
@@ -89,13 +92,14 @@ export class QuickSqliteClient {
 
   static initializeDatabase = () => {
     // @ts-ignore
-    if (window.sqlite === undefined) {
+    if (sqlite === undefined) {
       throw new Error(
         'Please install "react-native-quick-sqlite" package to enable offline support',
       );
     }
 
     const version = this.getUserPragmaVersion();
+
     if (version !== this.dbVersion) {
       this.dropTables();
       this.updateUserPragmaVersion(this.dbVersion);