fix: resolve Metro bundler error for optional FlashList dependency (#121)

* fix: resolve Metro bundler error for optional FlashList dependency

- Separate optional library imports into dedicated file
- Fix "Requiring unknown module" error when FlashList is not installed

* chore: fix lint

* chore: add v1.9.1 patch changeset

* chore: update changeset

* docs: add clarifying comment for FlashList dynamic require

Author: saseungmin

.changeset/purple-trains-poke.md

@@ -0,0 +1,11 @@
+---
+"react-native-gesture-image-viewer": patch
+---
+
+fix: resolve Metro bundler error for optional FlashList dependency
+
+- Separate optional library imports into dedicated file
+- Fix "Requiring unknown module" error when FlashList is not installed
+- Enable dynamic feature detection without breaking Metro static analysis
+
+[Related issue](https://github.com/saseungmin/react-native-gesture-image-viewer/issues/120)

docs/docs/en/guide/getting-started/_meta.json

@@ -1,5 +1 @@
-[
-  "overview",
-  "installation",
-  "quick-start"
-]
+["overview", "installation", "quick-start"]

docs/docs/ko/guide/getting-started/_meta.json

@@ -1,5 +1 @@
-[
-  "overview",
-  "installation",
-  "quick-start"
-]
+["overview", "installation", "quick-start"]

docs/tsconfig.json

@@ -13,7 +13,13 @@
     "useDefineForClassFields": true,
     "allowImportingTsExtensions": true
   },
-  "include": ["docs", "theme", "rspress.config.ts", "components", "expo-snack.d.ts"],
+  "include": [
+    "docs",
+    "theme",
+    "rspress.config.ts",
+    "components",
+    "expo-snack.d.ts"
+  ],
   "mdx": {
     "checkMdx": true
   }

src/utils/FlashList.ts

@@ -0,0 +1,8 @@
+// NOTE - Dynamic require to prevent Metro bundler static analysis errors when FlashList is not installed
+export let FlashList: any = null;
+
+try {
+  FlashList = require('@shopify/flash-list').FlashList;
+} catch {
+  FlashList = null;
+}

src/utils.ts renamed to src/utils/index.ts

@@ -1,6 +1,7 @@
 import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
 import { FlatList as GestureFlatList, ScrollView as GestureScrollView } from 'react-native-gesture-handler';
-import type { FlatListComponent, ScrollViewComponent } from './types';
+import type { FlatListComponent, ScrollViewComponent } from '../types';
+import { FlashList } from './FlashList';
 
 export const isScrollViewLike = (component: React.ComponentType<any>): component is ScrollViewComponent => {
   return component === RNScrollView || component === GestureScrollView;
@@ -15,14 +16,8 @@ export const isFlatListLike = (component: React.ComponentType<any>): component i
 };
 
 export const isFlashListLike = (component: React.ComponentType<any>): boolean => {
-  try {
-    const FlashList = require('@shopify/flash-list')?.FlashList;
-
-    if (FlashList && component === FlashList) {
-      return true;
-    }
-  } catch {
-    // do nothing
+  if (FlashList && component === FlashList) {
+    return true;
   }
 
   return component?.displayName === 'FlashList' || component?.name === 'FlashList';

tsconfig.json

@@ -26,7 +26,5 @@
     "target": "ESNext",
     "verbatimModuleSyntax": true
   },
-  "exclude": [
-    "docs/**/*",
-  ]
+  "exclude": ["docs/**/*"]
 }