0.1.3 • Published 4 years ago
expo-instagram-story-circle v0.1.3
Installation
Add the dependency:
npm i react-native-instagram-story-circlePeer Dependencies
"react-native-linear-gradient": ">= 2.5.6"
"@freakycoder/react-native-bounceable": ">= 0.1.0",Usage
Import
import IGStoryCircle from "react-native-instagram-story-circle";Fundamental Usage
Please look at the example simply run it and check how it works :)
<IGStoryCircle source={source} hasStory onPress={() => {}} />Configuration - Props
| Property | Type | Default | Description |
|---|---|---|---|
| source | image | undefined | set the image for the circle |
| size | number | 64 | change the size of the circle |
| onPress | function | undefined | set the onPress functionality when the component is pressed |
| innerBorderColor | string | "#000" | change the inner circle of the component |
| hasStory | boolean | undefined | set true to activate story's colorful ring |
| storyRingColor | string, string | "#feda75", "#d62976" | change the ring color |
| defaultRingColor | string, string | "#000", "#000" | change the default ring color when hasStory is false |
| profileImageBorderSize | number | 0 | change the profile image border size |
| notificationCount | number | undefined | set the notification count |
| notificationBubbleBackgroundColor | color | "#eb3434" | change the notification background color |
| notificationSize | number | 18 | change the notification circle's size |
| notificationPositionTop | number | default | change the notification circle's position of the top side |
| notificationPositionLeft | number | default | change the notification circle's position of the left side |
Future Plans
LICENSE- Write an article about the lib on Medium
Credits
Inspired on Zafer Ayan's Medium Article
Author
FreakyCoder, kurayogun@gmail.com
License
React Native Instagram Story Circle is available under the MIT license. See the LICENSE file for more info.
0.1.3
4 years ago