npm install react-native-insta-story --saveor
yarn add react-native-insta-storycd ios && pod installimport InstaStory from 'react-native-insta-story';| 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 |
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: '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}
/>
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 }}
/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent