0.0.2 • Published 5 years ago

react-native-photo-status v0.0.2

Weekly downloads
8
License
Apache License 2....
Repository
github
Last release
5 years ago

React Native: react-native-photo-status

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

PNG

📖 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

PropTypeDefaultNote
colorarrayWe need to pass an array of the colors, as in the example.
dimnumberCircle size.
imageobjectWe need to pass an image, as in the example.
isStatusboolIndicates whether to have the status icon.
isIconboolIndicates whether to have the status icon.
iconIoniconsIndicates what kind of icon to use.
iconSizenumberIcon size.
iconColorstringIcon color.
colorStatusstringIndicates the background color of the status.

📜 License

This library is provided under the Apache License.