Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lightbasenl/react-native-panorama-view
A simple component for displaying panoramic images in your React Native app.
https://github.com/lightbasenl/react-native-panorama-view
360 android ios panorama panorama-image panorama-viewer react reactnative typescript
Last synced: 8 days ago
JSON representation
A simple component for displaying panoramic images in your React Native app.
- Host: GitHub
- URL: https://github.com/lightbasenl/react-native-panorama-view
- Owner: lightbasenl
- License: mit
- Archived: true
- Created: 2019-06-19T08:35:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:54:43.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T13:21:41.375Z (3 months ago)
- Topics: 360, android, ios, panorama, panorama-image, panorama-viewer, react, reactnative, typescript
- Language: Swift
- Size: 12.1 MB
- Stars: 128
- Watchers: 6
- Forks: 47
- Open Issues: 59
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-native-panorama-view - A simple component for displaying panoramic images in your React Native app. (Uncategorized / Uncategorized)
README
# React Native Panorama View
React Native Panorama viewer for Android and iOS.
## 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
```tsx
import PanoramaView from "@lightbase/react-native-panorama-view";
const PanoramaDetails = () => (
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
viewer: {
height: 230,
},
});
```
### Fullscreen panorama
```tsx
import PanoramaView from "@lightbase/react-native-panorama-view";
const FullScreenPanorama = () => (
);
```
## 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** |