Changing the state of a component in the renderCard prop using the onTapCard prop.

[Rahul Bhandari]

I have a modal screen component in the renderCard prop for my Swiper component. I want to change the 'isVisible' state of that modal using the onTapCard prop of the Swiper component. The Swiper component with the Modal 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 (

    {/* CARD STARTS HERE */}
    <View className="flex-1 -mt-7">
      <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)}
        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) => (
          <View 
            key={card.id}
          >
            
            {/* MODAL POPUP */}
            <Modal
              ref={modal => {
                this.modal = modal
              }}
              animationType = {"fade"}  
              //onPress = {() => {this.setState({ isVisible:!this.state.isVisible});this.props.setCurrentPic(this.props.id)}}
              transparent = {true}  
              visible = {this.state.isVisible} 
              onRequestClose = {() => { console.log("Modal has been closed.") } }
            >  
              <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: card.photoURL }}
                />
              </ScrollView>
            </Modal>


            {/* CONTENT THAT RENDERS ONTO THE ACTUAL CARD */}
            <Image 
                className="absolute top-0 h-full w-full rounded-xl" 
                source={{ uri: card.photoURL }}
            />
          </View>
        )}
        stackSize={3}
        stackSeparation={1}
        animateOverlayLabelsOpacity
        animateCardOpacity
        swipeBackCard
      >
      </Swiper>
    </View>
    {/* CARD ENDS HERE */}
)

}
}

export default HomeScreen;

[samiullah452]

The only possible way is to use key prop I assume. Use setKey(prev => prev + 1) to rerender the card