How to Get data from react native-deck-swiper when swiped - reactjs

Question

I am using react native deck swipper to display arrays of data.
//ARRAYS OF DATA
const docs = shuffleArray([
{
title: "Austin Wade",
content: 22,
featured_image: require("../../assets/images/beach.jpeg"),
created_at: "2020-11-11T16:26:13.000000Z",
news_url: "https://www.google.com",
key: "caseex6qfO4TPMYyhorner",
},..... more json arrays...])
My problem is, i want to be able to extract the news_url when the card is swipped left, and also use the extracted URL to open expo inapp-browser that will display the webpage e.g www.google.com
I have written a function that opens a web browser.
PLEASE CAN SOMEONE HELP ME
//SWIPPER
<SafeAreaView style={{ flex: 1 }}>
{/* <View style={{ flex: 1, padding: 16 }}> */}
<Swiper
ref={useSwiper}
cards={docs}
cardIndex={0}
backgroundColor="transparent"
stackSize={2}
showSecondCard
cardHorizontalMargin={0}
animateCardOpacity
disableBottomSwipe
renderCard={
((card) => <Cardz card={card} />)
}
onSwiped={(cardIndex) => {
console.log(cardIndex);
}}
onSwipedAll={() => {
console.log("onSwipedAll");
}}
onSwipedTop={() => {
console.log(getLatestNews);
}}
onSwipedBottom={() => {
// <Toast message={success} onDismiss={() => {}} />
}}
//swipping left, opens expo web browser
onSwipedLeft={() => {
_handleWebBrowserAsync(getNewsUrl);
//Alert.alert();
}}
></Swiper>
{/* </View> */}
</SafeAreaView>
);
//WEB BROSWER
//async function to open app inapp web browser
const _handleWebBrowserAsync = async (url) => {
try {
_addLinkingListener();
await WebBrowser.openBrowserAsync(url);
//only calls this method in IOS Devices as it only
//works for IOS Devices
if (Constants.platform.ios) {
_removeLinkingListener();
}
} catch (error) {
Alert.alert("Error:", error.message);;
console.log("Error:" + error.message);
}
};
//CARD COMPONENT
import React from 'react'
import { View, Text, Image, ImageSourcePropType } from 'react-native'
import styles from './Card.styles'
const Cardz = ({ card }) => (
<View activeOpacity={1} style={styles.card}>
<Image
style={styles.image}
source={card.featured_image}
resizeMode="cover"
/>
<View style={styles.photoDescriptionContainer}>
<Text style={styles.text}>{`${card.title}, ${card.content}`}</Text>
</View>
</View>
);
export default Cardz

Answer 1

There are event callbacks.
For example: There is onSwiped prop which is a
function to be called when a card is swiped. it receives the swiped card index.
So, you'll get that index value which you'll use to get the object from the docs array. If the swiped index is 2, you can get the object like this: docs[2].