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

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

score 2 · Answer 1 · answered Dec 27 '20 at 02:41

2

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

answered Dec 27 '20 at 02:41

Sagar Shakya

635
3
7

so probably getting the news url could be something like docs[2].news_url right? – Obot Ernest Dec 27 '20 at 21:58
1

Thanks @Sagar. The solution is console.log(docs[cardIndex]); – Obot Ernest Dec 27 '20 at 23:29
1

So i finally got the news_url using this => `docs[card].news_url` – Obot Ernest Dec 27 '20 at 23:32
i have one more problem here https://stackoverflow.com/questions/65606216/react-native-deck-swiper – Obot Ernest Jan 09 '21 at 01:20

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

1 Answers1