Skip to content

rodrigobertolottizinsp/react-native-panorama-view

 
 

Repository files navigation

Lightbase

React Native Panorama View

New fork as the original one seems unmaintained. This is intended to be installed directly from git, so tsc has been removed

React Native Panorama viewer for Android and iOS.

Demo

Mostly automatic installation (RN >= 0.60)

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

$ cd ios && pod install

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.
  4. Add a dummy swift file on your project root and accept adding a bridging header

Usage

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

NOTE: On android, you need to make sure the View renders at least a few pixels (not invisible / display: none). Otherwise, the VR viewer won't fire events. You may use onImageDownloaded to lazy load the VR renderer instead.

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 or local 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.
onImageDownloaded callback Fired when the image was successfully downloaded. This will fire before onImageLoaded
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

About

Personal from lightbasenl/react-native-panorama-view

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Swift 44.8%
  • Java 30.1%
  • Ruby 9.5%
  • Objective-C 8.3%
  • JavaScript 4.9%
  • TypeScript 1.4%
  • Starlark 1.0%