react-native-video-insta-story

It's a customised user stories for react native with video and a card style view

I'm still working on it to make it more flexible and easy to use. you can write me your quries and questions at ([email protected])

Author Shahid Chawdhary

Install

1. Step

npm install react-native-video-insta-story --save

or

yarn add react-native-video-insta-story

2. Step

cd ios && pod install

Import

import InstaStory from 'react-native-video-insta-story';

Props

| Name | Description | Type | Default Value | | :------------------------- | :-------------------------------------------------- | :------------ | :-----------: | | data | Array of IUserStory. You can check from interfaces. | object | | | unPressedBorderColor | Unpressed border color of profile circle | color | red | | pressedBorderColor | Pressed border color of profile circle | color | grey | | unPressedAvatarTextColor | Unpressed avatar text color | color | red | | pressedAvatarTextColor | Pressed avatar text color | color | grey | | onStorySeen | Called each time story is seen | function | null | | onClose | Todo when close | function | null | | onStart | Todo when start | function | null | | duration | Per story duration seconds | number | 10 | | swipeText | Text of swipe component | string | Swipe Up | | renderSwipeUpComponent | Render a custom swipe up component | function | | | renderCloseComponent | Render a custom close button | function | | | renderTextComponent | Render custom avatar text component | function | | | avatarSize | Size of avatar circle | number | 60 | | showAvatarText | For show or hide avatar text. | bool | true | | avatarTextStyle | For avatar text style | TextStyle | | | avatarImageStyle | For avatar image style | ImageStyle | | | avatarWrapperStyle | For individual avatar wrapper style | ViewStyle | | | avatarFlatListProps | Horizontal avatar flat list props | FlatListProps | | | loadedAnimationBarStyle | For loaded animation bar style | ViewStyle | | | unloadedAnimationBarStyle | For unloaded animation bar style | ViewStyle | | | animationBarContainerStyle | For animation bar container style | ViewStyle | | | storyUserContainerStyle | For story item user container style | ViewStyle | | | storyImageStyle | For story image style | ImageStyle | | | storyAvatarImageStyle | For story avatar image style | ImageStyle | | | storyContainerStyle | For story container style | ViewStyle | | | horizontal={true} | for showing horizontal stories | boolean | | | horizontal={false} | for showing vertical stories | boolean | | | numColumns | for showing columns | number | |

Usage

First let's have a look at horizonatal user stories,(you can use horizontal or vertical stories)

Basic for horizonatal stories

import InstaStory from 'react-video-native-insta-story';

const storyData =[
  {
  "user_id": 1,
  "user_image":
  'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
  "user_name": 'sam',
  "views": "100k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"2k",
      "story_video":
        'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "2k",
      "story_views":"10k",
      "story_video":
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/f83vDyh/profile1.jpg',
  "user_name": 'Fab',
  "views": "2k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"2k",
      "story_image":
        'https://i.ibb.co/f83vDyh/profile1.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "100",
      "story_views":"3k",
      "story_image":
        'https://i.ibb.co/WFkJJ07/profile2.jpg',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/WFkJJ07/profile2.jpg',
  "user_name": 'Zee',
  "views": "10k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "3.5k",
      "story_views":"5k",
      "story_image":
        'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    }
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
  "user_name": 'John',
  "views": "10.5k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"10k",
      "story_image":
      'https://i.ibb.co/f83vDyh/profile1.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "2k",
      "story_views":"2k",
      "story_image":
      'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/7rx3xfJ/profile4.jpg',
  "user_name": 'Eliza',
  "views": "12k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "10k",
      "story_views":"12k",
      "story_image":
      'https://i.ibb.co/7rx3xfJ/profile4.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "18k",
      "story_views":"20k",
      "story_image":
        'https://i.ibb.co/0rMM0pX/profile5.jpg',
    },
  ],
}
]

 <InstaStory
          style={{marginLeft: 10}}
          horizontal={true}
          data={storyData}
          duration={10}
        />;

horizontal view

Basic for vertical 3 column stories

import InstaStory from 'react-video-native-insta-story';

const storyData =[
  {
  "user_id": 1,
  "user_image":
  'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
  "user_name": 'sam',
  "views": "100k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"2k",
      "story_video":
        'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "2k",
      "story_views":"10k",
      "story_video":
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/f83vDyh/profile1.jpg',
  "user_name": 'Fab',
  "views": "2k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"2k",
      "story_image":
        'https://i.ibb.co/f83vDyh/profile1.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "100",
      "story_views":"3k",
      "story_image":
        'https://i.ibb.co/WFkJJ07/profile2.jpg',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/WFkJJ07/profile2.jpg',
  "user_name": 'Zee',
  "views": "10k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "3.5k",
      "story_views":"5k",
      "story_image":
        'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    }
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
  "user_name": 'John',
  "views": "10.5k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "1k",
      "story_views":"10k",
      "story_image":
      'https://i.ibb.co/f83vDyh/profile1.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "2k",
      "story_views":"2k",
      "story_image":
      'https://i.ibb.co/pxQZ2Dj/profile3.jpg',
    },
  ],
},
{
  "user_id": 1,
  "user_image":
  'https://i.ibb.co/7rx3xfJ/profile4.jpg',
  "user_name": 'Eliza',
  "views": "12k",
  "stories": [
    {
      "story_id": 1,
      "story_likes": "10k",
      "story_views":"12k",
      "story_image":
      'https://i.ibb.co/7rx3xfJ/profile4.jpg',
      "swipeText": 'Custom swipe text for this story',
      "onPress": () => console.log('story 1 swiped'),
    },
    {
      "story_id": 2,
      "story_likes": "18k",
      "story_views":"20k",
      "story_image":
        'https://i.ibb.co/0rMM0pX/profile5.jpg',
    },
  ],
}
]

 <InstaStory
          style={{marginLeft: 10}}
          horizontal={false}
          numColumns={3}
          data={storyData}
          duration={10}
        />;

vertical 3 column view

The render component functions are all passed item as a prop which is the current IUserStoryItem being displayed.

renderSwipeUpComponent and renderCloseComponent are both passed the onPress prop which is a function that closes the current story item modal and calls the IUserStoryItem.onPress function. onPress is passed so you could add other buttons. This is useful when adding a button which has it's own onPress prop, eg. a share button, next to the close button.

renderTextComponent is passed the profileName of the current story's user.

const data = [...sameDataAsBasicExampleAbove];

const [seenStories, setSeenStories] = useState(new Set());

const updateSeenStories = ({ story: { story_id } }) => {
  setSeenStories((prevSet) => {
    prevSet.add(storyId);
    return prevSet;
  });
};

const handleSeenStories = async (item) => {
  console.log(item);
  const storyIds = [];
  seenStories.forEach((storyId) => {
    if (storyId) storyIds.push(storyId);
  });
  if (storyIds.length > 0) {
    await fetch('myApi', {
      method: 'POST',
      body: JSON.stringify({ storyIds }),
    });
    seenStories.clear();
  }
};

<InstaStory
  data={data}
  duration={10}
  onStart={(item) => console.log(item)}
  onClose={handleSeenStories}
  onStorySeen={updateSeenStories}
  renderCloseComponent={({ item, onPress }) => (
    <View style={{ flexDirection: 'row' }}>
      <Button onPress={shareStory}>Share</Button>
      <Button onPress={onPress}>X</Button>
    </View>
  )}
  renderTextComponent={({ item, profileName }) => (
    <View>
      <Text>{profileName}</Text>
      <Text>{item.customProps?.yourCustomProp}</Text>
    </View>
  )}
  style={{ marginTop: 30 }}
/>;