react-native-insta-story-2/README.md

custom patched version of react-native-insta-story Story component for React Native.

# react-native-insta-story-2

<p align="center">
<img src="./images/example.gif" height="500" />
</p>

## 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")
                }
            ]
        }
    ];

			<Story
				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
				}) => {}}
				/>;
```