it does not support video story

[mouhsnimohamed]

• Add possibility to show video in story
• Add possibility to render custom component

[jainminals]

https://user-images.githubusercontent.com/63096007/185597738-3b7abc4f-882d-48c1-84b0-946be0ce9c1e.mov

Just modify npm and pass some extra parameter will work for both image and video

[mouhsnimohamed]

Can you give an example? Thanks in advance.

[jainminals]

just do changes at this path file node_modules/react-native-insta-story/src/StoryListItem.js

{content[current].type === "Image" && ( <Image onLoadEnd={() => start()} source={{ uri: content[current].image }} style={styles.image} /> )}

      {content[current].type === "Video"  && (
        <Video
          source={{ uri: content[current].image  }}
          style={styles.image}
          //playInBackground={false}
          paused={ videoIndex === content[current].image  ? false : true}
          // hideControlsOnStart
          onLoad={() => start()}
          />
      )}

node_modules/react-native-insta-story/src/interfaces/IUserStory.ts export interface IUserStory { user_id: number, user_image: string, user_name: string, stories: IUserStoryItem[] }

export interface IUserStoryItem { story_id: number, story_image: string, onPress?: any, swipeText?: string, type?: string, }

pass the data ....

const data = [ { user_id: 1, user_image: "https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg", user_name: "Ahmet Çağlar Durmuş", stories: [ { story_id: 1, story_image: "https://image.freepik.com/free-vector/universe-mobile-wallpaper-with-planets_79603-600.jpg", swipeText: "Custom swipe text for this story", onPress: () => console.log("story 1 swiped"), type: "Image", }, { story_id: 2, story_image: "https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg", type: "Image", }, ], }, { user_id: 2, user_image: "https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80", user_name: "Test User", stories: [ { story_id: 1, story_image: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjORKvjcbMRGYPR3QIs3MofoWkD4wHzRd_eg&usqp=CAU", swipeText: "Custom swipe text for this story", onPress: () => console.log("story 1 swiped"), type: "Image", }, { story_id: 2, story_image: "https://feelmotifiles.s3.amazonaws.com/feelmoti%2FIMG_0019.MP4", swipeText: "Custom swipe text for this story", onPress: () => console.log("story 2 swiped"), type: "Video", }, { story_id: 3, story_image: "Minal jain", swipeText: "Minals custom text", onPress: () => console.log("story 2 swiped"), type: "Text", }, ], }, ];

[EkremBulut01]

I tride this solution but it did not worked. Can you Show this solution more briefly?

[jainminals]

i can send you nodemodules just repalce with your @EkremBulut01 react-native-insta-story.zip In this i did the delete story also. But with my own API call you can replace with your

[bilal1031]

@EkremBulut01 I created an npm package that you can use to have the video support. if you want to use that, it is created for expo-managed projects but it should work for react-native-cli too. Here's the link https://www.npmjs.com/package/expo-insta-story