Every thing hides and also stops when we click on send message footer

https://github.com/SimformSolutionsPvtLtd/react-native-story-view/assets/49521234/267be2cb-e726-47d9-808a-364e14b79528

When we click on send message textInput everything hide and stops also.
Also i cannot find method to pause story it is in your documentation but i access it in the in storyContainerProps.
Also please add swipe down gesture properly. We have to hold story first then swipe down.

this is my package.json { "name": "geeLink", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", "test": "jest", "lint": "eslint .", "postinstall": "patch-package" }, "dependencies": { "@babel/plugin-transform-template-literals": "^7.22.5", "@baronha/react-native-photo-editor": "^1.1.6", "@birdwingo/react-native-instagram-stories": "^1.0.7", "@leafletui/rn-image-video-grid-viewer": "^0.0.4", "@notifee/react-native": "5.3.0", "@openspacelabs/react-native-zoomable-view": "^2.1.1", "@react-native-async-storage/async-storage": "^1.17.4", "@react-native-community/checkbox": "^0.5.12", "@react-native-community/clipboard": "^1.5.1", "@react-native-community/datetimepicker": "^7.0.1", "@react-native-community/netinfo": "^9.3.0", "@react-native-community/push-notification-ios": "^1.10.1", "@react-native-community/slider": "^4.3.2", "@react-native-firebase/app": "^15.2.0", "@react-native-firebase/messaging": "^15.2.0", "@react-native-masked-view/masked-view": "^0.2.6", "@react-native-picker/picker": "^2.4.1", "@react-navigation/bottom-tabs": "^6.3.1", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.2.1", "@rntext/more-or-less": "^2.0.1", "@twotalltotems/react-native-otp-input": "^1.3.11", "@zegocloud/react-native-callkeep": "^4.3.9", "@zegocloud/zego-uikit-prebuilt-call-rn": "^4.2.12", "@zegocloud/zego-uikit-rn": "^2.3.1", "axios": "^0.27.2", "i18next": "^23.3.0", "lodash": "^4.17.21", "lottie-ios": "3.4.0", "lottie-react-native": "^5.1.5", "moment": "^2.29.3", "native-base": "^3.4.5", "patch-package": "^6.4.7", "postinstall-postinstall": "^2.1.0", "quickblox-react-native-sdk": "^0.9.1", "react": "17.0.2", "react-delegate-component": "^1.0.0", "react-final-form": "^6.5.0", "react-i18next": "^13.0.2", "react-native": "0.68.2", "react-native-compressor": "^1.6.1", "react-native-create-thumbnail": "^1.6.4", "react-native-dropdown-picker": "^5.4.6", "react-native-encrypted-storage": "^4.0.3", "react-native-enhanced-popup-menu": "^0.7.0", "react-native-fade-in-image": "^1.6.1", "react-native-fast-image": "^8.6.1", "react-native-fb-image-grid": "^0.0.5", "react-native-flash-message": "^0.1.15", "react-native-floating-action": "^1.22.0", "react-native-geocoding": "^0.5.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.4.2", "react-native-gifted-chat": "^1.0.3", "react-native-google-places-autocomplete": "^2.5.1", "react-native-head-tab-view": "^4.0.0-rc.13", "react-native-image-crop-picker": "^0.36.2", "react-native-image-viewing": "^0.2.2", "react-native-incall-manager": "^3.3.0", "react-native-insta-story": "^1.1.9", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-localization": "^2.3.2", "react-native-maps": "^1.7.1", "react-native-modal": "^13.0.1", "react-native-pager-view": "^6.1.0-rc.2", "react-native-permissions": "^3.8.4", "react-native-phone-number-input": "^2.1.0", "react-native-push-notification": "^8.1.1", "react-native-radial-slider": "^0.0.4", "react-native-raw-bottom-sheet": "^2.2.0", "react-native-reanimated": "^3.2.0", "react-native-responsive-screen": "^1.4.2", "react-native-restart": "^0.0.27", "react-native-safe-area-context": "^4.2.5", "react-native-screens": "^3.13.1", "react-native-snap-carousel": "^3.9.1", "react-native-sound": "^0.11.2", "react-native-splash-screen": "^3.3.0", "react-native-stories-view": "^1.0.9", "react-native-story-view": "^0.0.3", "react-native-svg": "^13.4.0", "react-native-tab-view": "^3.1.1", "react-native-tab-view-collapsible-header": "^2.0.1", "react-native-toast-message": "^2.1.6", "react-native-vector-icons": "^9.2.0", "react-native-video": "^5.2.1", "react-native-video-cache-control": "^1.2.2", "react-native-video-player": "^0.14.0", "react-native-voip-push-notification": "^3.1.0", "react-native-wheel-pick": "^1.2.0", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-logger": "^3.0.6", "redux-persist": "^6.0.0", "redux-saga": "^1.1.3", "redux-thunk": "^2.4.1", "reselect": "^4.1.5", "rn-range-slider": "^2.2.2", "seamless-immutable": "^7.1.4", "socket.io-client": "^4.5.0", "zego-express-engine-reactnative": "3.2.0", "zego-zim-react-native": "2.10.0", "zego-zpns-react-native": "2.5.0-alpha" }, "devDependencies": { "@babel/core": "^7.23.2", "@babel/runtime": "^7.17.9", "@react-native-community/eslint-config": "^3.0.1", "babel-jest": "^28.1.0", "eslint": "^8.15.0", "jest": "^28.1.0", "metro-react-native-babel-preset": "^0.77.0", "react-test-renderer": "17.0.2" }, "jest": { "preset": "react-native" } }

