react-native-deck-swiper touch to view profile

Question

I am using react-native-deck-swiper to replicate a tinder-like motion for a project. One thing I am trying to do is have so that a user taps on the card, a Modal will come up with all the information regarding that specific card s/he pressed. I have tried a few methods that all vary is some small ways but here is basically the just of what I attempted.

constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      fontLoaded: false,
      currentItem: null,
    };
  }
toggleModal = (card) => {
    this.setState({
      modalVisible: !this.state.modalVisible,
    currentItem:card
  });

  };
  render() {
 return (
    <View>
    <View style={{ marginTop: 30, alignItems: 'center', backgroundColor:'rgb(255, 194, 194)' }}>
    {this.state.fontLoaded === true ? (<Text style={{ fontSize: 40, fontFamily:'Pacifico'}}>title</Text>) : (<Text>loading</Text>)}
    </View>
      <View style={styles.swiperContainer}>
        <Swiper
          animateCardOpacity
          containerStyle={styles.container}
          cards={photoCards}
          renderCard={card => <Card card={card} />}//importing from a custom const I have as a different file
          cardIndex={0}
          backgroundColor="white"
          stackSize={2}
          infinite
          disableTopSwipe={true}
          disableBottomSwipe={true}
          showSecondCard
          animateOverlayLabelsOpacity
          overlayLabels={{
            left: {
              title: 'NOPE',
              element: <OverlayLabel label="HAVE NOT READ" color="#E5566D" />,
              style: {
                wrapper: styles.overlayWrapper,
              },
            },
            right: {
              title: 'YES',
              element: <OverlayLabel label="HAVE READ" color="#4CCC93" />,
              style: {
                wrapper: {
                  ...styles.overlayWrapper,
                  alignItems: 'flex-start',
                  marginLeft: 30,
                },
              },
            },
          }}>
        <Button onPress={()=>this.toggleModal({photo:card.photo, name:card.name})} title="press" style={{backgroundColor:'rgba(0,0,0,1)'}}></Button> //I was planning to make the button transparent
        </Swiper>
      </View>
      {this.state.modalVisible === true ? (
      <Modal animationIn="zoomInDown"
          animationOut="zoomOutDown"
          animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}>
      <Text>{this.card.name}</Text>//just a test to see if the information transfers...it doesn't 
      </Modal>):(<View></View>)}

    </View>

As the code stands right now, it crashed once I press the button because Can't find variable: card

I've also tried using currentItem: null like this:

      {this.state.currentItem && <Modal animationIn="zoomInDown"//this is a modification of the Modal element everything else is the same
          animationOut="zoomOutDown"
          animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}
          isVisible={this.state.modalVisible}>
      <Text>{this.currentItem.card.name}</Text>
      </Modal>}

Oleg · Accepted Answer · 2019-10-24T04:16:38.933

1

First one, change the Modal code:

<Modal
      animationType="slide"
      transparent={false}
      visible={this.state.modalVisible}
      onRequestClose={() => {
     //   this.toggleModal(null)}
      }}>
      <View style={{marginTop: 22}}>
        <View>
          <Text>Hello World!</Text>
          {this.state.currentItem && <Text>{this.state.currentItem.name}</Text> }
        </View>
      </View>
    </Modal>

and add onTapCard of Swiper

<Swiper
      animateCardOpacity
      containerStyle={styles.container}
      cards={photoCards}
      renderCard={card => <Card card={card} />}
      onTapCard={(index=>this.toggleModal({photo:photoCards[index].photo, name:photoCards[index].name})}
      cardIndex={0}
      backgroundColor="white"
      stackSize={2}
      infinite
      disableTopSwipe={true}
      disableBottomSwipe={true}
      showSecondCard
      animateOverlayLabelsOpacity
      overlayLabels={{
        left: {
          title: 'NOPE',
          element: <OverlayLabel label="HAVE NOT READ" color="#E5566D" />,
          style: {
            wrapper: styles.overlayWrapper,
          },
        },
        right: {
          title: 'YES',
          element: <OverlayLabel label="HAVE READ" color="#4CCC93" />,
          style: {
            wrapper: {
              ...styles.overlayWrapper,
              alignItems: 'flex-start',
              marginLeft: 30,
            },
          },
        },
      }}>
    <Button onPress={()=>this.toggleModal({photo:card.photo, name:card.name})} title="press" style={{backgroundColor:'rgba(0,0,0,1)'}}></Button> //I was planning to make the button transparent
    </Swiper>

edited Oct 24 '19 at 04:16

answered Oct 24 '19 at 02:42

Oleg

3,580
1
7
12

The issue of an undefined variable of `card` still persists. I think as I reference `card` in the `Swiper` component it doesn't reach the button – Frank Gully Oct 24 '19 at 03:03
Ah I see. I get an error saying `this.props.renderCard is not a function` this is what I tried by adding the button in renderCard: – Frank Gully Oct 24 '19 at 03:14
`renderCard={card => , – Frank Gully Oct 24 '19 at 03:14
Not like this, your syntax is wrong, try move onClick handler of Button to onPress of Card, and return what was before.press on the Card and test. – Oleg Oct 24 '19 at 03:18
Not onPress, onTapCard – Oleg Oct 24 '19 at 03:19
So when I changed it to onTapCard, nothing seemed to work, so I added a `console.log()` in the function to see if it was even being called. It was not, so I replaced the function call (within onTapCard) with a `console.log()` and it only seemed to be called when I swiped – Frank Gully Oct 24 '19 at 03:28
then I replaced the `console.log()` within the `onTapCard` within the function again with the original function and tried swiping the card..yet nothing – Frank Gully Oct 24 '19 at 03:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/201355/discussion-between-oleg-and-frank-gully). – Oleg Oct 24 '19 at 03:30
1

Updated the answer – Oleg Oct 24 '19 at 04:20

react-native-deck-swiper touch to view profile

1 Answers1