odelowo/react-native-instagram-story-circle

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

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.