{"id":19139686,"url":"https://github.com/birdwingo/react-native-instagram-stories","last_synced_at":"2025-05-15T18:11:27.732Z","repository":{"id":188881149,"uuid":"679210737","full_name":"birdwingo/react-native-instagram-stories","owner":"birdwingo","description":"šŸš€ Instagram stories is a versatile React Native component designed to display a horizontal scrollable list of user stories, similar to the stories feature found in the Instagram app.","archived":false,"fork":false,"pushed_at":"2025-03-11T21:28:26.000Z","size":7281,"stargazers_count":160,"open_issues_count":13,"forks_count":44,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-06T19:17:56.708Z","etag":null,"topics":["avatars","image","instagram","instagram-stories","instagram-story","react-native","reanimated","stories","video"],"latest_commit_sha":null,"homepage":"https://birdwingo.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/birdwingo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-08-16T10:40:08.000Z","updated_at":"2025-04-22T14:16:48.000Z","dependencies_parsed_at":"2023-08-17T09:46:36.867Z","dependency_job_id":"59aa214c-8af7-4559-ba43-d301376bb6b6","html_url":"https://github.com/birdwingo/react-native-instagram-stories","commit_stats":null,"previous_names":["birdwingo/react-native-instagram-stories"],"tags_count":41,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-instagram-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-instagram-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-instagram-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdwingo%2Freact-native-instagram-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birdwingo","download_url":"https://codeload.github.com/birdwingo/react-native-instagram-stories/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394726,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["avatars","image","instagram","instagram-stories","instagram-story","react-native","reanimated","stories","video"],"created_at":"2024-11-09T07:14:43.744Z","updated_at":"2025-05-15T18:11:27.692Z","avatar_url":"https://github.com/birdwingo.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @birdwingo/react-native-instagram-stories\n\n![npm downloads](https://img.shields.io/npm/dm/%40birdwingo/react-native-instagram-stories)\n![npm version](https://img.shields.io/npm/v/%40birdwingo/react-native-instagram-stories)\n![github release](https://github.com/birdwingo/react-native-instagram-stories/actions/workflows/release.yml/badge.svg?event=pull_request)\n![npm release](https://github.com/birdwingo/react-native-instagram-stories/actions/workflows/public.yml/badge.svg?event=release)\n\n## Features šŸŒŸ\n\nšŸ“ø Capture Moments: Easily integrate Instagram-like stories in your React Native app to let users share their favorite moments.\n\nāœØ Inspired by Instagram: Crafted with inspiration from the real Instagram stories feature, capturing its essence and style.\n\nšŸ“± Mobile-Friendly: Designed with mobile users in mind, providing a smooth and responsive experience on all devices.\n\nšŸ’¾ Using Async Storage: Utilize Async Storage to save the progress of users and load them whenever they want.\n\nšŸ› ļø Developer Friendly: Well-documented and easy to set up, making the developer's life a breeze.\n\nšŸš€ High Performance: Optimized for speed, ensuring a lag-free experience for users.\n\nšŸ’” Rich Features: Support for video, images, and text, plus more ā€“ all in one powerful package!\n\nšŸŽ‰ Community Support: Join a growing community of developers and users, eager to help and share their experiences.\n\n## About\n\n`react-native-instagram-stories` component is a versatile React Native component designed to display a horizontal scrollable list of user stories, similar to the stories feature found in the Instagram app. It provides a visually appealing way to showcase stories with various customizable options. It is used in the [Birdwingo mobile app](https://www.birdwingo.com) for **Birdwingo Academy** which allows users to learn the basics of investing in stocks and ETFs.\n\n\u003cimg src=\"./src/assets/images/demo.gif\" width=\"300\"\u003e\n\n## Installation\n\n```bash\nnpm install react-native-svg\nnpm install react-native-reanimated\nnpm install react-native-gesture-handler\nnpm install @birdwingo/react-native-instagram-stories\n```\n\n## Integration with Storage, Flashlist and Video\n\nThe component offers an option to save and track the progress of seen stories using `saveProgress`. If you use `saveProgress`, please make sure you have `@react-native-async-storage/async-storage` installed.\n\nIf you have installed Flashlist, it will be automatically used for avatars list.\n\nIf you use video in your stories, please make sure you have `react-native-video` installed.\n\n## Usage\n\nTo use the `InstagramStories` component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:\n\n```jsx\nimport React, { useRef } from 'react';\nimport { View } from 'react-native';\nimport InstagramStories, { InstagramStoriesPublicMethods } from '@birdwingo/react-native-instagram-stories';\n\nconst YourComponent = () =\u003e {\n\n // to use public methods:\n const ref = useRef( null ); // if using typescript - useRef\u003cInstagramStoriesPublicMethods\u003e( null )\n\n const stories = [{ // if using typescript - const stories: InstagramStoriesProps['stories']\n id: 'user1',\n name: 'User 1',\n avatarSource: { uri: 'user1-profile-image-url', },\n stories: [\n { id: 'story1', source: { uri: 'story1-image-url' } },\n { id: 'story2', source: { uri: 'story1-video-url' }, mediaType: 'video' },\n // ...\n ]}, // ...\n ];\n\n // usage of public method\n const setStories = () =\u003e ref.current?.setStories( stories );\n \n return (\n \u003cView\u003e\n \u003cInstagramStories\n ref={ref}\n stories={stories}\n // ...\n /\u003e\n \u003cPressable onPress={setStories}\u003e{...}\u003c/Pressable\u003e\n \u003c/View\u003e\n );\n};\n\nexport default YourComponent;\n```\n\n## Props\n\n Name | Type | Default value | Description \n----------------------------|----------------------------------------------|--------------------------------------------|---------------------\n `stories` | [InstagramStoryProps](#instagramstoryprops)[]| **required** | An array of stories.\n `saveProgress` | boolean | false | A boolean indicating whether to save and track the progress of seen stories.\n `avatarBorderColors` | string[] | [DEFAULT_COLORS](#default-gradient-colors) | An array of string colors representing the border colors of story avatars.\n `avatarSeenBorderColors` | string[] | [ '#2A2A2C' ] | An array of string colors representing the border colors of seen story avatars.\n `avatarSize` | number | 60 | The size of the story avatars.\n `storyAvatarSize` | number | 25 | The size of the avatars shown in the header of each story.\n `avatarListContainerStyle` | ScrollViewProps['contentContainerStyle'], FlashListProps | | Additional styles for the avatar scroll list container.\n `avatarListContainerProps` | ScrollViewProps | | Props to be passed to the avatar list ScrollView component.\n `containerStyle` | ViewStyle | | Additional styles for the story container.\n `textStyle` | TextStyle | | Additional styles for text elements.\n `animationDuration` | number | 10000 | The duration of the story animations in ms.\n `videoAnimationMaxDuration`| number | | The max duration of the video story animations in ms. If is this property not provided, the whole video will be played.\n `backgroundColor` | string | '#000000' | The background color of story container.\n `showName` | boolean | false | Whether you want to show user name under avatar in avatar list.\n `nameTextStyle` | TextStyle | { width: `avatarSize` + 10 } | Additional styles for name text elements.\n `nameTextProps` | TextProps | | Props to be passed to the name Text component.\n `videoProps` | [react-native-video](https://www.npmjs.com/package/react-native-video?activeTab=readme#configurable-props)| | Additional props for video component. For more information, follow `react-native-video`.\n `closeIconColor` | string | '#00000099' | The color of story close icon.\n `progressColor` | string | '#00000099' | Background color of progress bar item in inactive state\n `progressActiveColor` | string | '#FFFFFF' | Background color of progress bar item in active state\n `modalAnimationDuration` | number | 800 | Duration of modal animation in ms (showing/closing instagram stories)\n `storyAnimationDuration` | number | 800 | Duration of story animation (animation when swiping to the left/right)\n `mediaContainerStyle` | ViewStyle | | Additional styles for media (video or image) container\n `imageStyles` | ImageStyle | { width: WIDTH, aspectRatio: 0.5626 } | Additional styles image component\n `imageProps` | ImageProps | | Additional props applied to image component\n `isVisible` | boolean | false | A boolean indicating whether to show modal on load (modal will be show with first story item)\n `headerStyle` | ViewStyle | | Additional styles for the story header\n `headerContainerStyle` | ViewStyle | | Additional styles for the story header container\n `progressContainerStyle` | ViewStyle | | Additional styles for the story progress container\n `hideAvatarList` | boolean | false | A boolean indicating whether to hide avatar scroll list\n `hideElementsOnLongPress` | boolean | false | A boolean indicating whether to hide all elements when story is paused by long press\n `hideOverlayOnLongPress` | `boolean` | The value of `hideElementOnLongPress` | Controls whether the image overlay hides when `hideElementOnLongPress` is set to `true`. If `true`, the overlay will hide along with other elements on long press. If `false`, only the other elements (e.g., header, progress bar) will hide, and the overlay will remain visible.\n `loopingStories` | `'none'` | `'onlyLast'` | `'all'` | `'none'` | A string indicating whether to continue stories after last story was shown. If set to `'none'` modal will be closed after all stories were played, if set to `'onlyLast'` stories will loop on last user only after all stories were played. If set to `'all'` stories will play from beginning after all stories were played.\n `statusBarTranslucent` | boolean | false | A property passed to React native Modal component\n `footerComponent` | ReactNode | | A custom component, such as a floating element, that can be added to the modal.\n `imageOverlayView` | ReactNode | | Image overlay compontent\n `onShow` | ( id: string ) =\u003e void | | Callback when a story is shown.\n `onHide` | ( id: string ) =\u003e void | | Callback when a story is hidden.\n `onSwipeUp` | ( userId?: string, storyId?: string ) =\u003e void| | Callback when user swipes up.\n `onStoryStart` | ( userId?: string, storyId?: string ) =\u003e void| | Callback when story started\n `onStoryEnd` | ( userId?: string, storyId?: string ) =\u003e void| | Callback when story ended\n\n## Public Methods\n\n Name | Type | Description\n---------------------- |--------------------------------------------------------------------------------------------------|---------------------------\n `spliceStories` | ( stories: [InstagramStoryProps](#instagramstoryprops)[], index?: number ) =\u003e void | Insert new stories at a specific index. If you don't provide `index` property, stories will be pushed to the end of array.\n `spliceUserStories` | ( stories: [InstagramStoryProps](#instagramstoryprops)[], user: string, index?: number ) =\u003e void | Insert new stories for a specific user at a specific index. If you don't provide `index` property, stories will be pushed to the end of array\n `setStories` | ( stories: [InstagramStoryProps](#instagramstoryprops)[] ) =\u003e void | Replace the current stories with a new set of stories.\n `clearProgressStorage`| () =\u003e void | Clear the progress storage for seen stories.\n `hide` | () =\u003e void | Hide stories if currently visible\n `show` | ( id?: string ) =\u003e void | Show stories modal with provided story `id`. If `id` is not provided, will be shown first story\n `pause` | () =\u003e void | Pause story\n `resume` | () =\u003e void | Resume story\n `isPaused` | () =\u003e boolean | Returns true if story is paused\n `goToPreviousStory` | () =\u003e void | Goes to previous story item\n `goToNextStory` | () =\u003e void | Goes to next story item\n `getCurrentStory` | () =\u003e {userId?: string, storyId?: string} | Returns current userId and storyId\n `goToSpecificStory` | ( userId: string, index: number ) =\u003e void | Change current playing story to defined index if index not exist then start playing first story\n\n## Types\n\n### InstagramStoryProps\n\n Parameter | Type | Required\n-----------------------|----------------------------------------|----------------\n `id` | string | true\n `avatarSource` | ImageProps['source'] | false\n `renderAvatar` | () =\u003e ReactNode | false\n `renderStoryHeader` | () =\u003e ReactNode | false\n `onStoryHeaderPress` | () =\u003e void | false\n `name` | string | false\n `stories` | [StoryItemProps](#storyitemprops)[] | true\n\n**Please note that id parameter must be unique for every user**\n\n### StoryItemProps\n\n Parameter | Type | Required\n-----------------------|------------------------------------------|-------------------\n `id` | string | true\n `source` | ImageProps['source'] | true\n `mediaType` | 'video' \\| 'image' (default: `'image'`) | false\n `animationDuration` | number | false\n `renderContent` | () =\u003e ReactNode | false\n `renderFooter` | () =\u003e ReactNode | false\n\n**Please note that id parameter must be unique for every story**\n\n### Default Gradient Colors\nDefault colors for avatar gradient are the same as on Instagram - `[ '#F7B801', '#F18701', '#F35B04', '#F5301E', '#C81D4E', '#8F1D4E' ]`\n\n## Sponsor\n\n**react-native-instagram-stories** is sponsored by [Birdwingo](https://www.birdwingo.com).\\\nDownload Birdwingo mobile app to see react-native-instagram-stories in action!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-instagram-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirdwingo%2Freact-native-instagram-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdwingo%2Freact-native-instagram-stories/lists"}