react-native-chapo-story-insta

react-native-chapo-insta-story

Install

1. Step

npm i react-native-chapo-story-insta

2. Step

cd ios && pod install

Import

import InstaStory from "react-native-chapo-story-insta";

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
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

Usage

const data = [
  {
    user_id: 1,
    user_image:
      "https://pbs.twimg.com/profile_images/1222140802475773952/61OmyINj.jpg",
    user_name: "Ahmet Çağlar Durmuş",
    screen: "restaurant",
    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"),
        restaurantName: "Rustic House - Lounge & Bar",
        restaurantNameStyling: {
          color: "#fff",
          position: "absolute",
          bottom: 90,
        },
        foodName: "Egg Bread Morning Platter",
        foodNameStyling: { color: "#fff", position: "absolute", top: 40 },
        position: "top",
        tags: [
          ["heart_eyes", "Too good"],
          ["thumbsup", "Must try"],
        ],
        tagsStyling: { position: "absolute", top: 250 },
      },
      {
        story_id: 2,
        story_image:
          "https://image.freepik.com/free-vector/mobile-wallpaper-with-fluid-shapes_79603-601.jpg",
        restaurantName: "Rustic House - Lounge & Bar",
        restaurantNameStyling: {
          color: "#fff",
          position: "absolute",
          bottom: 90,
        },
        foodName: "Egg Bread Morning Platter",
        foodNameStyling: { color: "#fff", position: "absolute", top: 40 },
        position: "top",
        tags: [
          ["heart_eyes", "Too good"],
          ["thumbsup", "Must try"],
        ],
        tagsStyling: { position: "absolute", top: 250 },
      },
    ],
  },
  {
    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",
    screen: "restaurant",
    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"),
        restaurantName: "Rustic House - Lounge & Bar",
        restaurantNameStyling: {
          color: "#fff",
          position: "absolute",
          bottom: 90,
        },
        foodName: "Egg Bread Morning Platter",
        foodNameStyling: { color: "#fff", position: "absolute", top: 40 },
        position: "top",
        tags: [
          ["heart_eyes", "Too good"],
          ["thumbsup", "Must try"],
        ],
        tagsStyling: { position: "absolute", top: 250 },
      },
      {
        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"),
        restaurantName: "Rustic House - Lounge & Bar",
        restaurantNameStyling: {
          color: "#fff",
          position: "absolute",
          bottom: 90,
        },
        foodName: "Egg Bread Morning Platter",
        foodNameStyling: { color: "#fff", position: "absolute", top: 40 },
        position: "top",
        tags: [
          ["heart_eyes", "Too good"],
          ["thumbsup", "Must try"],
        ],
        tagsStyling: { position: "absolute", top: 250 },
      },
    ],
  },
];

<InstaStory
  data={data}
  duration={10}
  onStart={(item) => console.log(item)}
  onClose={(item) => console.log("close: ", item)}
  customSwipeUpComponent={
    <View>
      <Text>Swipe</Text>
    </View>
  }
  style={{ marginTop: 30 }}
/>;