react-native-insta-story

Install

1. Step

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

or

yarn add react-native-insta-story

2. Step

cd ios && pod install

3. Step (optional – for video stories)

To show video in stories, install react-native-video in your app and link it (e.g. run pod install again). Story items with story_video set will then be rendered as video; others continue to use story_image.

npm install react-native-video --save

Peer dependencies

Package	Required	Description
react-native-video	No	Video stories: Install only if you use story_video. Without it, video items will not play.

# Only if you use video in stories (story_video)
npm install react-native-video --save
# or
yarn add react-native-video

Then run pod install in the ios folder.

Import

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

TypeScript types and interfaces (IUserStory, IUserStoryItem, etc.) are exported from the package.

Props

Name	Description	Type	Default Value
data	Array of user stories (IUserStory[]). See exported TypeScript interfaces.	IUserStory[]
unPressedBorderColor	Unpressed border color of profile circle	ColorValue	red
pressedBorderColor	Pressed border color of profile circle	ColorValue	grey
unPressedAvatarTextColor	Unpressed avatar text color	ColorValue	red
pressedAvatarTextColor	Pressed avatar text color	ColorValue	grey
onStorySeen	Called when a story is viewed (receives IUserSingleStory).	function	null
onClose	Called when modal is closed (receives the current user IUserStory).	function	null
onStart	Called when a story is opened (receives IUserStory).	function	null
duration	Per-story duration in seconds	number	10
swipeText	Text for the swipe-up hint	string	Swipe Up
renderSwipeUpComponent	Render a custom swipe-up component	function
renderCloseComponent	Render a custom close button	function
renderTextComponent	Render custom text next to the avatar on the story screen	function
avatarSize	Size of the avatar circle in the list	number	60
showAvatarText	Show or hide username below avatars	boolean	true
avatarTextStyle	Style for the username text below avatars	TextStyle
avatarImageStyle	Style for the avatar image in the list	ImageStyle
avatarWrapperStyle	Style for each avatar wrapper in the list	ViewStyle
avatarFlatListProps	Props for the avatar FlatList (data, renderItem, keyExtractor are omitted)	FlatListProps
loadedAnimationBarStyle	Style for the progress bar when loaded	ViewStyle
unloadedAnimationBarStyle	Style for the progress bar when not yet loaded	ViewStyle
animationBarContainerStyle	Style for the container of the progress bars	ViewStyle
storyUserContainerStyle	Style for the header (user + close button) on the story screen	ViewStyle
storyImageStyle	Style for the story image	ImageStyle
storyAvatarImageStyle	Style for the small avatar on the story screen	ImageStyle
storyContainerStyle	Style for the story content container	ViewStyle
style	Style for the root container (avatar list wrapper)	ViewStyle

Usage

Basic

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

const data = [
  {
    user_id: 1,
    user_image:
      'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
    user_name: 'User 1',
    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'),
      },
      {
        story_id: 2,
        story_image:
          'https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg',
        // Optional: set story_video to show a video instead of an image (requires react-native-video)
        // story_video: 'https://example.com/short-video.mp4',
      },
    ],
  },
  {
    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'),
      },
      {
        story_id: 2,
        story_image:
          'https://files.oyebesmartest.com/uploads/preview/vivo-u20-mobile-wallpaper-full-hd-(1)qm6qyz9v60.jpg',
        swipeText: 'Custom swipe text for this story',
        onPress: () => console.log('story 2 swiped'),
      },
    ],
  },
];

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

Custom components

The library exports TypeScript interfaces (IUserStory, IUserStoryItem, IUserSingleStory, etc.) for typing your data and render props.

• renderSwipeUpComponent and renderCloseComponent receive { item, onPress }: item is the current story item (IUserStoryItem), and onPress closes the modal and triggers IUserStoryItem.onPress if defined. Use onPress for your close (or other) buttons.
• renderTextComponent receives { item, profileName }: the current story item and the display name of the user.

const data = [...sameDataAsBasicExampleAbove];

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

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

const handleSeenStories = async (item) => {
  console.log('Closed story for user:', item);
  const storyIds = Array.from(seenStories);
  if (storyIds.length > 0) {
    await fetch('myApi', {
      method: 'POST',
      body: JSON.stringify({ storyIds }),
    });
    setSeenStories(new Set());
  }
};

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