Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@lightbase/react-native-panorama-view

Package Overview
Dependencies
Maintainers
5
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lightbase/react-native-panorama-view

A simple component for displaying panoramic images in your React Native app.

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
17
decreased by-45.16%
Maintainers
5
Weekly downloads
 
Created
Source

Lightbase

React Native Panorama View

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

NameTypeDescription
imageUrlstringRemote or local URI for fetching the panorama image.
enableTouchTrackingbooleanEnables dragging the panorama by touch when true.
onImageLoadingFailedcallbackFired when something goes wrong while trying to load the panorama.
onImageDownloadedcallbackFired when the image was successfully downloaded. This will fire before onImageLoaded
onImageLoadedcallbackFired when the image was successfully loaded.
styleViewStyleAllows 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

Keywords

FAQs

Package last updated on 12 Sep 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc