React-native-video-insta-story NPM

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 (Shahid.chawdhary07@gmail.com)

Author Shahid Chawdhary

Install

1. Step

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

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 }}
/>;

react-native insta-story story instagram video-story card-feature facebook-story tiktok-story youtube-story card-story

prop-types react-native-modalbox react-native-swipe-gestures react-native-video

@everything-registry/sub-chunk-2597

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago