@dsdev/react-native-panorama v1.0.12

React Native Panorama

The react-native-panorama library is a direct continuation of the @lightbase/react-native-panorama-view module. It's a way of continue the panoramic view integration in React Native since @lightbase/react-native-panorama-view has no more updates.

Mostly automatic installation (RN >= 0.60)

$ yarn add @dsdev/react-native-panorama

$ cd ios && pod install

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 "@dsdev/react-native-panorama";

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 "@dsdev/react-native-panorama";

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