Add web support

[tberman]

Very simple change to support react-native-web

[DylanVann]

I think it would be better to expose a different entry point for react-native-web, but I don't know that much about it.

[tberman]

Happy to move it to an index.web.js if that makes it better, but with the fallback code already around it felt like it made sense to keep it together.

[r17x]

@tberman I've been try your merge request, but I've a problem.

So, I just change in node_modules/react-native-fast-image/package.json

+ "main": "dist/index.js",
- "main": "src/index.js",

Finally, run normally in Web (tested in create-react-app)

[ilavenilp]

What is the current status of this? Is the browser compatibility attained?

[dehypnosis]

Is this library under maintaining? Hope this feature to be merged...

[r17x]

@dehypnosis Yes, I hope this pull request to be merged.

I have some project use this pull request (using patch-package for patch original react-native-fast-image with this pull request) and is still work correctly.

[dehypnosis]

@ri7nz patch-package tool seems good to me, but i have already patched so many broken react-native libs in web platform by myself. should have know this tool earlier. anyway thanks.

[r17x]

@dehypnosis you're welcome

[CyxouD]

Any updates? :)

[LRNZ09]

@tberman @DylanVann I agree it should have a different entry point for the web

[i6mi6]

In case you are using RN +0.64:

1. navigate to node_modules/react-native-fast-image/dist/index.js
2. replace the file content with the following:

import React, { forwardRef, memo } from 'react'
import {
    View,
    Image,
    NativeModules,
    StyleSheet,
    Platform,
} from 'react-native'

const FastImageViewNativeModule = NativeModules.FastImageView

function FastImageBase({
    source,
    tintColor,
    onLoadStart,
    onProgress,
    onLoad,
    onError,
    onLoadEnd,
    style,
    children,
    fallback,
    forwardedRef,
    ...props
}) {
    if (fallback || Platform.OS === 'web') {
        return (
            <View style={[styles.imageContainer, style]} ref={forwardedRef}>
                <Image
                    {...props}
                    tintColor={tintColor}
                    style={StyleSheet.absoluteFill}
                    source={source}
                    onLoadStart={onLoadStart}
                    onProgress={onProgress}
                    onLoad={onLoad}
                    onError={onError}
                    onLoadEnd={onLoadEnd}
                />
                {children}
            </View>
        )
    }

    return (
        <View style={[styles.imageContainer, style]} ref={forwardedRef}>
            <FastImageView
                {...props}
                tintColor={tintColor}
                style={StyleSheet.absoluteFill}
                source={Image.resolveAssetSource(source)}
                onFastImageLoadStart={onLoadStart}
                onFastImageProgress={onProgress}
                onFastImageLoad={onLoad}
                onFastImageError={onError}
                onFastImageLoadEnd={onLoadEnd}
            />
            {children}
        </View>
    )
}

const FastImageMemo = memo(FastImageBase)

const FastImage = forwardRef((props, ref) => (
    <FastImageMemo forwardedRef={ref} {...props} />
))

FastImage.displayName = 'FastImage'

const styles = StyleSheet.create({
    imageContainer: {
        overflow: 'hidden',
    },
})

FastImage.resizeMode = {
    contain: 'contain',
    cover: 'cover',
    stretch: 'stretch',
    center: 'center',
}

FastImage.priority = {
    // lower than usual.
    low: 'low',
    // normal, the default.
    normal: 'normal',
    // higher than usual.
    high: 'high',
}

FastImage.cacheControl = {
    // Ignore headers, use uri as cache key, fetch only if not in cache.
    immutable: 'immutable',
    // Respect http headers, no aggressive caching.
    web: 'web',
    // Only load from cache.
    cacheOnly: 'cacheOnly',
}

FastImage.preload = sources => {
    if (Platform.OS !== 'web') {
        FastImageViewNativeModule.preload(sources)
    }
}

FastImage.defaultProps = {
    resizeMode: FastImage.resizeMode.cover,
}

let FastImageView

if (Platform.OS === 'web') {
    FastImageView = Image
} else {
    const { requireNativeComponent } = require('react-native')
    FastImageView = requireNativeComponent('FastImageView', FastImage, {
        nativeOnly: {
            onFastImageLoadStart: true,
            onFastImageProgress: true,
            onFastImageLoad: true,
            onFastImageError: true,
            onFastImageLoadEnd: true,
        },
    })
}

export default FastImage

3. As @dehypnosis mentioned use patch-package to patch the file by calling npx patch-package react-native-fast-image

[sreuter]

I don't think we need this necessary in react-native-fast-image itself, as it doesn't really yield any benefits.

If you want to have a fallback for web today, create these two files.

image.web.tsx

import { Image } from "react-native";
export default Image;

image.tsx

import FastImage from "react-native-fast-image";
export default FastImage;

Then simply include via import Image from "./image";, and it will automatically use the image.web.tsx file for web.

[LRNZ09]

@sreuter I don't agree, you're going to have the benefit of supporting the web platform without extra effort from the developer. Many other libraries have it already, too.

[Fedeorlandau]

This would be awesome. :)

[Saikedo]

Any updates on including this feature?

[gabimoncha]

@i6mi6 method works with @storybook/addon-react-native-web too

[hasebsiddiqui]

Any update?

[cinkagan]

any update?

[moreiraj-ppb]

Any updates to accept this feature?