@birdwingo/react-native-instagram-stories

npm downloads npm version

About

react-native-instagram-stories component is a versatile React Native component designed to display a horizontal scrollable list of user stories, similar to the stories feature found in the Instagram app. It provides a visually appealing way to showcase stories with various customizable options. It is used in the Birdwingo mobile app for Birdwingo Academy which allows users to learn the basics of investing in stocks and ETFs.

Installation

npm install react-native-svg
npm install react-native-reanimated
npm install react-native-gesture-handler
npm install @birdwingo/react-native-instagram-stories

Integration with Storage and Video

The component offers an option to save and track the progress of seen stories using saveProgress. If you use saveProgress, please make sure you have @react-native-async-storage/async-storage installed.

If you use video in your stories, please make sure you have react-native-video installed.

Usage

To use the InstagramStories component, you need to import it in your React Native application and include it in your JSX code. Here's an example of how to use it:

import React from 'react';
import { View } from 'react-native';
import InstagramStories from '@birdwingo/react-native-instagram-stories';

const YourComponent = () => {
  
  const stories = [{
    id: 'user1',
    name: 'User 1',
    imgUrl: 'user1-profile-image-url',
    stories: [
      { id: 'story1', sourceUrl: 'story1-image-url' },
      { id: 'story2', sourceUrl: 'story1-video-url', mediaType: 'video' },
      // ...
    ]}, // ...
  ];
  
  return (
    <View>
      <InstagramStories
        stories={stories}
        // ...
      />
    </View>
  );
};

export default YourComponent;

Props

Name	Type	Default value	Description
`stories`	InstagramStoryProps[]	required	An array of stories.
`saveProgress`	boolean	false	A boolean indicating whether to save and track the progress of seen stories.
`avatarBorderColors`	string[]	DEFAULT_COLORS	An array of string colors representing the border colors of story avatars.
`avatarSeenBorderColors`	string[]	[ '#2A2A2C' ]	An array of string colors representing the border colors of seen story avatars.
`avatarSize`	number	60	The size of the story avatars.
`storyAvatarSize`	number	25	The size of the avatars shown in the header of each story.
`listContainerStyle`	ScrollViewProps['contentContainerStyle']		Additional styles for the list container.
`listContainerProps`	ScrollViewProps		Props to be passed to the underlying ScrollView component.
`containerStyle`	ViewStyle		Additional styles for the story container.
`textStyle`	TextStyle		Additional styles for text elements.
`animationDuration`	number	10000	The duration of the story animations in ms.
`videoAnimationMaxDuration`	number		The max duration of the video story animations in ms. If is this property not provided, the whole video will be played.
`backgroundColor`	string	'#000000'	The background color of story container.
`showName`	boolean	false	Whether you want to show user name under avatar in avatar list.
`nameTextStyle`	TextStyle		Additional styles for name text elements.
`videoProps`	react-native-video		Additional props for video component. For more information, follow `react-native-video`.
`onShow`	( id: string ) => void		Callback when a story is shown.
`onHide`	( id: string ) => void		Callback when a story is hidden.

Public Methods

Name	Type	Description
`spliceStories`	( stories: InstagramStoryProps[], index?: number ) => void	Insert new stories at a specific index. If you don't provide `index` property, stories will be pushed to the end of array.
`spliceUserStories`	( stories: InstagramStoryProps[], user: string, index?: number ) => void	Insert new stories for a specific user at a specific index. If you don't provide `index` property, stories will be pushed to the end of array
`setStories`	( stories: InstagramStoryProps[] ) => void	Replace the current stories with a new set of stories.
`clearProgressStorage`	() => void	Clear the progress storage for seen stories.
`hide`	() => void	Hide stories if currently visible

Types

InstagramStoryProps

Parameter	Type
`id`	string
`imgUrl`	string
`name`	string
`stories`	StoryItemProps[]

Please note that id parameter must be unique for every user

StoryItemProps

Parameter	Type
`id`	string
`sourceUrl`	string
`mediaType`	'video' \| 'image' (default: `'image'`)
`renderContent`	() => ReactNode

Please note that id parameter must be unique for every story

Default Gradient Colors

Default colors for avatar gradient are the same as on Instagram - [ '#F7B801', '#F18701', '#F35B04', '#F5301E', '#C81D4E', '#8F1D4E' ]

react-native-instagram-stories is sponsored by Birdwingo.
Download Birdwingo mobile app to see react-native-instagram-stories in action!