gap is not working on avatarListContainerStyle and seeking help in more customization

[umangloria]

I tried to set gap:10 on avatarListContainerStyle but it is not working. basically I am trying to put some space between avatars.
I am getting error from Flashlist saying only padding related and bg color related styles supported in contentContainerStyle.

Also, We are trying to have own UI for the stories.

• We don't want to display a full screen image, we want to render a card with multiple information in the center something like this: https://lh6.googleusercontent.com/IgAqUv7IIuM8h5pJjyQjmdSq2e14uqYLhEx8MupsY-r-O4SFS60jOV5hKBUPY21hGZ4GphypspAowUQnnlq9L6WO2cKztUpeEc7STJ-g6kmH2X3wKXK3H7w77hoAdijcp72GWlvF
• I tried putting code inside renderContent method but it seems like it is still loading the image in the background. so how to avoid that ?
• we also don't want to display user avatar image on the story card so I am guessing that we will need to put userName and cancel Icon inside the renderContent
• We want to provide share button on the card and when user is interacting with the share button we want to pause the timer. so for this resume and pause methods should just work fine I guess ?

[michaelsribeiro]

Here works with gap:

<InstagramStories
ref={ref}
stories={stories}
showName={true}
avatarListContainerStyle={{ gap: 15, paddingHorizontal: 10 }}
nameTextStyle={{color: '#fff', textTransform: 'lowercase', marginTop: 5, textAlign: 'center'}}
nameTextProps={{numberOfLines: 1}}
/>