I am using this lib for showing story, but it is lagging when swiping forward and backward.
Basically the cube is circling multiple times when i swipe fast.

It's normal for it to work this way. Instagram uses it in the same way, we tried to emulate it. You cannot go back to before the story you clicked on, it is now your start story.

But in instagram you can go back to before story you clicked on it. Can you please try to add this in upcoming commit of yours, it will be very helpful. Thanks for the library and all the efforts you have put to make this good one.

Originally posted by @luckychdhr in #10 (comment)

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-insta-story/src/StoryCircleListItem.tsx b/node_modules/react-native-insta-story/src/StoryCircleListItem.tsx
index c80e6d8..6bd1f6f 100644
--- a/node_modules/react-native-insta-story/src/StoryCircleListItem.tsx
+++ b/node_modules/react-native-insta-story/src/StoryCircleListItem.tsx
@@ -10,6 +10,7 @@ import {
 
 import { usePrevious } from './helpers/StateHelpers';
 import { IUserStory, StoryCircleListItemProps } from './interfaces';
+import Sizing from '../../../src/common/Sizing';
 
 import DEFAULT_AVATAR from './assets/images/no_avatar.png';
 
@@ -27,19 +28,23 @@ const StoryCircleListItem = ({
   avatarWrapperStyle,
 }: StoryCircleListItemProps) => {
   const [isPressed, setIsPressed] = useState(item?.seen);
+  const [isVerifiedUser, setIsVerifiedUser] = useState(false);
 
   const prevSeen = usePrevious(item?.seen);
+  console.log({item});
 
   useEffect(() => {
-    if (prevSeen != item?.seen) {
+    if (prevSeen !== item?.seen) {
       setIsPressed(item?.seen);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [item?.seen]);
+  }, [item?.seen, prevSeen]);
+
+  useEffect(() => {
+    setIsVerifiedUser(item?.isVerified || false);
+  }, [item?.isVerified]);
 
   const _handleItemPress = (item: IUserStory) => {
     if (handleStoryItemPress) handleStoryItemPress(item);
-
     setIsPressed(true);
   };
 
@@ -47,6 +52,21 @@ const StoryCircleListItem = ({
 
   return (
     <View style={styles.container}>
+      {isVerifiedUser && (
+        <Image
+          source={require('../../../src/images/verified.png')}
+          style={{
+            width: Sizing.deviceWidth * 0.08,
+            height: Sizing.deviceHeight * 0.025,
+            borderRadius: 100,
+            position: 'absolute',
+            bottom: Sizing.deviceHeight * 0.065,
+            left: Sizing.deviceWidth * 0.093,
+            zIndex: 999,
+            resizeMode: 'contain',
+          }}
+        />
+      )}
       <TouchableOpacity
         onPress={() => _handleItemPress(item)}
         style={[
@@ -124,3 +144,4 @@ const styles = StyleSheet.create({
     fontSize: 11,
   },
 });
+

This issue body was partially generated by patch-package.

I have to do like when in open keyboard in renderSwipeUpComponent I want to pause story

thanks for a package that is easy to use and customizable please also add video support in the stories view.

I need to put add video

there is no method to pause , play the story and also I want to show the list of users who have watched the story, but eventually i am not able to open modal inside the story.

I update version react native to 0.67. I have a issue when run android.

error: package com.reactlibrary does not exist import com.reactlibrary.InstaStoryPackage;

Info:
"react": "17.0.2",
"react-native": "0.67.4"

,

• Add possibility to show video in story
• Add possibility to render custom component

Is there any option for story deletion?

if i clicked on second story , i can only see second and third and soon ... stories not the first one using swipe left.

The resizeMode property cannot be used in the storyImageStyle, and the provided image source cannot be resized according to the screen. This issue may occur when the image does not match the screen dimensions.

Stories are laggish in case of large data as all the stories animation running in background when viewing single story. Also when we pause using longPress

Issue

Swiping certain distances (gestureState.dx) can change the current page state but does not scroll the current screen and renders the current screen as frozen, perhaps because the internal functions are calling state on another story?

Firstly I would like to congrats you for this awesome work! ellerinize sağlık.

warning messages :

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: %s, AndroidCubeEffect
at node_modules\react-native\Libraries\LogBox\LogBox.js:117:10 in registerWarning
at node_modules\react-native\Libraries\LogBox\LogBox.js:63:8 in warnImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:36:4 in console.warn
at node_modules\expo\build\environment\react-native-logs.fx.js:18:4 in warn
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:106:4 in printWarning
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:60:16 in warn
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5864:10 in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19093:6 in flushRenderPhaseStrictModeWarningsInDEV
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18335:41 in commitRootImpl
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18317:17 in commitRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17697:12 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17718:28 in batchedUpdates$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:2767:27 in receiveTouches
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue

I am experiencing lag when scrolling through Instagram stories. The screen often stutters or freezes, affecting the smoothness of the navigation. This issue occurs consistently while stories in home screen, leading to a disrupted user experience. Could you please help address this performance problem?

I just want to open the modal without displaying the story circle lists, are there any props predefined to open the modal directly?

Hello, I am trying to use it with React.Native 0.61.5, but LogBox is not implemented so I get an error.
What version can I download in order to be able to use it?
Thank you in advance.

Text below avatar is looking bad I want it to white

i want to add a custom highlight button. How can i add that ?.

I tried to add it on renderCloseComponent but when click on that highlight button it closes the screen

Cool serial, having the option to have stories from just one user and it will open automatically.

i want to add a viewer list in this component

it shows in ReactNative version :0.65.0

import type {IUserStory} from "./interfaces/IUserStory";
import type {IUserStoryItem} from "./interfaces/IUserStory";

I am unable to use the above line under .js file

Hi, I would like to save data about viewed stories after unloading the application, is there such a possibility?

I believe that a way that we could determine if the data has been seen. I believe most of people will be using this with apis

The loading part of the Cube-navigation is getting slower when we have lots of stories. what is the best way to solve this issue?

I Tried to use but there is erros showing on the console.

Activity Indicator goes above the level of service indicators

Hi. Thank you for that great package. It would be great if we could able to change DEFAULT_AVATAR with a prop.

Hello,

As this appears to be an open source project, the missing license info makes it basically not possible to use by others, as stated here https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/licensing-a-repository

However, without a license, the default copyright laws apply, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If you're creating an open source project, we strongly encourage you to include an open source license.

Could you please clarify this issue? And if it's intended for OSS, then could you kindly include the relevant file or update package.json with the "license" entry?

All the best and thank you for you great work!

I want to add "Your story" button to add story by user like instagram which is placed at first position in instagram story view.
How to achieve this?

• What went wrong:
  A problem occurred evaluating project ':react-native-insta-story'.

Plugin with id 'maven' not found

"react-native": "0.67.2",
"react-native-insta-story": "^1.1.7",

I'm trying to use data from firebase, but I'm constantly having problems, the last error I'm stuck on is
'TypeError: undefined is not a function (near '...selectedData.map...')' fetch data using hook useEffect

I tried changing data source to api data response but it doesn't work.
Anyone else faced the same problem?