https://github.com/wrathchaos/react-native-instagram-story-circle
Fully customizable Instagram Story Circle with Bounceable Animated Library for React Native
https://github.com/wrathchaos/react-native-instagram-story-circle
application development ig instagram javascript mobile react react-native typescript
Last synced: 21 days ago
JSON representation
Fully customizable Instagram Story Circle with Bounceable Animated Library for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-instagram-story-circle
- Owner: WrathChaos
- Created: 2020-08-31T18:33:54.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-30T10:34:10.000Z (about 5 years ago)
- Last Synced: 2025-07-30T21:49:37.653Z (3 months ago)
- Topics: application, development, ig, instagram, javascript, mobile, react, react-native, typescript
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 17.7 MB
- Stars: 14
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-instagram-story-circle)
[](https://www.npmjs.com/package/react-native-instagram-story-circle)
[](https://www.npmjs.com/package/react-native-instagram-story-circle)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-instagram-story-circle
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react-native-linear-gradient": ">= 2.5.6"
"@freakycoder/react-native-bounceable": ">= 0.1.0",
```
# Usage
## Import
```jsx
import IGStoryCircle from "react-native-instagram-story-circle";
```
## Fundamental Usage
Please look at the `example` simply run it and check how it works :)
```jsx
{}} />
```
# 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 |
| 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 |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Credits
Inspired on [Zafer Ayan's Medium Article](https://medium.com/@ZaferAyan/react-native-instagram-proje-mimarisi-9031e75a72de)
## Author
FreakyCoder, kurayogun@gmail.com
## License
React Native Instagram Story Circle is available under the MIT license. See the LICENSE file for more info.