react-native-insta-story-2

Install

1. Step

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

or

yarn add react-native-insta-story-2

2. Step

cd ios && pod install

Import

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

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