A 3D (360-degree) image viewer for React Native that could be used to provides an interactive visual tour of your product image.
How to use it:
1. Installation.
# Yarn $ yarn add @hauvo/react-native-360-image-viewer # NPM $ npm i @hauvo/react-native-360-image-viewer --save
2. Import necessary resources in your app.
import React from 'react'; import _ from 'lodash' import { View, Dimensions } from 'react-native'; import Image360Viewer from '@hauvo/react-native-360-image-viewer'
3. Define the paths to your product images.
const { width, height } = Dimensions.get('window') const images = _.reverse([ require(`./images/product-1.jpg`), require(`./images/product-2.jpg`), require(`./images/product-3.jpg`), require(`./images/product-4.jpg`), require(`./images/product-5.jpg`), require(`./images/product-6.jpg`), require(`./images/product-7.jpg`), require(`./images/product-8.jpg`), require(`./images/product-9.jpg`), require(`./images/product-10.jpg`), require(`./images/product-11.jpg`), require(`./images/product-12.jpg`), require(`./images/product-13.jpg`), require(`./images/product-14.jpg`), require(`./images/product-15.jpg`), require(`./images/product-16.jpg`), require(`./images/product-17.jpg`), require(`./images/product-18.jpg`), require(`./images/product-19.jpg`), require(`./images/product-20.jpg`), require(`./images/product-21.jpg`), require(`./images/product-22.jpg`), require(`./images/product-23.jpg`), require(`./images/product-24.jpg`), require(`./images/product-25.jpg`), require(`./images/product-26.jpg`), require(`./images/product-27.jpg`), require(`./images/product-28.jpg`), require(`./images/product-29.jpg`), require(`./images/product-30.jpg`), require(`./images/product-31.jpg`), require(`./images/product-32.jpg`), require(`./images/product-33.jpg`), require(`./images/product-34.jpg`), require(`./images/product-35.jpg`), require(`./images/product-36.jpg`) ])
4. Render a basic image viewer app.
const App = () => { return ( <View style={{ flex: 1 }}> <Image360Viewer srcset={images} width={width} height={height} /> </View> ); }; export default App;
Preview:
Download Details:
Author: phuochau
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/phuochau/react-native-360-image-viewer
License: MIT