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

[RahulBhandari18]

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 */} { 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) => ( {/* MODAL POPUP */} { 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.") } } > this.setState(false)}> {/* CONTENT THAT RENDERS ONTO THE ACTUAL CARD */} )} stackSize={3} stackSeparation={1} animateOverlayLabelsOpacity animateCardOpacity swipeBackCard > {/* 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