How to use react-native-pan-zoom with react native web - react-native-web

Question

I have a react native web app with an Image. I want to do pan and zoom so I tried wrapping it with ImageZoom from the react-native-pan-zoom module.
<ImageZoom
cropWidth={Dimensions.get('window').width}
cropHeight={Dimensions.get('window').height}
imageWidth={200}
imageHeight={200}
>
<Image source={`/EventMaps/${name}`} style={styles.image} resizeMode="center" />
</ImageZoom>
But a get a compile error
./node_modules/react-native-image-pan-zoom/built/image-zoom/image-zoom.component.js
Module parse failed: Unexpected token (555:16)
You may need an appropriate loader to handle this file type.
| ]
| };
| return (<react_native_1.View style={__assign({}, image_zoom_style_1.default.container, this.props.style, { width: this.props.cropWidth, height: this.props.cropHeight })}
{...this.imagePanResponder.panHandlers}>
| <react_native_1.Animated.View style={animateConf}>
| <react_native_1.View onLayout={this.handleLayout.bind(this)} style={{
Should this work??

Answer 1

Third-party libs in node_modules are often excluded from being transformed in web projects, since they are usually shipped with compiled dist file. But many react-native libs are shipped with source jsx file because it should be loaded and transformed by react-native toolchain.
In this case, you should explicitly add the specific lib to include option of babel or webpack config. See the react-native-web document for an example:
path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
In your case react-native-image-pan-zoom instead of react-native-uncompiled.
However, it cannot guarantee react-native-image-pan-zoom can be used in your web project, since many react-native libs use some features react-native-web didn't polyfilled, or contain native extensions. You may take a deep look after successfully loading those files.