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