DylanVann / react-native-fast-image

🚩 FastImage, performant React Native image component.
MIT License
8.09k stars 1.47k forks source link

feat:preload callbacks #995

Open nicomontanari opened 11 months ago

nicomontanari commented 11 months ago

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.

mathbalduino commented 11 months ago

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

lorenzpfei commented 10 months ago

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

akeva001 commented 9 months ago

@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 commented 9 months ago

@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
sterlingwes commented 9 months ago

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)
nicomontanari commented 9 months ago

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 commented 9 months ago

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

sterlingwes commented 9 months ago

@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.

nicomontanari commented 8 months ago

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