[HELP] Unable to get the images to show in the story

[AlexMathew]

Hello!

I'm experimenting with this package, and I was stuck with trying to get the images of the stories to show. I'm not sure if I'm doing something wrong here, so I would appreciate some help!

Version: 1.3.5

This is how I'm using the component -

const stories = [
  {
    id: '1',
    name: 'Your Daily Sales',
    avatarSource: {
      uri: 'https://static1.srcdn.com/wordpress/wp-content/uploads/2020/08/parks-and-rec-chris-pratt-gif.jpg',
    },
    stories: [
      {
        id: 's1',
        source: {
          uri: 'https://i0.wp.com/dictionaryblog.cambridge.org/wp-content/uploads/2023/05/shocked.jpg',
        },
      },
      {
        id: 's2',
        source: {
          uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        },
      },
      {
        id: 's3',
        source: {
          uri: 'https://static1.srcdn.com/wordpress/wp-content/uploads/2020/08/parks-and-rec-chris-pratt-gif.jpg',
        },
        sourceUrl:
          'https://static1.srcdn.com/wordpress/wp-content/uploads/2020/08/parks-and-rec-chris-pratt-gif.jpg',
      },
    ],
  },
];

...
...
...
      <InstagramStories
        style={[
          styles.tableTitle,
          baseStyles.fs16Inter500TextTitle,
          baseStyles.marginTop16,
        ]}
        ref={ref}
        stories={stories}
        showName={true}
        nameTextStyle={{fontSize: 12, textAlign: 'center'}}
        storyAvatarSize={45}
        avatarBorderColors={[lightPrimary, primary]}
        backgroundColor={primary}
      />
...

This is what is happening when I run it on an iPhone 15 simulator. https://www.loom.com/share/7eeedfd79ca844b1a123b5aba0b0d5ec?sid=4e89a151-afa9-4358-bc45-8c8a6984dce9

Maybe I'm using it wrong somehow in the component? I'd appreciate any help I can get here! Thanks!

cc: @LukasFridmansky

[AlexMathew]

I had to do a little bit to atleast get the images to show.

• I had to switch to only png in the stories
• I had to create a dummy entry as the first entry. I don't know what happened there, but the stories weren't loading without it.

I've made no further change in how I'm using the component, just the data being passed in the prop. So this is what the stories list looks like now -

  const stories = [
    {
      id: 'dummy',
      name: '',
      imgUrl: '',
      stories: [
        {
          id: 'story1',
          source: {
            uri: 'https://s3professions202858-dev.s3.amazonaws.com/assets/story.png',
          },
        },
      ],
    },
    {
      id: 'user1',
      name: 'User 1',
      imgUrl:
        'https://s3professions202858-dev.s3.amazonaws.com/assets/avatar.png',
      stories: [
        {
          id: 'story2',
          source: {
            uri: 'https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_640.png',
          },
        },
        {
          id: 'story1',
          source: {
            uri: 'https://s3professions202858-dev.s3.amazonaws.com/assets/story.png',
          },
        },
      ],
    },
    {
      id: 'user2',
      name: 'User 2',
      avatarSource: {
        uri: 'https://static1.srcdn.com/wordpress/wp-content/uploads/2020/08/parks-and-rec-chris-pratt-gif.jpg',
      },
      stories: [
        {
          id: 'storyx1',
          source: {
            uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/640px-PNG_transparency_demonstration_1.png',
          },
        },
      ],
    },
  ];

But now, this is what I see in the stories, when I open them.

https://www.loom.com/share/63ee9c609c4944c1867c0b5d3e9417da?sid=c3ed79c3-1a96-4d6c-a0d5-7592b8064dcf

[LukasFridmansky]

Try to not use same ids in stories. Maybe that is the issue, not sure

[AlexMathew]

Try to not use same ids in stories. Maybe that is the issue, not sure

@LukasFridmansky I tried that and it's still the same behaviour, sorry!

Also, I'm not sure why, but I had to create a "dummy" user as the first element in the list to make anything even show up.