Skip to content

WrathChaos/react-native-instagram-story-circle

Repository files navigation

React Native Instagram Story Circle

Fully customizable Instagram Story Circle with Bounceable Animated Library for React Native

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Instagram Story Circle

Installation

Add the dependency:

npm i react-native-instagram-story-circle

Peer Dependencies

IMPORTANT! You need install them
"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
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

  • 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.