Unable to run the example code, or use this module in my own app. Also, the sample code and /example code have different imports

[iamsharmaapoorv]

Good day!

1. Here is the sample code on the repo readme. import Gallery from 'react-native-awesome-gallery'; vs the code in /example import AwesomeGallery, { GalleryRef, RenderItemInfo, } from 'react-native-awesome-gallery'; Source: https://github.com/pavelbabenko/react-native-awesome-gallery/blob/main/example/src/screens/Photos.tsx#L16C1-L19C39

To find out which import is correct, I tried to run the /example code but I am unable to do so. Upon running yarn install and npx expo start in the example folder, I receive

(node:47203) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:47203) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
ERROR in ../src/index.tsx 1:0-67
Module not found: Error: Can't resolve '@babel/runtime/helpers/defineProperty' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'

ERROR in ../src/index.tsx 1:67-132
Module not found: Error: Can't resolve '@babel/runtime/helpers/slicedToArray' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'

ERROR in ../src/index.tsx 1:132-217
Module not found: Error: Can't resolve '@babel/runtime/helpers/objectWithoutProperties' in '/Users/apoorvsm/Downloads/react-native-awesome-gallery-main 2/src'

ERROR in ../src/index.tsx:28
Module not found: Can't resolve 'react-native-redash'
  26 | } from 'react-native-reanimated';
  27 | import { Gesture, GestureDetector } from 'react-native-gesture-handler';
> 28 | import { useVector } from 'react-native-redash';
  29 | import { clamp, withDecaySpring, withRubberBandClamp } from './utils';
  30 |
  31 | const rtl = I18nManager.isRTL;

web compiled with 4 errors

yarn add 'react-native-redash' doesn't resolve the issue. Neither does resetting cache, deleting node_modules, deleting watchman cache, etc. The IOS render fails with errors from @babel/runtime in a similar fashion.

Has anybody encountered this?

2. I tried to use this library in my app, I installed the listed dependencies of this library. Here is my package.json

   {
   "name": "Smilefie",
   "version": "0.0.1",
   "private": true,
   "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",
   "lint": "eslint .",
   "start": "react-native start",
   "test": "jest",
   "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false  --platform='ios' --assets-dest ios"
   },
   "dependencies": {
   "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
   "@react-native-community/masked-view": "^0.1.11",
   "@react-navigation/native": "^6.1.7",
   "@react-navigation/stack": "^6.3.17",
   "install": "^0.13.0",
   "react": "18.2.0",
   "react-native": "0.72.3",
   "react-native-app-info": "^0.0.6",
   "react-native-awesome-gallery": "^0.3.6",
   "react-native-camera": "^4.2.1",
   "react-native-fs": "^2.20.0",
   "react-native-gesture-handler": "^2.13.3",
   "react-native-reanimated": "^3.5.4",
   "react-native-safe-area-context": "^4.7.1",
   "react-native-screens": "^3.24.0",
   "react-native-vector-icons": "^10.0.0"
   },
   "devDependencies": {
   "@babel/core": "^7.20.0",
   "@babel/preset-env": "^7.20.0",
   "@babel/runtime": "^7.20.0",
   "@react-native/eslint-config": "^0.72.2",
   "@react-native/metro-config": "^0.72.9",
   "@tsconfig/react-native": "^3.0.0",
   "@types/react": "^18.0.24",
   "@types/react-test-renderer": "^18.0.0",
   "babel-jest": "^29.2.1",
   "eslint": "^8.19.0",
   "jest": "^29.2.1",
   "metro-react-native-babel-preset": "0.76.7",
   "prettier": "^2.4.1",
   "react-test-renderer": "18.2.0",
   "typescript": "4.8.4"
   },
   "engines": {
   "node": ">=16"
   }
   }

   However, upon navigating to the AwesomeGallery screen in my app, we see a black screen and no logs to help triage the issue. Would anyone be able to help diagnose and solve this issue?

I will help raise a PR for issue (1) to maintain code consistency between readme.md and /example once we are able to confirm the correct import. Thanks!

[iamsharmaapoorv]

@pavelbabenko Good day! Pinging you here to request your insights. However, there is no urgency please feel free to attend to this whenever you gain availability.

[pavelbabenko]

Hi @iamsharmaapoorv Which version of npm, react native, expo are you using?

[iamsharmaapoorv]

Hey @pavelbabenko good day! Sorry I didn't a notification, need to look into enabling them. React native version is present in the package.json above "react-native": "0.72.3", as for the others:

