# react-native-instagram-story-circle > Fully customizable Instagram Story Circle with Bounceable Animated Library for React Native Latest version **0.1.9** (published 2020-09-30) · MIT license · 0 weekly downloads ## Install ```sh npm install react-native-instagram-story-circle pnpm add react-native-instagram-story-circle yarn add react-native-instagram-story-circle bun add react-native-instagram-story-circle ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.9 | | Published | 2020-09-30 | | First published | 2020-09-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 35.6 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 14 | | Author | FreakyCoder | | Maintainers | freakycoder | | Keywords | FreakyCoder, freakycoder, kuray, Kuray, react, react-native, javascript, ui-lib, rn | ## Links - npm: https://www.npmjs.com/package/react-native-instagram-story-circle - Repository: https://github.com/WrathChaos/react-native-instagram-story-circle - Homepage: https://www.freakycoder.com - Issues: https://github.com/WrathChaos/react-native-instagram-story-circle/issues - npm.io page: https://npm.io/package/react-native-instagram-story-circle ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.1.9 (latest) — 2020-09-30 - 0.1.7 — 2020-09-30 - 0.1.5 — 2020-09-29 - 0.1.4 — 2020-09-29 - 0.1.3 — 2020-09-05 ## README React Native Instagram Story Circle [![Fully customizable Instagram Story Circle with Bounceable Animated Library for React Native](https://img.shields.io/badge/-Fully%20customizable%20Instagram%20Story%20Circle%20with%20Bounceable%20Animated%20Library%20for%20React%20Native-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-instagram-story-circle) [![npm version](https://img.shields.io/npm/v/react-native-instagram-story-circle.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-instagram-story-circle) [![npm](https://img.shields.io/npm/dt/react-native-instagram-story-circle.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-instagram-story-circle) ![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge) [![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)

React Native Instagram Story Circle

# 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. --- _Source: https://npm.io/package/react-native-instagram-story-circle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._