Not able to navigate to next image or video in react native

Am working on displaying images and videos , On click of image or video am previewing it in fullscreen. I now want to move between those images and videos with left are right arrows. Am not able to achieve this.

This is my code below

1. Gallery Component where am displaying list of images and videos

 { attachments.map((note,index) => (
                 <TouchableOpacity key={index} onPress={()=>
                 navigation.navigate("Preview",{
                   url: note.imageSource,
                   text: note.text,
                   index:index,
                   attachments:attachments,
                 })}>
                  <ImageCard
                    date={note.date}
                    text={note.text?note.text:null}
                    key={note.key}
                    imageSource={note.imageSource}
                    iconName={note.iconName}
                  />
                  </TouchableOpacity>
                ))
               }

2.PreviewImage component

 const images = props.route.params.attachments;
  const length = images.length;
  const [current, setCurrent] = useState(0);

  const nextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current + 1);
  };
  const prevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };
  <View>
                {image.mime === "video/mp4" ? (
                  <>
                    {current === index  && (
                      <View>
                      <VideoPlayer
                        video={image}
                        videoWidth={deviceWidth}
                        videoHeight={deviceHeight}
                        autoplay={true}
                      />
                      </View>
                    )}
                  </>
                ) : (
                  <>
                    {current === index  && (
                      <ImageBackground
                        source={image}
                        style={{height: deviceHeight, width: deviceWidth}}
                      />
                    )}  
                  </>
                )}
                <View
                  style={{
                    backgroundColor: "white",
                    position: "absolute",
                    height: 50,
                    width: "100%",
                    flexDirection: "row",
                    justifyContent: "space-between",
                  }}>
                    {current === index  && (<>
                  <Text style={{marginLeft: 20, alignSelf: "center"}}>
                    Gallery({index + 1})
                  </Text></>)}
                  <View
                    style={{
                      flexDirection: "row",
                      width: "30%",
                      justifyContent: "space-between",
                    }}>
                    <TouchableOpacity
                      style={{
                        justifyContent: "center",
                        alignContent: "flex-end",
                      }}
                      onPress={()=>{}}>
                      <Icon
                        name="pencil"
                        color={"black"}
                        style={{alignSelf: "center"}}
                        size={18}
                      />
                    </TouchableOpacity>
                    {/* <ImageModal
                    ref={imageModalRef}/> */}
                    <TouchableOpacity
                      style={{marginRight: 20, alignSelf: "center"}}
                      onPress={() => props.navigation.goBack()}>
                      <Text style={{}}>Close</Text>
                    </TouchableOpacity>
                  </View>
                </View>
                <TouchableOpacity
                  style={{
                    backgroundColor: "white",
                    position: "absolute",
                    height: 50,
                    width: 50,
                    marginTop: deviceHeight / 2.5,
                    borderRadius: 100,
                    justifyContent: "center",
                  }}
                  onPress={() => prevSlide()}>
                  <Icon
                    name="chevron-back"
                    color={"black"}
                    style={{alignSelf: "center"}}
                    size={35}
                  />
                </TouchableOpacity>
                <TouchableOpacity
                  style={{
                    backgroundColor: "white",
                    position: "absolute",
                    height: 50,
                    width: 50,
                    alignSelf: "flex-end",
                    marginTop: deviceHeight / 2.5,
                    borderRadius: 100,
                    justifyContent: "center",
                  }}
                  onPress={() => nextSlide()}>
                  <Icon
                    name="chevron-forward"
                    color={"black"}
                    style={{alignSelf: "center"}}
                    size={35}
                  />
                </TouchableOpacity>
                
                  <View
                    style={{
                      backgroundColor: "white",
                      position: "absolute",
                      bottom: 0,
                      height: 200,
                      width: "100%",
                    }}>
                    <Text style={{padding: 10, marginTop: 10, lineHeight: 25}}>
                      {description}
                    </Text>
                  </View>
               
              </View>
 

Am new to react native, Please help, Thanks