expo-insta-story v1.2.1

expo-insta-story

This library is an extension of react-native-insta-story. It includes showing images and videos on the insta-stories component using expo-av which is currently not supported by react-native-insta-story

Install

1. Step

npm install expo-insta-story --save

or

yarn add expo-insta-story

2. Step

Import

import ExpoInstaStory from 'expo-insta-story';

Props

Usage

Basic

import ExpoInstaStory from 'expo-insta-story';

const data = [
  {
    id: 1,
    avatar_image:
      'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
    user_name: 'Muhammad Bilal',
    stories: [
      {
        story_id: 1,
        story:
          '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'),
        duration: 10, //This tells the duration of each screen
      },
      {
        story_id: 2,
        story:
          'https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg',
        duration: 10,
      },
    ],
  },
  {
    id: 2,
    avatar_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:
          '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'),
        duration: 10,
      },
      {
        story_id: 2,
        story: 'https://demo-link/123-123-123.mp4',
        swipeText: 'Custom swipe text for this story',
        onPress: () => console.log('story 2 swiped'),
        duration: 10, // The duration of the video in seconds. Specifies how long the video will be displayed.=
        isVideo: true, // This field indicates that the item is a video. When passing a video URL, make sure to include this field.
      },
    ],
  },
];

<ExpoInstaStory data={data} duration={10} />;

Custom components

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();
  }
};

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