Looping Through User Stories

[Adil7767]

Current Behavior:

The modal moves to the next user's stories when the current story ends. If there are no more stories, the modal hides.

Expected Behavior:

When the last story of the current user ends, it should start replaying stories from the first index of the same user.

Steps to Reproduce:

Open the stories modal. Navigate to the last story of the current user. Observe the behavior when the last story ends

Possible Solution:

Implement a check to detect when the current story is the last one. If it is the last story, reset the story index to 0 and replay the stories from the beginning. or add a prop like looping={true/false} default false if provide true then give expected behavior

[LukasFridmansky]

Hey, thank you for you idea. I will implement as soon as possible

[Adil7767]

can we create this effect for now any suggestion

i have try to do in this this way

const setStories = () => instagramStoriesRef.current?.setStories( userStoriesData );
  const getLastStory = (userId, story_id) => {
    console.log('object')
    const isLast = data[data.length - 1]._id===story_id;
   isLast && (setStories(),console.log('call'))
  }

<InstagramStories
        ref={instagramStoriesRef}
        isVisible={isVisible}
        stories={userStoriesData}
        // mediaContainerStyle={{height}}
        imageStyles={{resizeMode: 'contain', height, aspectRatio: 1.5}}
        imageProps={{height, minHeight: height}}
        videoProps={{height, minHeight: height}}
        progressContainerStyle={{marginTop: 40}}
        headerContainerStyle={{
          marginTop: 40,
          shadowColor: '#000',
          shadowOffset: {width: 0, height: 2},
          shadowOpacity: 0.40,
          shadowRadius: 2,
          elevation: 5,
        }}
        avatarBorderColors={[
          '#FBAA47',
          '#D91A46',
          '#D91A46',
          '#A60F93',
          '#A60F93',
        ]}
        avatarSeenBorderColors={[
          '#F7B801',
          '#F18701',
          '#F35B04',
          '#F5301E',
          '#C81D4E',
          '#8F1D4E',
        ]}
        closeIconColor={'white'}
        avatarListContainerStyle={[styles.hollowCircle]}
        avatarSize={73}
        animationDuration={7000}
        hideElementsOnLongPress={true}
        progressColor={'gray'}
        textStyle={{color: 'white'}}
        hideAvatarList={hideDisplay}
        avatarListContainerProps={{scrollEnabled: false}}
        storyImageStyle={{height: '100%', width: '100%', objectFit: 'cover'}}
        onStoryStart={(userId, story_id) => onSeenStory(userId, story_id)}
        onHide={() => getStories()}
        onStoryEnd={(userId, story_id) => getLastStory(userId, story_id)}
      />

but nothing achieve desire able

[LukasFridmansky]

Am I understand it correctly? You want have looping only for last user? So when last story of last user ends you want show first story of current user, not first user, right?

[Adil7767]

yes i want if a single user then start looping of stories