Interest in a PR with a FlatList reimplementation?

[dcmdestello]

Hi there!

Currently this component is implemented with a ListView which was deprecated a few months ago in favor of FlatLists which are supposed to have better performance and an easier API.

I have already a working implementation of the camera-roll-picker using a FlatList, would you be interested in me submitting a PR with that reimplementation?

The main consequences of this change are:

Dependencies:

• Requires react-native 0.43.0 or superior.

Props:

• scrollRenderAheadDistance disappears.
• pageSize disappears.
• removeClippedSubviews disappears.
• initialListSize is renamed to initialNumToRender. (In the same way as currently, it refers to the initial number of rows, not images.)

Cheers.

[flybayer]

Yes, please!

[greenais]

@dcmdestello, could you please share your upgraded version or create a fork repo? Pity, it seems like @jeanpan isn't interested in RNCRP progress anymore. But we surely do!

[dcmdestello]

The reimplementation with FlatList is now up as a fork on:

https://github.com/dcmdestello/react-native-camera-roll-picker

Other than that it has some other minor changes:

• Created component Row to benefit of PureComponent optimizations.
• Implemented/fixed example for Android.
• Changed initial load size from 1000 to 100.
• Removed some dead code I found.
• Minor code style changes that my eslint was annoying me with.

Cheers.

[greenais]

Great job. Thank you! But how to make sure that npm installs your fork instead of original repo? Shouldn't install command be somehow different?

[greenais]

=Off-topic: @dcmdestello, how do you access file content using uri obtained from RNCRP? react-native-fetch-blob seems to be abandoned since Sep 2017, react-native-fs doesn't allow access to DCIM/CameraRoll directory.. In my project I need base64 encoded image finally, what approach would you recommend?

[dcmdestello]

For iOS there should not be any particular complications.

For android RNFS.readFile(path, 'base64') works too but only with actual filepaths. What RNCRP is given by Android is not a the actual path in the filesystem but a content uri that Android can work with.

Back when I was looking at this I didn't find any react native library that could read files directly from content uris, or that could resolve them into actual filepaths. But you can always go down into native code and ask the OS to resolve them for you.

The best implementation that I've found regarding this is: https://stackoverflow.com/a/3414749/2588463

Based off that you can make it work in a react-native project with something like this:

  @ReactMethod
  public void resolveUriToFilePath(String uri, Callback callback) {
    Uri contentUri = Uri.parse(uri);
    String filePath = "";
    Cursor cursor = null;
    try {
        String[] proj = { MediaStore.Images.Media.DATA };
        cursor = this.context.getContentResolver().query(contentUri, proj, null, null, null);
        int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
        cursor.moveToFirst();
        filePath = cursor.getString(column_index);
    } catch(Exception error) {
      callback.invoke(true);
      return;
    } finally {
        if (cursor != null) {
            cursor.close();
        }
    }

    callback.invoke(null, filePath);
  }

[greenais]

Thank you for comprehensive answer. Seems that react-native-get-real-path for Android serves the same need.

So for iOS RNFS should accept plain uri - did I get it right? And what regarding npm install from your fork?

[yehudahkay]

Looks good, thank you. It fixes an issue with the display that I had. You can include it in your project by using this in package.json. Would be great if it could be published on npm or integrated into current project.

"react-native-camera-roll-picker": "https://github.com/dcmdestello/react-native-camera-roll-picker",

[yehudahkay]

I published it on npm if you want to use it from there in the meantime

https://www.npmjs.com/package/react-native-camera-roll-multi-picker

[dazwiafl]

@yehudahkay your npm module points to the old implementation... :( using the https link for now (works)

[sibelius]

@jeanpan you should add more contribution to improve this package

add me please

[jeanpan]

@sibelius, I have added you as the collaborators. Let me know if you need any help. Sorry I haven't maintained this repo for a long time. It would be good if you can help to maintain.

[sibelius]

can somebody send the pr, so I can review?

[sibelius]

done here https://github.com/jeanpan/react-native-camera-roll-picker/pull/89

@jeanpan can you add me on npm as well?

https://www.npmjs.com/~sibelius

[sibelius]

fixed here https://github.com/jeanpan/react-native-camera-roll-picker/pull/89

[jremerich]

Hi! I just installed using yarn add react-native-camera-roll-picker but it's showing the yellow message about ListView. I looked the file index.js in my node_modules and it's different from this repo. Can you guys help me to install the correct pack? Tks!

[dcmdestello]

That's because the new version has not been published in npmjs. You can use this package as is on master with:

yarn add https://github.com/jeanpan/react-native-camera-roll-picker

There's a couple inconveniences with these kind of direct dependencies, you'll probably have to delete (rebuild) your yarn.lock from time to time if you want to get the new commits.

[sibelius]

@jeanpan can you give me access to npm to make a new release?

[hirbod]

@jeanpan your package is used widely so please give @sibelius access to npm. The flatlist reimplementation is just awesome when it comes to performance. My initial loading size went down from 7 seconds to under 1 second - using master.

[jeanpan]

I added @sibelius to npm package maintainers list. @sibelius Could you help to check if you have the permission to update the package?

[sibelius]

can you also give me access to add more maintainers and contributors for this package?

[sibelius]

I've tried to do a new release, but I do not appear on npm yet https://www.npmjs.com/package/react-native-camera-roll-picker

[sibelius]

my npm username https://www.npmjs.com/~sibelius

[jeanpan]

Hmm. I saw you on the collaborators list. Could you try again? How could give you access to add more maintainers?

[sibelius]

maybe admin access to this repo

[sibelius]

ship it https://www.npmjs.com/package/react-native-camera-roll-picker

tks

[jeanpan]

@sibelius thank you!