{"id":21084893,"url":"https://github.com/yuvraj24/react-native-stories-view","last_synced_at":"2025-04-12T18:50:52.486Z","repository":{"id":40804936,"uuid":"254182683","full_name":"yuvraj24/react-native-stories-view","owner":"yuvraj24","description":"A simple and fully customizable React Native component that implements a status/stories feature similar to Whatsapp \u0026 Instagram ⭐✨🌟","archived":false,"fork":false,"pushed_at":"2023-03-31T08:07:07.000Z","size":438784,"stargazers_count":402,"open_issues_count":15,"forks_count":59,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-04-25T03:29:12.951Z","etag":null,"topics":["android","component","component-library","create-react-app","cross-platform","ios","javascript","js","native","props","react","react-dom","react-hooks","react-native","render","types","typescript","useeffect","usereducer","usestate"],"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/yuvraj24.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-04-08T19:34:50.000Z","updated_at":"2024-06-19T05:27:37.577Z","dependencies_parsed_at":"2024-06-19T05:37:40.930Z","dependency_job_id":null,"html_url":"https://github.com/yuvraj24/react-native-stories-view","commit_stats":{"total_commits":69,"total_committers":6,"mean_commits":11.5,"dds":0.6666666666666667,"last_synced_commit":"cfae880e53fa7ce9e447572233dfe4de7737178e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvraj24%2Freact-native-stories-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvraj24%2Freact-native-stories-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvraj24%2Freact-native-stories-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuvraj24%2Freact-native-stories-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuvraj24","download_url":"https://codeload.github.com/yuvraj24/react-native-stories-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618222,"owners_count":21134199,"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":["android","component","component-library","create-react-app","cross-platform","ios","javascript","js","native","props","react","react-dom","react-hooks","react-native","render","types","typescript","useeffect","usereducer","usestate"],"created_at":"2024-11-19T20:27:53.939Z","updated_at":"2025-04-12T18:50:52.466Z","avatar_url":"https://github.com/yuvraj24.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Stories View ⚡\n\n[![npm version](https://badge.fury.io/js/react-native-stories-view.svg?style=flat)](https://www.npmjs.com/package/react-native-stories-view) \n![Platform - Android and IOS](https://img.shields.io/badge/platform-Android%20%7C%20IOS-green.svg) \n\n![](assets/storybg.jpeg)\n\u003cbr\u003e\n\nA simple and fully customizable React Native components that provides a status/stories feature like Whatsapp, Instagram. For navigation across all the stories you can touch the left or right portion of the screen similar to what we see on Whatsapp or Instagram. The library works seemleslly across both Android as well as IOS platform developed with ❤️ in \u003cb\u003eTypescript \u0026 React\u003c/b\u003e 🔥.\n\n#### Feature's include :\n\n* Progress bar with custom duration \u0026 styling options.\n* Story Image view with custom styling options.\n* A fully customizable Header View, you can use default one or pass in your choice of component.\n* A fully customizable Footer View, you can use default one or pass in your choice of component.\n\u003cbr\u003e \n\n## Spread Your ❤️:\n[![GitHub followers](https://img.shields.io/github/followers/yuvraj24.svg?style=social\u0026label=Follow)](https://github.com/yuvraj24)  [![Twitter Follow](https://img.shields.io/twitter/follow/yuvrajpy.svg?style=social)](https://twitter.com/yuvrajpy)\n\u003cbr\u003e\n\n## Demo\n\n|IOS                       |  Android                 |\n-------------------------|--------------------------|\n|\u003cimg src='https://github.com/yuvraj24/react-native-stories-view/blob/master/assets/reactStory.gif' height=900 width=800 /\u003e    | \u003cimg src='https://github.com/yuvraj24/react-native-stories-view/blob/master/assets/androidStory.gif' height=900 width=800 /\u003e  |\n\u003cbr\u003e\n\n## Screenshots\n\n|Example One                |  Example Two              | Example Three               |  Example Four       | Example Five   |\n|-------------------------|-------------------------|-------------------------|-------------------------|-------------------|\n|![](assets/photo1.png) | ![](assets/photo2.png) | ![](assets/photo4.png) | ![](assets/photo3.png) |![](assets/photo5.png) |\n\u003cbr\u003e\n\n## Installation\n\nIf using yarn:\n\n```\nyarn add react-native-stories-view\n```\n\nIf using npm:\n\n```\nnpm i react-native-stories-view\n```\n\u003cbr\u003e\n\n## Usage\n\nFor example code, \u003ca href='https://github.com/yuvraj24/react-native-stories-view/tree/master/example'\u003e\u003cb\u003eClick here\u003c/b\u003e\u003c/a\u003e\n\n* ### ProgressBar\n\nThis individual component can be used to display progressive bar with controlled duration, style \u0026 motion. To programatically enable or disable the progress pass boolean value to `enableProgress` \u0026 to change the position of progress use `progressIndex` prop along with `duration` prop to control the motion. On every change of propress position `onChange` function will be invoked for any customization.\n\n```js\n\u003cProgressBar\n   images={['','']}\n   onChange={() =\u003e {}}\n   progressIndex={0}\n   enableProgress={true}\n   duration={20} \n   barStyle={{\n      barActiveColor: BAR_ACTIVE_COLOR,\n      barInActiveColor: BAR_INACTIVE_COLOR,\n      barWidth: 100, \n      barHeight: 4\n   }}\n/\u003e\n```\n\n* ### StoryContainer\n\nThis component provides you with entire functionality of Status/Stories feature along with flexible customization.\n\n#### Basic Usage\n\nThis simply display's only the Progress Bar \u0026 the Story view images without any header or footer view. The container can be given style by providing `containerStyle` props.\n\n```js\nimport { StoryContainer } from 'react-native-stories-view';\n\n\u003cStoryContainer\n   visible={true}\n   enableProgress={true}\n   images={images}\n   duration={20}  \n   onComplete={() =\u003e alert(\"onComplete\")}\n   containerStyle={{\n       width: '100%',\n       height: '100%',\n   }}\n/\u003e\n```\n\n#### Header View\n\nYou can use the inbuilt header view which can display basic user details by simply providing `userProfile` props with specified parameters.\n\n```js\n// User Information in header\n\u003cStoryContainer\n   visible={true}\n   enableProgress={true}\n   images={images}\n   duration={20} \n   onComplete={() =\u003e alert(\"onComplete\")}\n   userProfile={{\n      userImage: PROFILE,\n      userName: 'Yuvraj Pandey',\n      userMessage: 'Work hard \u0026 success will follow !!',\n      imageArrow: BACK,\n      onImageClick: () =\u003e {\n         console.log('lskndclksnc');\n         Alert.alert('User profile image tapped');\n      },\n   }}\n/\u003e\n```\n\nHowever if you wish to add your own custom component, you can pass your own component in `headerComponent` prop and this will replace the header described above.\n\n```js\n\u003cStoryContainer\n   visible={true}\n   enableProgress={true}\n   images={images}\n   onComplete={() =\u003e alert(\"onComplete\")}\n   duration={20} \n   headerComponent={\u003cView /\u003e}\n/\u003e\n```\n\nIn case neither of the prop i.e `userProfile` or `headerComponent` is passed then header view will be not be displayed.\n\n#### Footer View\n\nThe in built footer view provides you with a reply option where in you can accept user input for the status user just viewed.\n`isShowReply` boolean prop can be used to programaically show or hide the footer reply view. The `onReplyTextChange` \u0026 `onReplyButtonClick` function provides callback for the action performed by the user along with the `progressIndex` of the particular story currently viewed.\n\n```js\n// Reply option in Footer\n\u003cStoryContainer\n   visible={true}\n   enableProgress={true}\n   images={images}\n   duration={20} \n   onComplete={() =\u003e alert(\"onComplete\")}\n   replyView={{\n      isShowReply: true,\n      onReplyTextChange: (textReply, progressIndex) =\u003e {\n          console.log(`Text : ${textReply} , position : ${progressIndex}`);\n      },\n      onReplyButtonClick: (buttonType, progressIndex) =\u003e {\n         switch (buttonType) {\n            case 'send':\n               console.log(`Send button tapped for position : ${progressIndex}`);\n               break;\n\n             case 'smiley':\n               console.log(`Smiley button tapped for position : ${progressIndex}`);\n               break;\n          }\n       },\n   }}\n/\u003e\n```\n\nIf you have your own custom component to use in Footer, simply pass your component in `footerComponent` prop as below which will replace the inbuilt Footer with your own custom style. \n\n```js\n// Custom Footer component option\n\u003cStoryContainer\n   visible={true}\n   enableProgress={true}\n   images={images}\n   duration={20} \n   onComplete={() =\u003e alert(\"onComplete\")}\n   footerComponent={\u003cView /\u003e}\n/\u003e\n```\n\nHowever if neither of the prop i.e `replyView` or `footerComponent` is passed then footer view will be not be displayed.\n\u003cbr\u003e \n\n## Documentation :\n\n### ProgressBar\n\n| **PropName**           | **PropType**     | **Purpose**                                      |  **Required**  |\n| :--------------------- | :--------------: | :---------------------------------------------   | :------------: |\n| images                 |  `Array\u003cString\u003e` | Story images array to render count of bar        |  Mandatory     |\n| progressIndex          |    `number`      | Starts progress for a particular index item      |  Mandatory     |\n| enableProgress         |    `Boolean`     | Start/Stop the progress bar motion               |  Optional      | \n| duration               |    `Number`      | Control's the speed of progress bar              |  Optional      |\n| barStyle               |    `Object`      | Progress Bar style                               |   Optional     | \n| barActiveColor         |    `String`      | Active progress color                            |   Optional     | \n| barInActiveColor       |    `String`      | In Active progress color                         |   Optional     | \n| barWidth               |    `number`      | Default 100, Always \u003e 10 but \u003c 100               |   Optional     | \n| barHeight              |    `number`      | Default 7, Always \u003e 4 but \u003c 10                   |   Optional     | \n| onChange               |    `Function`    | Function executes after change in progressIndex  |    Optional    | \n\n### Basic\n\n| **PropName**           | **PropType**     | **Purpose**                                      |  **Required**  |\n| :--------------------- | :--------------: | :---------------------------------------------   | :------------: |\n| visible                |    `Boolean`     | Toggle visibility of Story Container             |  Mandatory     |\n| enableProgress         |    `Boolean`     | Enable/disable the top progress bar visibility   |  Optional      |\n| images                 |  `Array\u003cString\u003e` | Story Images                                     |  Mandatory     |\n| duration               |    `Number`      | Control's the speed of progress bar              |  Optional      |\n| containerStyle         |    `Object`      | Container style                                  |   Optional     | \n| onComplete             |    `Function`    | Function executes after all status is completed  |    Optional    | \n\n### Header\n\n| **PropName**           | **PropType**     | **Purpose**                                      |  **Required**  |\n| :--------------------- | :--------------: | :---------------------------------------------   | :------------: |\n| userProfile            |    `Object`      | Default user detail view                         |    Optional    |\n| userImage              |    `String`      | Image URL                                        |    Optional    |\n| userName               |    `String`      | Display's user name                              |    Optional    |\n| userMessage            |    `String`      | Display's user information                       |    Optional    |\n| imageArrow             |    `String`      | Image Url                                        |    Optional    | \n| onImageClick           |    `Function`    | Function that executes imageArrow click event    |    Optional    | \n| headerComponent        |    `Component`   | Custom component                                 |    Optional    | \n\n### Footer\n\n| **PropName**           | **PropType**     | **Purpose**                                      |  **Required**  |\n| :--------------------- | :--------------: | :---------------------------------------------   | :------------: |\n| replyView              |    `Object`      | Default reply view with Input text               |    Optional    |\n| isShowReply            |    `Object`      | Toggle's the display of footer view              |    Mandatory   |\n| onReplyTextChange      |    `String`      | Callback for user entered text with posotion     |    Optional    |\n| onReplyButtonClick     |    `String`      | Callback for emoji \u0026 send click with posotion    |    Optional    | \n| footerComponent        |    `Component`   | Custom component                                 |    Optional    | \n\u003cbr\u003e \n\n## About Me\n\n## Yuvraj Pandey\n*I am a passionate Engineer which likes to push himself on various fronts of technologies.*  \n\nFor more exciting updates follow me,\n\n\u003ca href=\"https://twitter.com/yuvrajpy\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/yuvraj24/LiveSmashBar/blob/master/images/twitter.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"https://www.linkedin.com/in/yuvrajpy\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/yuvraj24/LiveSmashBar/blob/master/images/linkedin.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"https://github.com/yuvraj24\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/yuvraj24/LiveSmashBar/blob/master/images/github.png\" height=\"40\"\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"https://yuvrajpy.medium.com/\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/yuvraj24/LiveSmashBar/blob/master/images/medium.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"https://play.google.com/store/apps/developer?id=Yuvraj+Pandey\"\u003e\u003cimg src=\"https://github.com/yuvraj24/LiveSmashBar/blob/master/images/playstore.png\" width=\"40\" height=\"40\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuvraj24%2Freact-native-stories-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuvraj24%2Freact-native-stories-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuvraj24%2Freact-native-stories-view/lists"}