bcd0746118eb:sdpdsclient apoorvsm$ cd
bcd0746118eb:~ apoorvsm$ node --version
v20.5.0
bcd0746118eb:~ apoorvsm$ npm --version
9.8.0
bcd0746118eb:~ apoorvsm$ expo --version
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
6.3.10
bcd0746118eb:~ apoorvsm$ npx expo --version
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
6.3.10
bcd0746118eb:~ apoorvsm$ yarn --version
1.22.19

Thanks and TC friend

[iamsharmaapoorv]

Regarding issue 2, here's the AwesomeGallery screen. Hopefully there's an easy to fix error here. Maybe I have provided too few arguments, I copied the code from the available sample

import { useEffect, useState } from 'react';
import Gallery from 'react-native-awesome-gallery';
import RNFS from 'react-native-fs';

const AwesomeGalleryScreen: React.FC = ({ navigation }) => {
    const [imagePaths, setImagePaths] = useState<string[]>([]);

    useEffect(() => {
        console.log("in awesomegallery useeffect");
        fetchImagePaths();
      }, []);

    const fetchImagePaths = async () => {
        try {
            //const appName = AppInfo.getAppName()
            console.log("in fetch image paths");
            const galleryDir = `${RNFS.DocumentDirectoryPath}/Gallery`;
            const files = await RNFS.readDir(galleryDir);
            const imagePaths = files.filter(file => file.isFile() && file.name.endsWith('.png')).map(file => file.path);
            setImagePaths(imagePaths);
        } catch (error) {
            console.error('Error fetching image paths:', error);
        }
    };

    return (
        <Gallery
          data={imagePaths}
          onIndexChange={(newIndex) => {
            console.log(newIndex);
          }}
        />
      );
};

export default AwesomeGalleryScreen;

[pavelbabenko]

@iamsharmaapoorv Try using node v16, instead of v20

[iamsharmaapoorv]

Cloned the project again in a different folder, installed node@16. Same results

(node:4944) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:4944) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use the async 'start' or 'startCallback' method.
ERROR in ../src/index.tsx 1:0-67
Module not found: Error: Can't resolve '@babel/runtime/helpers/defineProperty' in '/Volumes/workplace/react-native-awesome-gallery/src'

ERROR in ../src/index.tsx 1:67-132
Module not found: Error: Can't resolve '@babel/runtime/helpers/slicedToArray' in '/Volumes/workplace/react-native-awesome-gallery/src'

ERROR in ../src/index.tsx 1:132-217
Module not found: Error: Can't resolve '@babel/runtime/helpers/objectWithoutProperties' in '/Volumes/workplace/react-native-awesome-gallery/src'

ERROR in ../src/index.tsx:28
Module not found: Can't resolve 'react-native-redash'
  26 | } from 'react-native-reanimated';
  27 | import { Gesture, GestureDetector } from 'react-native-gesture-handler';
> 28 | import { useVector } from 'react-native-redash';
  29 | import { clamp, withDecaySpring, withRubberBandClamp } from './utils';
  30 |
  31 | const rtl = I18nManager.isRTL;

web compiled with 4 errors
⠋ Stopping server(node:4944) [DEP_WEBPACK_DEV_SERVER_CLOSE] DeprecationWarning: 'close' is deprecated. Please use the async 'stop' or 'stopCallback' method.
› Stopped server
bcd0746118eb:example apoorvsm$ node --version
v16.20.2

[pavelbabenko]

@iamsharmaapoorv Are you trying to run it in web?

[pavelbabenko]

@iamsharmaapoorv Everything works on my side perfectly. Looks like the issue is with your local environment. Let me know if you have any other issues with the library

[iamsharmaapoorv]

Yes these errors were from running in web. The IOS render fails with errors from @babel/runtime in a similar fashion. Even if my setup is faulty, would you not like to fix the inconsistency pointed out in this post?

Here is the sample code on the repo readme. import Gallery from 'react-native-awesome-gallery';

vs the code in /example import AwesomeGallery, { GalleryRef, RenderItemInfo, } from 'react-native-awesome-gallery'; Source: https://github.com/pavelbabenko/react-native-awesome-gallery/blob/main/example/src/screens/Photos.tsx#L16C1-L19C39

Do we import Gallery or AwesomeGallery? This repo has conflicting code. Let me know whichever is the correct one, I can help raise a PR

[pavelbabenko]

@iamsharmaapoorv You import the default exported component and it doesn’t matter what an imported variable name is

[iamsharmaapoorv]

Ah I see it works that way, thanks for sharing this info @pavelbabenko! Very unfortunate that this gallery doesn't work for me. TC!

[iamsharmaapoorv]

I was able to make the ./example code work by running yarn install in both the root and the example folder. Prior to this, I had only run it in the example folder.

WIll try to figure out a way to make it work in my app.