CODEWITHSUNDEEP
react-native-web
Douglas Woods
Douglas Woods

Reputation: 964

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

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??

Upvotes: 1

Views: 641

Answers (1)

Sin
Sin

Reputation: 1100

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.

Upvotes: 1

Related Questions