360-degree Image Viewer For React Native

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