react-native-photo-status

React Native library to generate photo status.

Usage no npm install needed!

<script type="module">
  import reactNativePhotoStatus from 'https://cdn.skypack.dev/react-native-photo-status';
</script>

README

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

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.