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

| 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 | default 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 | | | storyVideoStyle | For story video container style | ViewStyle | |

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