react-native-story-video
v5.4.0
Published
This package allows the user to implement insta-like stories and support videos.
Downloads
843
Readme
react-native-story-video
Install
1. Step
npm install react-native-story-video --save
or
yarn add react-native-story-video
2. Step
cd ios && pod install
Import
import InstaStory from 'react-native-story-video';
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 | 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 | |
Usage
Basic
import InstaStory from 'react-native-story-video';
const data = [
{
user_id: 1,
user_image:
'https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg',
user_name: 'Ahmet Çağlar Durmuş',
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',
},
],
},
{
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 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();
}
};
<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 }}
/>