Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/orodrigogo/image360viewer
📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.
https://github.com/orodrigogo/image360viewer
360-photo 360-view react-native rotate rotate-image rotation
Last synced: 5 days ago
JSON representation
📱⚛ 🔄 The Image360Viewer has support for React Native CLI and Expo. This library allows the user to explore and have the freedom to view all product details in 360 degrees.
- Host: GitHub
- URL: https://github.com/orodrigogo/image360viewer
- Owner: orodrigogo
- Created: 2021-08-23T10:30:28.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-08-25T18:53:50.000Z (about 3 years ago)
- Last Synced: 2024-10-08T14:02:21.471Z (about 1 month ago)
- Topics: 360-photo, 360-view, react-native, rotate, rotate-image, rotation
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/image360viewer
- Size: 7.16 MB
- Stars: 132
- Watchers: 4
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
- [📚 About](#about)
- [🗺 Getting started](#getting-started)
- [🎉 Usage](#usage)
- [📘 Properties](#properties)
- [📱 Demo](#demo)
- [👏 Contributing](#contributing)
- [💜 License](#license)
## About
People want to see all the details of a product before they buy it. Being able to view and explore the product gives the user a trusted experience and connects the user with the product. There are cases where a static image cannot demonstrate all the details of the product.
The `Image360Viewer` has support for `React Native CLI` and `Expo`. This library allows the user to explore and have the freedom to view all product details in 360 degrees.
Image360Viewer loads a sequence of images that rotates with a user touch interaction. See an example of vector images:
## Getting started
Install the library using:
```sh
yarn add image360viewer
```
_Image360Viewer requires that you install [`react-native-svg`](https://github.com/react-native-svg/react-native-svg)._
## Usage
```ts
import { Image360viewer } from 'image360viewer';
export default function App() {
return (
}
/>
)
}
```
## Properties
Image360viewer has the following properties:
| Property | Description |
| :----------- | :---------- |
| `height?: number` | Image height default is 250. |
| `width?: number` | Image width default is 250. |
| `images: string[]` | Array images to rotate. |
| `resizeMode?: ImageResizeMode` | Image display mode. Default is contain. |
| `rotationRatio?: number` | The drag distance compares to 180 degree. |
| `cursorSize?: number` | Text |
| `cursorIcon?: ReactNode` | Content or icon. |
| `primaryColor?: string` | First color of the gradient line. The value default is "#DA0000" |
| `secondaryColor?: string` | Second color of the gradient line. The value default is "#EA8C8A" |
| `stopColor?: string` | End color of the gradient line. The value default is "#FFF" |
## Demo
Click this link to view a example at Expo Web: [Image360viewer Example](https://expo.dev/@rodrigogsantana/Image360viewer-demo)
## Contributing
Thanks for being interested in making this package better. We encourage everyone to help improve this project with new features, bug fixes and performance improvements.
## License
MIT License © [Rodrigo Gonçalves](https://github.com/rodrigorgtic)
[](https://www.linkedin.com/in/rodrigo-gon%C3%A7alves-santana/)
[](https://www.instagram.com/rodrigo.goncalves.s/)
[](https://twitter.com/rodrigogsdev)