React Native Advanced Stories

An elegant, performant, and customizable stories component for React Native applications.

Features

• 🖼️ Support for both images and videos
• 🔍 Pause functionality with long press
• 👆 Swipe gestures and touch controls
• 🔄 Progress bar for multiple story items
• 📱 Fully customizable stories
• ⬆️ Swipe up interaction support
• User avatar and username display
• 🔄 Smooth transitions between stories
• TypeScript support

Installation

1npm install react-native-advanced-stories react-native-video
2# or
3yarn add react-native-advanced-stories react-native-video

iOS

1cd ios && pod install

Basic Usage

1import React, {useState} from 'react';
2import {View, TouchableOpacity, Image} from 'react-native';
3import {StoryList} from 'react-native-advanced-stories';
4
5const App = () => {
6  const [modalVisible, setModalVisible] = useState(false);
7  const [storyIndex, setStoryIndex] = useState(0);
8
9  const stories = [
10    {
11      key: '1',
12      user_name: 'John Doe',
13      user_image: 'https://example.com/avatar1.jpg',
14      data: [
15        {
16          key: '1-1',
17          type: 'image',
18          source: 'https://example.com/story1.jpg',
19        },
20        {
21          key: '1-2',
22          type: 'video',
23          source: 'https://example.com/story2.mp4',
24        },
25      ],
26    },
27    // More stories...
28  ];
29
30  const openStory = index => {
31    setStoryIndex(index);
32    setModalVisible(true);
33  };
34
35  return (
36    <View style={{flex: 1}}>
37      {/* Story avatars */}
38      <View style={{flexDirection: 'row', padding: 10}}>
39        {stories.map((story, index) => (
40          <TouchableOpacity
41            key={story.key}
42            onPress={() => openStory(index)}
43            style={{marginRight: 12}}>
44            <Image
45              source={{uri: story.user_image}}
46              style={{width: 60, height: 60, borderRadius: 30}}
47            />
48          </TouchableOpacity>
49        ))}
50      </View>
51
52      {/* Story viewer */}
53      {modalVisible && (
54        <StoryList
55          slides={stories}
56          indexOpen={storyIndex}
57          closeStory={() => setModalVisible(false)}
58          imageDuration={5000}
59          onStorySeen={story => console.log('Story seen:', story)}
60          onPressAvatar={user => console.log('Avatar pressed:', user)}
61        />
62      )}
63    </View>
64  );
65};
66
67export default App;

Props

StoryList Props

Prop	Type	Description	Default
slides	StoryItem[]	Array of story data	Required
indexOpen	number	Initial story index to show	0
closeStory	function	Function to close story viewer	Required
onStorySeen	function	Callback when a story is seen	() => {}
imageDuration	number	Duration for image stories (ms)	4000
userContainer	ViewStyle	Style for user info container	{}
userAvatarStyle	ImageStyle	Style for user avatar	{}
userTextStyle	TextStyle	Style for username text	{}
onPressAvatar	function	Callback when avatar is pressed	() => {}
renderSwipeUpComponent	function	Component to render on swipe up	() => null