Expo version of
react-native-instagram-story-circle
Installation
Add the dependency:
npm i expo-instagram-story-circleUsage
Import
import IGStoryCircle from "expo-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
Original: FreakyCoder, kurayogun@gmail.com
License
React Native Instagram Story Circle is available under the MIT license. See the LICENSE file for more info.