Preload local images

Is there anyway to preload local images that are required()?

I’m using the react-native-navigation module for screen management and when the view loads the image is not visible, then after the animation completes, it renders the image.

I have the following render() function:

render() {
    let styles = {
        position:        'absolute',
        top:             0,
        left:            0,
        flex:            1,
        width:           Dimensions.get('screen').width,
        height:          Dimensions.get('screen').height,
    };

    return (
        <ScrollView>
            <FastImage
                source={require('./assets/images/background.png')}
                style={styles.bgImage}
                resizeMode={'cover'} />
        </ScrollView>
    );
}

[camdagr8]

@koodiohto: If it helps, I figured out a way to cache local images. I run the following command when my app is setting up:

List of images to preload:

    // Preload images with require();
    const images = {
      'icon.png': require('./icon.png'),
      'orbs-1.png': require('./orbs-1.png'),
      'orbs-2.png': require('./orbs-2.png'),
      'orbs-3.png': require('./orbs-3.png'),
      'survey-1.png': require('./survey-1.png'),
    };

Image processor:

    // Convert image refs into image objects with Image.resolveAssetSource
    loadImages(images) {        
        return Promise.all(Object.keys(images).map((i) => {
            let img = {
                ...Image.resolveAssetSource(images[i]),
                cache: 'force-cache'
            };

            return Image.prefetch(img);
        }));
    }

Usage:

 loadImages(images).then((results) => { /* do something with the image objects */ });

[DylanVann]

I am going to add support for local images. Probably soon / in the next major version. For now it does fallback to Image though.