Unable to close stories modal when clicking cross icon

[MuhammadOsama169]

Issue

Unable to close stories when clicking on cross icon. I am able to change the color of the close icon through props as mentioned on the documentation but unable to close user stories unless i use native android back navigation.

Video

https://www.loom.com/share/e8e071699c9c459d9e359f8b29a5b28b

Code

import React, { useRef } from "react";
import { View } from "react-native";
import InstagramStories, {
  InstagramStoriesProps,
  InstagramStoriesPublicMethods,
} from "@birdwingo/react-native-instagram-stories";

const StoriesPlayer = () => {
  const ref = useRef<InstagramStoriesPublicMethods>(null);

  const stories: InstagramStoriesProps["stories"] = [
    {
      id: "u3",
      name: "User 2",
      avatarSource: {
        uri: "https://images.ctfassets.net/vy53kjqs34an/744comOZgzZR956FHHezkj/1b2327913f0cfb682e4d5ff5aec5e0d7/KV-Webook-Sizes_1920x1280.jpg?fm=webp&w=1920&h=1280",
      },
      stories: [
        {
          id: "s1",
          source: {
            uri: "https://images.ctfassets.net/vy53kjqs34an/5TtNF7lafkhVVdtgg1qsyO/b405a82fcd5dcb09b017c23ad9552278/Copy-of-DJI_0043.jpg?fm=webp&w=1311&h=737",
          },
        },
        {
          id: "s2",
          source: {
            uri: "https://images.ctfassets.net/vy53kjqs34an/5Fky7NRSPbjRCelJ5n0And/4ec193564797525b549b361e6544e6a7/LIYALI_DIRIYAH_Ticket_Banner-_Feature_Event.jpg?fm=webp&w=1280&h=427",
          },
          //   mediaType: "video",
        },
      ],
    },
  ];

  return (
    <View>
      <InstagramStories
        ref={ref}
        stories={stories}
        animationDuration={5000}
        progressActiveColor={"#ff2b79"}
        progressColor={"#ffffff"}
        imageStyles={{ resizeMode: "cover" }}
        showName
        nameTextStyle={{ color: "#ffffff", textAlign: "center", paddingTop: 5 }}
        mediaContainerStyle={{ backgroundColor: "#ffffff" }}
        imageProps={{ height: 1000 }}
        closeIconColor={"#ff2b79"}
      />
    </View>
  );
};

export default StoriesPlayer;

[Aniket-Bane]

There is a prop called isVisible which takes a boolean value from the useState hook to control the visibility of the component. Another prop, onHide, is a function that sets the state to false to hide the component. For example:

const [showStories, setShowStories] = useState(false);

  const openStories = () => {
    setShowStories(true);
  };

  const closeStories = () => {
    setShowStories(false);
  };

  return (
    <>
      {showStories && (
        <Modal visible={showStories} animationType="fade">
          <InstagramStories
            ref={ref}
            onStoryStart={onStoryStart}
            onHide={closeStories}
            stories={[story]}
            isVisible={showStories}
            statusBarTranslucent={true}
            progressColor={theme.storiesColors.progressBarColor}
            progressActiveColor={theme.common.white}
            headerContainerStyle={styles.headerContainerStyle}
            closeIconColor={theme.common.black}
            storyAnimationDuration={storyAnimationDuration}
            animationDuration={animationDuration}
            hideAvatarList={true}
            footerComponent={
              currentStory
                ? VideoDescription(
                    currentStory,
                    theme,
                    bounceAnim,
                    expandText,
                    setExpandText,
                  )
                : null
            }
          />
        </Modal>
      )}
    </>
  );```