birdwingo / react-native-instagram-stories Goto Github PK

Is there anyway i can pass text along each stories ?, if not please add this feature where If user is adding stories with picture or video text along it should also be added. By text i mean description . Please reply to my comment.****

Hi, i really want to thank you for this lib. It's amazing and easy to use. <3

Is it possible to add to your roadmap a possibility to add a linear gradient to the top of StoryList component, juste behind the Progress, avatar and name.

I nedd this to ensure the visibility of these items when the story's images his very light and my colors are white or dark when colors are black.

I really need this.
Thanks!

When one user stories completes and it jump on to next story. Progress bar won't work properly also when we go back from user2 to user1 stories progress bar doesn't works it stucks.

@LukasFridmansky thanks for the fix early.

I think there are still issues with the progress bar, especially when using video and images together

• first of all the timer should be reset every time a story is changed which at the moment it doesn't happen
• secondly, I think the time of the video is not calculated properly as the first time it starts from the default 1000ms value

I really like the library but I think a bit more focus should put on how the progress bar work which I know is usually the most complicated thing to do. Keep the good work

First and foremost, I'd like to express my deep gratitude for creating this wonderful library. It has been an invaluable resource for my React Native application, and I'm truly impressed with its functionality.

I've been using this library to display stories, and it's been a fantastic addition to my project. However, I've encountered an issue that I hope to get some help or a solution for.

My issue is that when I delete an item in the user stories (delete an item in stories of user story works fine) and call toNextStory ( I tried to use toPreviousStory or scrollTo but not work), the animated header in the library gets paused.

Is there a way to address this issue or any guidance you can provide on optimizing the animated header when deleting an item in the stories?

If onPreviousStory is called on the first story (meaning that no previous story exists), progress animation will stop and not resume.

You can see the problem I described in the video below. Press events are not displayed tho.

In our app, we use "custom" avatars/cards to open the story modal using InstagramStoriesPublicMethods as a ref. The default avatar list is not visible since we didn't set the imgUrl property for any story.

However, even if it is not visible for the users, the ScrollView for the avatars is still rendered. Would it be possible to add a property to disable this completely? Or to only render the ScrollView if there's at least one story containing the imgUrl?

The related code is here:
https://github.com/birdwingo/react-native-instagram-stories/blob/main/src/components/InstagramStories/index.tsx#L210-L225

If no prop will be added, it can be automatically checked using something simple like this:

// Render the avatar list if at least one story has an image
const renderAvatarList: boolean = data.some(story => Boolean(story.imgUrl));

After the latest update I cannot slide stories from an user to another anymore, I think it happened after this merge here
When I try to slide it just skip to next/previous story or just pause animation and do nothing

Here is the demo:

It doesnt work on emulator and on real device

Hello! Thanks for this awesome package!

I was wondering if there is a way we can add a property to change the speed the overlay shows.

It is rather slow and I'd like to make it appear faster.

Thanks!

Hi, first of all, thanks for the awesome library :D

I noticed that onShow and onHide are triggered only when I open & close user (entire group of stories).

It would be cool to have a possibility to detect when a user moves to another/previous story (within user, or moves to another user), something like:

onStoryStart | ( userId?: string, storyId?: string ) => void
onStoryEnd | ( userId?: string, storyId?: string ) => void

Need change current story method for switching to previous or next story

