react-native-panorama-view

React Native Panorama viewer for Android and iOS.

Getting started

$ npm install @lightbase/react-native-panorama-view --save

$ yarn add @lightbase/react-native-panorama-view

Mostly automatic installation

$ react-native link @lightbase/react-native-panorama-view

$ cd ios && pod install

Manual installation

iOS (Cocoapods)

This guide assumes you've already set-up your React Native project to use Cocoapods.

1. Open up ios/Podfile
2. Add pod 'PanoramaView', :path => '../node_modules/@lightbase/react-native-panorama-view' to your dependency block.
3. Run $ pod install

We recommend using a minimum platform version of at least 9.0 for your application to ensure that the correct dependency versions are used. To do this add platform :ios, '9.0' to the top of your ios/Podfile.

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import nl.lightbase.PanoramaViewPackage; to the imports at the top of the file
• Add new PanoramaViewPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@lightbase_react-native-panorama-view'
   project(':@lightbase_react-native-panorama-view').projectDir = new File(rootProject.projectDir, 	'../node_modules/@lightbase/react-native-panorama-view/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     implementation project(':@lightbase_react-native-panorama-view')

Troubleshooting iOS

If you're app doesn't compile due to Swift or linker errors. Follow these steps.

1. Make sure you have defined a SWIFT_VERSION in your project.
2. Add /usr/lib/swift as the first argument to your Runpath Search Paths.
3. Add "$(TOOLCHAIN_DIR)/usr/lib/swift/$(PLATFORM_NAME)" to your Library Search Paths.

Usage

You can size your panorama anyway you'd like using the regular View styles.

Here are some examples:

Embed a panorama as a part of your screen

import { PanoramaView } from "@lightbase/react-native-panorama-view";

const PanoramaDetails = () => (
  <View style={styles.container}>
    <PanoramaView
      style={styles.viewer}
      dimensions={{ height: 230, width: Dimensions.get("window").width }}
      inputType="mono"
      imageUrl="https://raw.githubusercontent.com/googlevr/gvr-android-sdk/master/assets/panoramas/testRoom1_2kMono.jpg"
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  viewer: {
    height: 230
  }
});

Fullscreen panorama

import { PanoramaView } from "@lightbase/react-native-panorama-view";

const FullScreenPanorama = () => (
  <PanoramaView
    style={{ flex: 1 }}
    dimensions={{
      height: Dimensions.get("window").height,
      width: Dimensions.get("window").width
    }}
    inputType="mono"
    imageUrl="https://raw.githubusercontent.com/googlevr/gvr-android-sdk/master/assets/panoramas/testRoom1_2kMono.jpg"
  />
);

Props

| Name | Type | Description | | -------------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------- | | imageUrl | string | Remote URI for fetching the panorama image. | | enableTouchTracking | boolean | Enables dragging the panorama by touch when true. | | onImageLoadingFailed | callback | Fired when something goes wrong while trying to load the panorama. | | onImageLoaded | callback | Fired when the image was successfully loaded. | | style | ViewStyle | Allows to style the PanoramaView like a regular View. | | inputType | 'mono' or 'stereo' | Specify the type of panorama source image. Android only | | dimensions | { height: number, width: number } | Is used to prevent loading unnecessarily large files into memory. Currently required for Android only |