react-native-fast-image icon indicating copy to clipboard operation
react-native-fast-image copied to clipboard

feat:preload callbacks

Open nicomontanari opened this issue 2 years ago • 9 comments

I opened another pull request because the previous one was unexpectedly closed.

@DylanVann I have been using these changes in production for 1 year and everything works fine.

nicomontanari avatar Jul 17 '23 09:07 nicomontanari

Hey @DylanVann, it would be nice to have this one merged. What do you think?

mathbalduino avatar Jul 28 '23 19:07 mathbalduino

@DylanVann can you please merge this? It would be very helpful

lorenzpfei avatar Aug 31 '23 09:08 lorenzpfei

@nicomontanari would you be able to help me on adding this PR to my react native project? I have tried downloading the stable version of react-native-fast-image and applying the necessary changes to the files, but I am not able to get it working.

akeva001 avatar Sep 27 '23 21:09 akeva001

@nicomontanari would you be able to help me on adding this PR to my react native project? I have tried downloading the stable version of react-native-fast-image and applying the necessary changes to the files, but I am not able to get it working.

I ended up being able to install it properly I believe, Screenshot 2023-09-27 at 7 54 45 PM

But this code block is not logging anything, Screenshot 2023-09-27 at 7 57 24 PM

akeva001 avatar Sep 28 '23 02:09 akeva001

This PR is missing the runtime change needed in index.tsx, it's still calling the old native module.

Instead replace with:

FastImage.preload = (sources, onProgress, onComplete) =>
    preloaderManager.preload(sources, onProgress, onComplete)

sterlingwes avatar Oct 03 '23 18:10 sterlingwes

Hi @akeva001, i'm sorry for the delay in my response.

First i added this line in the "dependecies" section in the package.json: "react-native-fast-image": "https://github.com/nicomontanari/react-native-fast-image".

Then this is how i implemented the preload:

import FastImage from 'react-native-fast-image/src'

const preload = async (images: string[]): Promise<void> => {
    return new Promise<void>(async (resolve, reject) => {
        FastImage.preload(
            images.map((image) => ({
                uri: image
            })),
            (finished, total) => {
                if (__DEV__) {
                    console.log('Preload:', `f ${finished}/t ${total}`)
                }
            },
            (_, skipped) => {
                if (skipped > 0) {
                    reject(skipped)
                    if (__DEV__) {
                        console.log('Preload: failed with skipped ', skipped)
                    }
                }
                if (__DEV__) {
                    console.log('Preload: finish')
                }
                resolve()
            }
        )
    })
}

nicomontanari avatar Oct 04 '23 07:10 nicomontanari

@sterlingwes i'm sorry but i didn't understand your comment. These changes already implement your piece of code.

nicomontanari avatar Oct 04 '23 08:10 nicomontanari

@nicomontanari if you look in the PR diff here and scroll to the very bottom you'll see that you only have typescript changes in src/index. With no runtime change, the code snippet you shared above is still calling the existing native module method which doesn't do anything with the callback params.

You need to update the index file to pass those params into the method exposed by PreloaderManager which isn't currently used in this diff.

sterlingwes avatar Oct 04 '23 11:10 sterlingwes

@frg100 @sterlingwes thanks for the tip, I missed these changes along the way 😕

nicomontanari avatar Oct 17 '23 09:10 nicomontanari