React Native: react-native-photo-status

• Usage
• License

📖 Getting started

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

💻 Usage

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.