# react-native-photo-status

> React Native library to generate photo status.

Latest version **0.0.2** (published 2018-11-30) · Apache License 2.0 license · 0 weekly downloads

## Install

```sh
npm install react-native-photo-status
pnpm add react-native-photo-status
yarn add react-native-photo-status
bun add react-native-photo-status
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-11-30 |
| First published | 2018-06-27 |
| Weekly downloads | 0 |
| License | Apache License 2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 258.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Gaetano Zappi |
| Maintainers | zappi |
| Keywords | react-native, avatar, photo, status |

## Links

- npm: https://www.npmjs.com/package/react-native-photo-status
- Repository: https://github.com/gaetanozappi/react-native-photo-status
- Homepage: https://github.com/gaetanozappi/react-native-photo-status#readme
- Issues: https://github.com/gaetanozappi/react-native-photo-status/issues
- npm.io page: https://npm.io/package/react-native-photo-status

## Dependencies (2)

- [react-native-vector-icons](https://npm.io/package/react-native-vector-icons.md) 4.6.0
- [react-native-linear-gradient](https://npm.io/package/react-native-linear-gradient.md) ^2.4.0

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2018-11-30
- 0.0.1 — 2018-06-27

## README

# React Native: react-native-photo-status

[![GitHub package version](https://img.shields.io/github/package-json/v/gaetanozappi/react-native-photo-status.svg?style=flat&colorB=2b7cff)](https://github.com/gaetanozappi/react-native-photo-status)
[![github home](http://img.shields.io/npm/v/react-native-photo-status.svg?style=flat)](https://www.npmjs.com/package/react-native-photo-status)
![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS-brightgreen.svg?style=flat&colorB=191A17)
[![github home](https://img.shields.io/badge/gaetanozappi-react--native--photo--status-blue.svg?style=flat)](https://github.com/gaetanozappi/react-native-photo-status)
[![npm](https://img.shields.io/npm/dm/react-native-photo-status.svg?style=flat&colorB=007ec6)](https://www.npmjs.com/package/react-native-photo-status)

[![github issues](https://img.shields.io/github/issues/gaetanozappi/react-native-photo-status.svg?style=flat)](https://github.com/gaetanozappi/react-native-photo-status/issues)
[![github closed issues](https://img.shields.io/github/issues-closed/gaetanozappi/react-native-photo-status.svg?style=flat&colorB=44cc11)](https://github.com/gaetanozappi/react-native-photo-status/issues?q=is%3Aissue+is%3Aclosed)
[![Issue Stats](https://img.shields.io/issuestats/i/github/gaetanozappi/react-native-photo-status.svg?style=flat&colorB=44cc11)](http://github.com/gaetanozappi/react-native-photo-status/issues)
[![github license](https://img.shields.io/github/license/gaetanozappi/react-native-photo-status.svg)]()

![PNG](screenshot/react-native-photo-status.png)

-   [Usage](#-usage)
-   [License](#-license)

## 📖 Getting started

`$ npm install react-native-photo-status --save`

## 💻 Usage

```javascript
import React, { Component } from 'react';
import { View } from 'react-native';
import PhotoStatus from 'react-native-photo-status';

export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <PhotoStatus
          colors={['#FFFFFF', '#FFFFFF']}
          dim={300}
          image={{
            uri: 'http://www.prettydesigns.com/wp-content/uploads/2013/12/Megan-Gale-Long-Hairstyle-Layered-Hair.jpg',
          }}
          isStatus={true}
          isIcon={true}
          icon={'md-checkmark-circle'}//Use the Ionicons icons.
          iconSize={25}
          iconColor={'#26C6DA'}
        />
        <PhotoStatus
          colors={['#80DEEA', '#26C6DA', '#00ACC1']}
          dim={300}
          image={{
            uri: 'http://www.prettydesigns.com/wp-content/uploads/2013/12/Megan-Gale-Long-Hairstyle-Layered-Hair.jpg',
          }}
          isStatus={true}
          isIcon={false}
          colorStatus={'#00E676'}
        />
      </View>
    );
  }
}

```

## 💡 Props

| Prop              | Type       | Default | Note                                                                                                       |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `color`      | `array`   |  | We need to pass an array of the colors, as in the example.
| `dim`       | `number`   |    | Circle size.
| `image`      | `object`   |  | We need to pass an image, as in the example.
| `isStatus`      | `bool`   |  | Indicates whether to have the status icon.
| `isIcon`      | `bool`   |  | Indicates whether to have the status icon.
| `icon`      | `Ionicons`   |  | Indicates what kind of icon to use.
| `iconSize`      | `number`   |  | Icon size.
| `iconColor`      | `string`   |  | Icon color.
| `colorStatus`      | `string`   |  | Indicates the background color of the status.

## 📜 License
This library is provided under the Apache License.

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