Installation

Add the dependency:

npm i react-native-instagram-story-circle

Peer 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

• [x] ~~LICENSE~~
• [ ] Write an article about the lib on Medium

Credits

Inspired on Zafer Ayan's Medium Article

Author

FreakyCoder, [email protected]

License

React Native Instagram Story Circle is available under the MIT license. See the LICENSE file for more info.