And this my MultiStory Code.

` <MultiStory stories={storyData} ref={multiStoryRef} onChangePosition={(progressIndex, userStoryIndex) => { createUserView( storyData[userStoryIndex]?.stories[progressIndex]?.id ); setCurrentStoryID( storyData[userStoryIndex]?.stories[progressIndex]?.id ); console.log( "checkkkkkdkakdka", progressIndex, storyData[userStoryIndex]?.stories[progressIndex]?.id ); }} storyContainerProps={{ renderFooterComponent: ({ userStories, progressIndex, userStoryIndex, }) => { // console.log("--da-d-a-da-d-a", userStories); return userStories?.id == userData?.userID ? ( <> {hadleViewStory ? null : ( <TouchableOpacity onPress={() => { sethadleViewStory(true); // storyRef?.current?.pause(); }} style={{ width: "100%", height: Metrix.VerticalSize(80), backgroundColor: "transparent", justifyContent: "center", alignItems: "center", }}

<Image source={Images.ArrowUp} style={{ width: Metrix.customImageSize(30), height: Metrix.customImageSize(30), }} /> <CustomText.MediumBlackText customStyle={{ color: "#ffffff", }}

{${ storyData[userStoryIndex]?.stories[progressIndex] ?.storiesView?.length || 0 } Views} </CustomText.MediumBlackText> )}

                  {hadleViewStory ? (
                    <View
                      style={{
                        width: "100%",
                        height: screenHeight / 2,
                        backgroundColor: "#fff",
                        justifyContent: "center",
                        alignItems: "center",
                        borderTopLeftRadius: 13,
                        borderTopRightRadius: 13,
                      }}
                    >
                      <TouchableOpacity
                        onPress={() => sethadleViewStory(false)}
                        style={{
                          height: Metrix.VerticalSize(40),
                          width: "100%",
                          // borderWidth:1,
                          alignItems: "center",
                          justifyContent: "center",
                        }}
                      >
                        <Image
                          source={Images.ArrowDown}
                          style={{
                            width: Metrix.customImageSize(30),
                            height: Metrix.customImageSize(30),
                          }}
                        />
                      </TouchableOpacity>
                      <FlatList
                        renderItem={storyViewsRenderItem}
                        keyExtractor={(item) => item?.fullName}
                        data={
                          userStories?.stories[progressIndex]?.storiesView
                        }
                        contentContainerStyle={{
                          paddingHorizontal: Metrix.VerticalSize(10),
                        }}
                      />
                    </View>
                  ) : (
                    <></>
                  )}
                </>
              ) : (
                <>
                  <Footer
                    {...{ userStories }}
                    onSendTextPress={() => {
                      console.log("da--da-d-a-");
                    }}
                    onIconPress={() => {
                      console.log("workin ---------");
                      let body = {
                        storyID: userStories?.stories[progressIndex]?.id,
                        message: storyReplyMessage,
                      };
                      handleStoryReply(body);
                    }}
                    shouldShowTextInputSend={false}
                    value={storyReplyMessage}
                    onChangeText={(replyMessage) => {
                      setStoryReplyMessage(replyMessage);
                    }}
                  />
                  {isSending && (
                    <Animated.View
                      style={{
                        position: "absolute",
                        bottom: 0,
                        // left: screenWidth / 2,
                        backgroundColor: Colors.BlackOpacity(0.6),
                        borderRadius: Metrix.VerticalSize(50),
                        padding: 16,
                        // borderWidth: 1,
                        alignSelf: "center",
                        flexDirection: "row",
                        transform: [
                          {
                            translateY: animation.interpolate({
                              inputRange: [0, 1],
                              outputRange: [100, 0],
                            }),
                          },
                        ],
                      }}
                    >
                      {sentReplyStatusMsg !== "Sent" && (
                        <ActivityIndicator
                          size={"small"}
                          color={"#ffffff"}
                        />
                      )}
                      <CustomText.RegularBlackText
                        customStyle={{
                          color: "#ffffff",
                          marginLeft: Metrix.HorizontalSize(10),
                        }}
                      >
                        {sentReplyStatusMsg}
                      </CustomText.RegularBlackText>
                    </Animated.View>
                  )}
                </>
              );
            },

            renderHeaderComponent: ({
              userStories,
              progressIndex,
              userStoryIndex,
            }) => {
              // console.log("-header", userStories);
              return userStories?.id == userData?.userID ? (
                <>
                  <ProfileHeader
                    userImage={{ uri: userStories?.profile }}
                    userName={userStories?.username}
                    closeIconProps={{
                      source: Images.ThreeDot,
                    }}
                    // containerStyle={{
                    //   backgroundColor: "red",
                    // }}
                    // userMessage={userStories[0]?.title}
                    // onImageClick={() => { }}
                    onClosePress={() => setDelStory((prev) => !prev)}
                    onImageClick={() => {
                      multiStoryRef?.current?.close();
                      setTimeout(
                        () =>
                          NavigationService.navigate("Profile", {
                            userId: userStories?.id,
                          }),
                        200
                      );
                    }}
                  />
                  {delStory && (
                    <TouchableOpacity
                      onPress={() =>
                        storyDelete(userStories, progressIndex)
                      }
                      style={styles.delCot}
                    >
                      <View style={styles.ThreeDotItemImage}>
                        <Image
                          source={Images.Trash}
                          style={styles.ThreeDotItemImageStyles}
                        />
                      </View>
                      <View style={styles.ThreeDotItemTextView}>
                        <Text
                          style={{
                            fontSize: fontsSize.FontSmall,
                            color: Colors.BlackOpacity("0.9"),
                          }}
                        >
                          Delete Story
                        </Text>
                      </View>
                    </TouchableOpacity>
                  )}
                </>
              ) : (
                <ProfileHeader
                  // containerStyle={{
                  //   backgroundColor: "red",
                  // }}
                  // closeIconStyle={{
                  //   backgroundColor: "red",
                  // }}
                  // userMessageStyle={{
                  //   backgroundColor: "red",
                  // }}
                  // userImageStyle={{
                  //   backgroundColor: "red",
                  // }}
                  userImage={{ uri: userStories?.profile }}
                  userName={userStories?.username}
                  // closeIconProps={}
                  // userMessage={userStories[0]?.title}
                  // onImageClick={() => {}}
                  onClosePress={() => multiStoryRef?.current?.close()}
                  onImageClick={() => {
                    multiStoryRef?.current?.close();
                    setTimeout(
                      () =>
                        NavigationService.navigate("Profile", {
                          userId: userStories?.id,
                        }),
                      200
                    );
                  }}
                />
              );
            },
            // renderCustomView: ({
            //   userStories,
            //   progressIndex,
            //   userStoryIndex,
            // }) => {
            //   // console.log("chduaudauduaud", userStories);
            //   return userStories?.stories[progressIndex]?.text ? (
            //     <View
            //       style={{
            //         position: "absolute",
            //         width: screenWidth - 100,
            //         height: screenHeight - 200,
            //         alignSelf: "center",
            //         backgroundColor: 'transparent',
            //         alignItems: "center",
            //         justifyContent: "center",
            //         zIndex: -10,
            //         top: 100,
            //         // alignSelf:'flex-end'
            //       }}
            //     >
            //       <CustomText.MediumBlackText
            //         customStyle={{
            //           color: "#ffffff",
            //         }}
            //       >
            //         {userStories?.stories[progressIndex]?.text || ""}
            //       </CustomText.MediumBlackText>
            //     </View>
            //   ) : (
            //     <></>
            //   );
            // },
            barStyle: {
              barHeight: 2,
              barActiveColor: Colors.Primary,
            },

            // progressViewProps: {
            //   style: {
            //     zIndex: 100,
            //     position: "absolute",
            //     height: 20,
            //     justifyContent: "center",
            //     width: "100%",
            //   },
            // },
          }}
          avatarProps={{
            userNameStyle: {
              fontSize: Metrix.customFontSize(9),
              fontWeight: "700",
              textAlign: "center",
              color: Colors.SecondaryTextColor,
              // borderWidth: 1,
              width: Metrix.customImageSize(60),
            },
            userNameProps: {
              ellipsizeMode: "tail",
              numberOfLines: 1,
            },
            containerStyle: {
              // borderWidth:2
              width: Metrix.customImageSize(60),
              height: Metrix.customImageSize(60),
              marginTop: Metrix.VerticalSize(3),
              borderColor: Colors.Primary,
              alignSelf: "center",
            },
            viewedStoryContainerStyle: {
              borderWidth: 1,
              borderColor: Colors.PrimaryTextColor,
            },
          }}
        />
      `

SimformSolutionsPvtLtd / react-native-story-view

Every thing hides and also stops when we click on send message footer #58