Hot to set showsVerticalScrollIndicator={false} to the avatarListContainerStyle + how to set equal space between avatars + how to close modal when swiping up on a story

[mihaipaval]

Hello, I am having some issues related to the following if anybody can help please:

-Is it possible to set showsVerticalScrollIndicator={false} to the Avatar list since I don't want to see the scrollbar to the avatar list.

-How to set equal spaces between Avatars, avatarListContainerStyle={{ justifyContent: 'space-between' }} doesn't work since it treats the avatarList as an entire object.

-Is there a way to close the modal when swiping up on a story?

Thank you for the support!

This is my code:

<InstagramStories
                        stories={stories}
                        saveProgress={true}
                        avatarBorderColors={['#2158FF']}
                        avatarSize={70}
                        storyAvatarSize={35}
                        avatarListContainerStyle={{ justifyContent: 'space-between' }}
                        textStyle={{ color: '#FFF', fontSize: 15 }}
                        animationDuration={3000}
                        storyAnimationDuration={200}
                        videoAnimationMaxDuration
                        backgroundColor={'black'}
                        nameTextStyle={{ color: '#01062D', fontSize: 13, marginHorizontal: 5, fontFamily: 'Outfit-Regular' }}
                        closeIconColor={'#FFF'}
                        showName={true}
                        modalAnimationDuration={150}
                        onSwipeUp={(userId, storyId ) => {
                            // console.log('Swiped up on story:', userId, storyId);
                            navigation.navigate('StepsScreen', { storyId: storyId, userId: userId, storySwipe: true });
                            refreshingFeed();
                        }}
                    />

[LukasFridmansky]

Hello,

1. You can use avatarListContainerProps={{showsVerticalScrollIndicator: false}}
2. Can you try avatarListContainerStyle={{ justifyContent: 'space-between', width: '100% }} (if you have longer list than screen, you can use gap: your_value)?
3. No, you can close modal by swiping down. It is important for you to close modal by swipe up? Because modal is animated from bottom to top, so it is natural that it closes by swiping down, I think

[LukasFridmansky]

But, basically, if you create ref and in onSwipeUp callback call ref.current?.hide(), it should work fine for you.

const ref = useRef<InstagramStoriesPublicMethods>(null);
<InstagramStories {...your code} onSwipeUp={() => { ref.current?.hide() }} />

[LukasFridmansky]

Let me know, if you need any other help from me

[mihaipaval]

Hey @LukasFridmansky,

Thanks for your quick reply!

1. `avatarListContainerProps={{showsVerticalScrollIndicator: false}} isn't working. I am talking about this scroll bar :

2. avatarListContainerStyle={{ justifyContent: 'space-between', width: '100% }} disables scrolling

While this code sets the justification and width of the container, it also seems to be unintentionally disabling the scroll functionality within the avatarList.

For reference, this is the container element holding the story feature:

<View style={{ flex: 1, paddingTop: 50 }} >
            <View style={{ flexWrap: 'wrap', alignItems: 'center', flexDirection: 'row' }}>
                {/* Upload component */}
                <UploadComponent component={"story"}  />
                {/* Upload component */}
                {/* Stories component from react-native-insta-story*/}
                {isLoadingStories || stories === null ? <StoriesSkeletonAnimation /> : 
                    <InstagramStories
                        stories={stories}
                        saveProgress={true}
                        avatarBorderColors={['#2158FF']}
                        avatarSize={60}
                        storyAvatarSize={30}
                        avatarListContainerStyle={{ justifyContent: 'space-between' }}
                        textStyle={{ color: '#FFF', fontSize: 15 }}
                        animationDuration={3000}
                        storyAnimationDuration={200}
                        videoAnimationMaxDuration
                        backgroundColor={'black'}
                        nameTextStyle={{ color: '#01062D', fontSize: 13, marginHorizontal: 5, fontFamily: 'Outfit-Regular' }}
                        closeIconColor={'#FFF'}
                        showName={true}
                        modalAnimationDuration={150}
                        onSwipeUp={(userId, storyId ) => {
                            // console.log('Swiped up on story:', userId, storyId);
                            navigation.navigate('StepsScreen', { storyId: storyId, userId: userId, storySwipe: true });
                            refreshingFeed();
                        }}
                    />
                    }
                {/* Stories component from react-native-insta-story*/}
            </View>
            <View style={{ flexGrow: 1 }}>
                <View style={{ flexDirection: 'row', width: '100%' }}>
                    <View style={{ flex: 1 }}>
                        <SearchComponent />
                    </View>
                </View>
                <ImageFeed refreshingFeed={refreshingFeed}/>
            </View>
        </View>

3. Swipe Up Navigation and Modal Behavior

The swipe up gesture is intended to navigate to another screen. However, I'm encountering an issue where it's possible to return to the modal after swiping up. As a workaround, I've implemented a refresh of the stories list upon returning.

This clarifies the intended functionality and the current issue. It also mentions your implemented workaround.

[LukasFridmansky]

Oh, yeah that is horizontal scroll, so you should use showsHorizontalScrollIndicator

[LukasFridmansky]

2 - you can use gap: your_value to adjust space between, but in your case there are some spaces because of long name text, I will think about how to fix that

[mihaipaval]

Thank you!

For number 2, a possible solution could be implementing a variable to control the truncation of display names, similar to how Instagram handles them in stories. In the real app, display names are limited to around 17 characters.

[LukasFridmansky]

I am going to fix number 2. What action is needed from me for number 3? Following snippet doesn't work fine? https://github.com/birdwingo/react-native-instagram-stories/issues/85#issuecomment-2186540005

[mihaipaval]

I get "ReferenceError: Property 'InstagramStoriesPublicMethods' doesn't exist"

[LukasFridmansky]

Sorry, I have a mistake in code snippet:

import React, { useRef } from 'react';
import InstagramStories, { InstagramStoriesPublicMethods } from '@birdwingo/react-native-instagram-stories';

const Component = () => {

  const ref = useRef<InstagramStoriesPublicMethods>( null );

  return (
    <InstagramStories ref={ref} {...your code} onSwipeUp={() => {.ref.current?.hide() }} />
  )

}

Something like this. It works for me

[LukasFridmansky]

When new version will be release you can try to fix the text. Here is a guideline: Use nameTextStyle to set width for text (default is avatarSize + 10) Use nameTextProps={{numberOfLines: 1}}, it guarantees truncation for one line