Hey guys, before, thank you for such a cool library! I can't figure out what the problem is when trying to add styles. I'm trying to use
avatarListContainerProps={{
contentContainerStyle: {
paddingHorizontal: 20,
justifyContent: 'space-between'
}
}}
to add indents between icons, but it doesn't work for some reason. I also want to do text transposition
textStyle={{{
flexWrap: 'wrap',
textAlign: 'center',
}}
but I also don't see the result. Is it possible that I'm doing something wrong?

I have added your package successfully, but when click on first story then all stories are play. view one on screen but volume in multiple videos play.

Please let us know how to fix it.

-----closed

Hello, thanks for create this library is amazing!
I want to know if I could center a video that is not fullscreen.

Thanks again

Setting the prop avatarSize={72} doesn't make the image fill the content. Tested on IOS

https://github.com/birdwingo/react-native-instagram-stories/blame/a6b7571cf43a30866685ee0cbf2ee548acb8cab4/src/components/Avatar/index.tsx#L58

"@birdwingo/react-native-instagram-stories": "^1.0.7",
"react-native": " 0.72.6",
"react-native-svg": "^13.14.0",
"react-native-reanimated": "~3.5.4",
"react-native-gesture-handler": "^2.13.4",

Also, it is possibile to set a props to configure the style of the progress bar? (the background and fill color). I think it will be very useful in terms of customisation.

Please add onRequestClose function to close modal on Android using BackHandler.
https://reactnative.dev/docs/modal#onrequestclose

onRequestClose={onClose}

https://github.com/birdwingo/react-native-instagram-stories/blob/45dfed17d70137efc46b3b97d9ecfddd59390acb/src/components/Modal/index.tsx#L373C5-L373C85

Thanks

When i get data from my api and save it in to state. First user stories are working fine but when it goes to the next user stories it gives me this error

ERROR ReanimatedError: undefined is not an object (evaluating 'userStories[newStoryIndex + 1]'), js engine: reanimated

Hey guys! I'm addressing with the problem of not completely filling the screen with the image.
This problem has been touched on before and even posted fixes to solve this problem, as I understand it.
I have updated the library by downloading the fixes you made, but the result is the same. My image does not completely fill the screen and it looks like a handmade on the knee(
Here is an example of my display:

When story ended, I've this error.
I've ^1.1.0 version

Thanks

renderFooter is not working, As i want to show custom buttons , Can you provide me the example how can i work to show buttons?

const stories = [
    {
      id: 'user1',
      name: 'User 1',
      imgUrl: 'imageUrl.png',
      stories: [
        {
          id: 'story1',
          sourceUrl: 'imageUrl.png',
          renderContent: () => (
            <View style={tw`mt-[15%] p-3`}>
              <Text style={tw`font-bold text-white`}>This is custom content for User 1's first story</Text>
            </View>
          ),
          renderFooter: () => (
            <View style={{ backgroundColor: 'red', padding: 10, alignSelf: 'center' }}>
              <Button title="Like" onPress={handleLikePress} />
              <Button title="Share" onPress={handleSharePress} />
            </View>
          ),
        }
    
      ],
    }
  ];

Hi,
I have a story with 2 images and a footer for each of them. The footer (returned via renderFooter function) looks like this:

  <TouchableOpacity
    onPress={onPress}
    style={styles.touchable}
  >
    <Text>{'Link to google'}</Text>
  </TouchableOpacity>

The onPress function is:

const onPress = useCallback(
    async () => {
      modalRef.current.pause();
      modalRef.current.hide();
      await Linking.openURL('https://google.com');
    },
    [],
  );

So, the issue is - after pressing the footer, opening a URL (it can be an external URL or just a different screen of the same app) and going back to viewing the same story, the second image "gets stuck" and it won't switch to the first one when tapping the sides of the screen.

Here is the video:

From my experience, this issue only occurs when opening URL on the second image (I didn't encounter such behavior when opening URL on the first or third image). Version of the library in my case - 1.2.6.

Could you please look into it, if possible? I tried to figure out the cause of the issue by myself, no luck so far. I would highly appreciate any info on this matter.

To start I want to say this package is amazing! Easy to configure and works very good.

In our project we don't "categorize" the stories by user, but by event (for example, a football match that was played recently). Because of this, the titles are more descriptive and can be quite long. If that's the case, the close icon can be moved to far to the right and also the vertical alignment is not that good.

In our project, I fixed this creating the patch below (didn't test it very well with an avatar next to the title, since we don't have those). For other projects, that also have an avatar shown in the stories modal, it could be better to add a top position to the close icon related to the avatar size (instead of vertical align it to the center).

diff --git a/node_modules/@birdwingo/react-native-instagram-stories/src/components/Header/Header.styles.ts b/node_modules/@birdwingo/react-native-instagram-stories/src/components/Header/Header.styles.ts
index e2d44a4..e873cd0 100644
--- a/node_modules/@birdwingo/react-native-instagram-stories/src/components/Header/Header.styles.ts
+++ b/node_modules/@birdwingo/react-native-instagram-stories/src/components/Header/Header.styles.ts
@@ -5,11 +5,12 @@ export default StyleSheet.create( {
     position: 'absolute',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     left: 16,
     top: 32,
   },
   left: {
+    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     gap: 12,

A before and after are below:

It would be nice to have the possibility to add some additional data to stories, which can be shown in the stories modal. Like Instagram, having the time (for example, "3h ago") next to the username.

For now, I simply added the time to the story name, but this doesn't give us the possibility to add other styling to the additional data.

I have tried everything but it never takes full screen, theres always some area left at the top and bottom.

Dear Team,

I hope this message finds you well.

We have successfully integrated your package into our project. It is functioning seamlessly on Android; however, we are encountering an issue on iOS. Specifically, when we attempt to click on a user image, the stories do not open.

Could you kindly provide guidance on how to address this matter? Any assistance you can offer would be greatly appreciated.

Doesn't it include a function for swipe?

Is there a property, like 'progressIndex,' to indicate from which story I want to start? If I have already seen the first and second stories before, I want to start from the third and beyond.

I want to implement options feature in my project by which owner of the story can delete story pr do other action he wanted to do. But the issue is there is no such component in the props in the library which can do that for me and story should be pause till that time. I was going to contribute in your project for this feature but unfortunately that one is compiled code.

If you allow me to contribute for this feature so I would really appreciate me and so other people can get help from it if they intended to do something similar. I will do patch till then.

Hi, I am trying to have the modal launch immediately when the page is loaded. I have tried using ref.current?.show(), but this seems to only start the spinning border around the avatar without opening the modal.

Is there a simple way of using the InstagramStories to have the modal launch on page load?

Hi,
First of all thanks for this awesome library. But I need more control on it. For example renderAvatar, position of progress bar etc.

Hi folks, im having a bug when I pass onStoryStart to props and try to go back to previous story, I was using just to print some ids, but even with empty callback it keeps crashing. To next stories it works as expected, but when u hit to previous this crash happens: