react-native-insta-story-2

Install

#### 1. Step

``javascript
npm install react-native-insta-story-2 --save
`

or

`javascript
yarn add react-native-insta-story-2
`

#### 2. Step

`javascript
cd ios && pod install
`

Import

`javascript
import InstaStory from "react-native-insta-story-2";
`

Props

| Name | Description | Type | Default Value |
| :------------------------ | :-------------------------------------------------- | :-------- | :-----------: |
| unPressedBorderColor | Unpressed border color of profile circle | color | red |
| pressedBorderColor | Pressed border color of profile circle | color | grey |
| 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 |
| customSwipeUpComponent | For use custom component for swipe area | component | |
| customCloseComponent | For use custom component for close button | component | |
| avatarSize | Size of avatar circle | number | 60 |
| showAvatarText | For show or hide avatar text. | bool | true |
| textStyle | For avatar text style | TextStyle | |
| customStoryCircleListItem | For use custom component for story circle | component | |
| avatarWrapperStyle | For avatar wrapper style | TextStyle | |
| customStoryComponent | For use custom story view component | component | |
| data | Array of IUserStory. You can check from interfaces. | object | |

note:

1. In stories inside data you can pass custom story duration as duration refer below

2. Video is not supported directly but you can use videos with customStoryComponent with exact duration and handle 'pause' with
pressed variable refer below for customStoryComponent's variables and functions invoked.

Usage

`javascript

const data = [
{
group_id: 1,
thumbnail: "https://i.picsum.photos/id/213/200/200.jpg?hmac=Jzh2fbzIE1nc6J8qLi_ljVCRz0AITXxCC1Z8t2sD4jU",
name: "Ahmet Çağlar Durmuş",
stories: [
{
story_id: 7,
story_image: "https://image.freepik.com/free-vector/universe-mobile-wallpaper-with-planets_79603-600.jpg",
swipeText: "Custom swipe text for this story",
duration : 8, // custom individual story duration
onPress: () => console.log("story 1 swiped")
},
{
story_id: 8,
story_image: "https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg"
},
]
},
{
group_id: 2,
thumbnail:
"https://images.unsplash.com/photo-1511367461989-f85a21fda167?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80",
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")
}
]
}
];

data={data}
duration={10}
onStart={(item) => console.log(item)}
onClose={(item) => console.log("close: ", item)}
unPressedBorderColor={"white"}
pressedBorderColor={"white"}
avatarSize={80}
showAvatarText={false}
customStoryCircleListItem={({item}) => (
<>
// your jsx

)}
customStoryComponent={({
content,
load,
setLoad,
current,
progress,
onClosePress,
pressed,
setPressed,
startAnimation,
previous,
next,
onSwipeUp,
swipeText,
start
}) => {}}
/>;
``