Modal popup should render the same info that is being rendered onto the card

[Rahul Bhandari]

I have a Modal screen component as well as the Swiper component to return. The onTapCard prop for thr Swiper component should change the state of the modal popup to make it visible. When the card is clicked, the modal should render the same image and text that is on the card that was clicked. The Modal component with the Swiper component is shown below where 'pictures' is the input data array in state. Any help would be appreciated.

HomeScreen extends Component {
constructor (props) {
super(props)
this.state = {
isVisible: false,
currentPic: null,
pictures: [...
],
};
this.setCurrentPic = this.setCurrentPic.bind(this);
};

setCurrentPic(id) {
this.setState({currentPic: id});
}

onSwiped = (type) => {
console.log(${type})
};

swipeLeft = () => {
this.swiper.swipeLeft()
};

render () {
return (

    {/* MODAL POPUP STARTS HERE */}
    <View className="flex-1 -mt-7">
      {this.state.pictures.map((picture) => {
          return (
        <SafeAreaView 
          className="absolute flex-1 align-center justify-center"
          onPress = {() => this.setState({ isVisible:!this.state.isVisible })}
        >
          <Modal 
            ref={modal => {
              this.modal = modal
            }}
            animationType = {"fade"}  
            onPress = {() => {this.setState( false );this.props.setCurrentPic(this.props.id)}}
            transparent = {true}  
            visible = {this.state.isVisible}
          >  
            <ScrollView className="align-center relative" style={styles.modal} onPress = {() => this.setState(false)}>
              <Image 
                style={{height: 420}}
                className="absolute top-0 h-full w-full rounded-xl" 
                //style={{marginTop: 80}}
                source={{ uri: picture.photoURL }}
              />
            </ScrollView>
          </Modal>
        </SafeAreaView>
        )
      })}

      {/* CARD STARTS HERE */}
      <Swiper
        ref={swiper => {
          this.swiper = swiper
        }}
        containerStyle={{ backgroundColor: 'transparent' }}
        backgroundColor={"4FD0E9"}
        //onSwiped={() => this.onSwiped('general')}
        onSwiped={() => this.setCurrentPic(this.props.id)}
        onSwipedLeft={() => this.onSwiped(0)}
        onSwipedRight={() => this.onSwiped(1)}
        onSwipedTop={() => this.onSwiped(2)}
        onSwipedBottom={() => this.onSwiped(-1)}
        onTapCard={() => this.setState({ isVisible:!this.state.isVisible })} // this one to be used for modal pop up
        cards={this.state.pictures}
        cardIndex={0}
        cardVerticalMargin={1}
        cardHorizontalMargin={10}
        swipeDirection= {''}
        renderCard={(card) => (

          {/* WHAT IS BEING RENDERED ONTO THE CARD */}
          <View 
            key={card.id}
            className="relative bg-blue h-3/4 rounded-xl"
          >
            <Image 
                className="absolute top-0 h-full w-full rounded-xl" 
                source={{ uri: card.photoURL}}
                //source={require(./logo.png)}
            />
          </View>
        )}
        stackSize={3}
        stackSeparation={1}
        animateOverlayLabelsOpacity
        animateCardOpacity
        swipeBackCard
      >
      </Swiper>
    </View>
    {/* CARD ENDS HERE */}
)

}
}

export default HomeScreen;

[Alec Hansen]

I would make sure to increase the index of your pictures array each time you swipe, so when you tap on the card the appropriate information will be available.