Add the dependency:
npm i react-native-instagram-story-circle"react-native-linear-gradient": ">= 2.5.6"
"@freakycoder/react-native-bounceable": ">= 0.1.0",import IGStoryCircle from "react-native-instagram-story-circle";Please look at the example simply run it and check how it works :)
<IGStoryCircle source={source} hasStory onPress={() => {}} />| 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 |
| outerBorderRadius | number | 32 | change the whole instagram story circle's outer border radius |
| innerBorderRadius | number | 32 | change the whole instagram story circle's inner border radius |
| 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 |
| ImageComponent | component | Image | set your own Image component instead of default React Native's Image component |
-
LICENSE - Write an article about the lib on Medium
Inspired on Zafer Ayan's Medium Article
FreakyCoder, [email protected]
React Native Instagram Story Circle is available under the MIT license. See the LICENSE file for more info.