# image360viewer

> The 360 image viewer for react native

Latest version **1.4.7** (published 2021-08-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install image360viewer
pnpm add image360viewer
yarn add image360viewer
bun add image360viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.7 |
| Published | 2021-08-24 |
| First published | 2021-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 305.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 134 |
| Author | Rodrigo Gonçalves Santana |
| Maintainers | rodrigorgtic |
| Keywords | react-native, 360-image-viewer, 360-image-react-native, rn-360-image-viewer, react-native-image-viewer, react-component |

## Links

- npm: https://www.npmjs.com/package/image360viewer
- Repository: https://github.com/rodrigorgtic/image360viewer
- Homepage: https://github.com/rodrigorgtic/image360viewer/blob/master/README.md
- Issues: https://github.com/rodrigorgtic/image360viewer/issues
- npm.io page: https://npm.io/package/image360viewer

## Dependencies (3)

- [abs-svg-path](https://npm.io/package/abs-svg-path.md) ^0.1.1
- [parse-svg-path](https://npm.io/package/parse-svg-path.md) ^0.1.2
- [normalize-svg-path](https://npm.io/package/normalize-svg-path.md) ^1.1.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.4.7 (latest) — 2021-08-24
- 1.3.7 — 2021-08-24
- 1.2.7 — 2021-08-24
- 1.2.6 — 2021-08-24
- 1.2.5 — 2021-08-24
- 1.1.5 — 2021-08-24
- 1.1.4 — 2021-08-24
- 1.1.3 — 2021-08-24
- 1.1.2 — 2021-08-24
- 1.0.2 — 2021-08-23
- 1.0.1 — 2021-08-23
- 1.0.0 — 2021-08-23

## README

<img src=".github/assets/header.png" width="100%">


- [📚 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:

![Vector Images](.github/assets/vector-images.png)


## 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 (
    <Image360viewer
      images={images360}
      width={300}
      cursorIcon={<Image source={directionsImg} style={styles.icon} />}
    />
  )
}
```


## 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
View a demo at Expo Web:


## Contributing 

Obrigado por estar interessado em tornar este pacote melhor. Encorajamos todos a ajudar a melhorar este projeto com novos recursos, correções de bugs e melhorias de desempenho.


## License

MIT License © [Rodrigo Gonçalves](https://github.com/rodrigorgtic)


[![Linkedin Badge](https://img.shields.io/badge/-Linkedin-6633cc?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/rodrigo-gon%C3%A7alves-santana/)](https://www.linkedin.com/in/rodrigo-gon%C3%A7alves-santana/) 
[![Instagram Badge](https://img.shields.io/badge/-Instagram-6633cc?style=flat-square&labelColor=6633cc&logo=instagram&logoColor=white&link=https://www.instagram.com/rodrigo.goncalves.s/)](https://www.instagram.com/rodrigo.goncalves.s/) 
[![Twitter Badge](https://img.shields.io/badge/-Twitter-6633cc?style=flat-square&logo=Twitter&logoColor=white&link=https://twitter.com/rodrigogsdev)](https://twitter.com/rodrigogsdev)

---
_Source: https://npm.io/package/image360viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._