{"id":20995118,"url":"https://github.com/blackboxvision/react-native-live-stories","last_synced_at":"2025-07-02T04:37:41.646Z","repository":{"id":54559950,"uuid":"307025448","full_name":"BlackBoxVision/react-native-live-stories","owner":"BlackBoxVision","description":"An Instagram like component to preview and render stories with videos","archived":false,"fork":false,"pushed_at":"2021-03-15T11:16:05.000Z","size":38659,"stargazers_count":20,"open_issues_count":3,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-14T21:52:06.600Z","etag":null,"topics":["instagram-stories","instagram-story","library","react-native","stories"],"latest_commit_sha":null,"homepage":"","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/BlackBoxVision.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-25T04:42:04.000Z","updated_at":"2023-12-17T20:48:20.000Z","dependencies_parsed_at":"2022-08-13T19:40:36.029Z","dependency_job_id":null,"html_url":"https://github.com/BlackBoxVision/react-native-live-stories","commit_stats":null,"previous_names":[],"tags_count":33,"template":false,"template_full_name":null,"purl":"pkg:github/BlackBoxVision/react-native-live-stories","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-native-live-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-native-live-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-native-live-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-native-live-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BlackBoxVision","download_url":"https://codeload.github.com/BlackBoxVision/react-native-live-stories/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BlackBoxVision%2Freact-native-live-stories/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263076938,"owners_count":23410164,"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":["instagram-stories","instagram-story","library","react-native","stories"],"created_at":"2024-11-19T07:21:47.386Z","updated_at":"2025-07-02T04:37:41.619Z","avatar_url":"https://github.com/BlackBoxVision.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Live Stories [![npm version](https://badge.fury.io/js/%40blackbox-vision%2Freact-native-live-stories.svg)](https://badge.fury.io/js/%40blackbox-vision%2Freact-native-live-stories) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)\n\n:rocket: An Instagram Stories like component.\n\n## Table of contents\n\n- [Use Case](#use-case)\n- [Compatibility](#compatibility)\n- [Installation](#installation)\n  - [NPM](#npm)\n  - [YARN](#yarn)\n  - [Peer dependencies](#peer-dependencies)\n  - [Additional Steps](#additional-steps)\n    - [RN Fast Image](#react-native-fast-image)\n    - [RN Video Cache](#react-native-video-cache)\n- [Example Usage](#example-usage)\n- [Component API](#component-api)\n- [Customization](#customization)\n  - [Header](#header)\n  - [Footer](#header)\n- [TODOs](#todos)\n- [Issues](#issues)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Use Case\n\nYou need a component for rendering Instagram like stories.\n\n## Compatibility\n\nSince this library does internal use of hooks you need `React \u003e= 16.8.0`.\n\n## Installation\n\nYou can install this library via NPM or YARN.\n\n### NPM\n\n```bash\nnpm i @blackbox-vision/react-native-live-stories\n```\n\n### YARN\n\n```bash\nyarn add @blackbox-vision/react-native-live-stories\n```\n\n### Peer dependencies\n\nWe rely on the following packages:\n\n- [react-native-video-cache](https://github.com/zhigang1992/react-native-video-cache)\n- [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image)\n- [react-native-video](https://github.com/react-native-video/react-native-video)\n- [react-native-elements](https://reactnativeelements.com)\n- [react-native-snap-carousel](https://github.com/archriss/react-native-snap-carousel)\n- [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)\n- [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient)\n\nYou can install all of them by running the next command:\n\n```bash\nnpm i react-native-elements react-native-video react-native-snap-carousel react-native-vector-icons react-native-linear-gradient react-native-fast-image react-native-video-cache\n```\n\n### Additional Steps\n\n#### React Native Fast Image\n\nIf in your android builds you've proguard enabled, you will need to add the following config in `proguard-rules.pro`:\n\n```bash\n-keep public class com.dylanvann.fastimage.* {*;}\n-keep public class com.dylanvann.fastimage.** {*;}\n-keep public class * implements com.bumptech.glide.module.GlideModule\n-keep public class * extends com.bumptech.glide.module.AppGlideModule\n-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {\n  **[] $VALUES;\n  public *;\n}\n```\n\n#### React Native Video Cache\n\nFor built-in caching we use react-native-video-cache library, which needs a little adjustment in the android manifest in order to work.\n\nYou need to add the property `android:usesCleartextTraffic=\"true\"` in your application in `AndroidManifest.xml`.\n\n## Example Usage\n\nAfter reading and performing the previous steps, you should be able to import the library and use it like in this example:\n\n```javascript\n// insta-stories.js\n\nimport { Text } from 'react-native';\nimport React, { useState } from 'react';\nimport { StoryPreview } from '@blackbox-vision/react-native-live-stories';\n\nconst stories = [\n  {\n    id: 1,\n    viewed: false,\n    preview:\n      'https://instagram.faep7-1.fna.fbcdn.net/v/t51.2885-19/s320x320/62500940_1363897577094116_5145198214462308352_n.jpg?_nc_ht=instagram.faep7-1.fna.fbcdn.net\u0026_nc_ohc=BkIQomknhK0AX_1xEiM\u0026oh=2269fb6e76910915456b7bb6ff24a282\u0026oe=5FBFFDA9',\n    video: 'https://www.w3schools.com/html/mov_bbb.mp4',\n  },\n  {\n    id: 2,\n    viewed: false,\n    preview:\n      'https://instagram.faep7-1.fna.fbcdn.net/v/t51.2885-19/s320x320/62500940_1363897577094116_5145198214462308352_n.jpg?_nc_ht=instagram.faep7-1.fna.fbcdn.net\u0026_nc_ohc=BkIQomknhK0AX_1xEiM\u0026oh=2269fb6e76910915456b7bb6ff24a282\u0026oe=5FBFFDA9',\n    video: 'https://vjs.zencdn.net/v/oceans.mp4',\n  },\n  {\n    id: 3,\n    viewed: false,\n    preview:\n      'https://instagram.faep7-1.fna.fbcdn.net/v/t51.2885-19/s320x320/62500940_1363897577094116_5145198214462308352_n.jpg?_nc_ht=instagram.faep7-1.fna.fbcdn.net\u0026_nc_ohc=BkIQomknhK0AX_1xEiM\u0026oh=2269fb6e76910915456b7bb6ff24a282\u0026oe=5FBFFDA9',\n    video: 'https://vjs.zencdn.net/v/oceans.mp4',\n  },\n];\n\nconst InstaStories = (props) =\u003e {\n  const onStoryDetailItemNext = (story, idx) =\u003e {\n    console.info('Moving to next story', story, ' at index ', idx);\n  };\n\n  const onStoryDetailBackPress = (story, idx) =\u003e {\n    console.info('Going back from story', story, ' at index ', idx);\n  };\n\n  const onStoryPreviewItemPress = (story, idx) =\u003e {\n    console.info('Clicking story preview for story', story, ' at index ', idx);\n  };\n\n  const getStoryPreviewItemProps = (story, idx) =\u003e ({\n    shouldAnimate: !story.viewed,\n  });\n\n  return (\n    \u003cStoryPreview\n      stories={stories}\n      onStoryDetailItemNext={onStoryDetailItemNext}\n      onStoryDetailBackPress={onStoryDetailBackPress}\n      onStoryPreviewItemPress={onStoryPreviewItemPress}\n      getStoryPreviewItemProps={getStoryPreviewItemProps}\n    /\u003e\n  );\n};\n```\n\n## Component API\n\nThe `StoryPreview` component has the following props:\n\n| Properties               | Types       | Default Value | Description                                          |\n| ------------------------ | ----------- | ------------- | ---------------------------------------------------- |\n| style                    | `ViewStyle` | none          | Styles for FlatList mini stories container           |\n| stories                  | array       | []            | An array of stories to be rendered                   |\n| StoryDetailItemHeader    | component   | none          | Component for Header in Story Detail Item            |\n| StoryDetailItemFooter    | component   | none          | Component for Footer in Story Detail Item            |\n| onStoryDetailItemNext    | function    | none          | Callback fired when drag to next item                |\n| onStoryDetailBackPress   | function    | none          | Callback fired when on back button press             |\n| onStoryPreviewItemPress  | function    | none          | Callback fired when performed click on preview       |\n| getStoryPreviewItemProps | function    | none          | Callback to get story preview item props dynamically |\n\n## Customization\n\nWe provide some sort of customization by passing some components that can override the defaults from the library.\n\nFor now, we only give the ability to customize the followings components:\n\n- **Story Header**\n- **Story Footer**\n\n### Header\n\nYou can pass to the `StoryPreview` the component prop `StoryDetailItemHeader` that will replace the `Header` shipped by default.\n\n**Example Header:**\n\n```javascript\nimport React from 'react';\nimport { Text } from 'react-native';\n\nexport const StoryHeader = ({\n  mute,\n  muted,\n  story,\n  goBack,\n  duration,\n  progress,\n}) =\u003e \u003cText\u003eI am the header\u003c/Text\u003e;\n\nStoryHeader.displayName = 'StoryHeader';\n```\n\n### Footer\n\nYou can pass to the `StoryPreview` the component prop `StoryDetailItemFooter` that will replace the `Footer` shipped by default.\n\n**Example Footer:**\n\n```javascript\nimport React from 'react';\nimport { Text } from 'react-native';\n\nexport const StoryFooter = ({\n  mute,\n  muted,\n  story,\n  goBack,\n  duration,\n  progress,\n}) =\u003e \u003cText\u003eI am the footer\u003c/Text\u003e;\n\nStoryFooter.displayName = 'StoryFooter';\n```\n\n## TODOs\n\nWith this library we're intended to have you covered when trying to implement stories into a React Native app.\n\nAs part of our efforts we've a very stable code by now, but we need to improve much things in order to reach a stable release.\n\nHere is a list of things we need to do:\n\n- [ ] Re-define story attributes to support passing more information.\n- [ ] Improve grow animation to behave like Insta one.\n- [ ] Add support for loading effect in Previews like Insta.\n- [ ] Add support for rendering multiple same user stories.\n- [ ] Add support for rendering initial preview with a CTA.\n- [ ] Ship with a default Header and Footer in the story that looks like Instagram ones.\n\n## Issues\n\nPlease, open an [issue](https://github.com/BlackBoxVision/react-native-live-stories/issues) following one of the issues templates. We will do our best to fix them.\n\n## Contributing\n\nIf you want to contribute to this project see [contributing](https://github.com/BlackBoxVision/react-native-live-stories/blob/master/CONTRIBUTING.md) for more information.\n\n## License\n\nDistributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/react-native-live-stories/blob/master/LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-native-live-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblackboxvision%2Freact-native-live-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblackboxvision%2Freact-native-live-stories/lists"}