0.0.2 • Published 5 years ago
react-native-photo-status v0.0.2
React Native: react-native-photo-status
📖 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.