Re-render React Swiper Component - react-native

Question

I want to play a audio on card, when click on the play icon, it plays, i update player state to playing and want to change play icon to pause icon. But cant re-render the card. I have read https://github.com/alexbrillant/react-native-deck-swiper/issues/153 but no solution, how to solve this ?
setPlay2(index, sound, stopper = false) {
....
this.setState({
playing: 'playing',
});
.....
}
const {
playing
} = this.state;
....
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
cards={data}
cardIndex={cardIndex}
renderCard={card => (
<View style={{ flex: 1 }}>
<TouchableOpacity onPress={() => this.setPlay2()}>
{
playing === 'playing' ? (
<Image source={require('#images/BasicAppMenu/pause.png')} style={{ height: 32, width: 32 }} />
) : (
<Image source= {require('#images/BasicAppMenu/play.png')} style={{ height: 32, width: 32
}} />
)
}
</TouchableOpacity>
</View>
)}
/>

Answer 1

Just to check playing within the <TouchableOpacity> element - is this this.state.playing ? You've not included all the code.
If not, this may work?
<TouchableOpacity onPress={() => this.setPlay2()}>
{
this.state.playing === 'playing' ? (
<Image source={require('#images/BasicAppMenu/pause.png')} style={{ height: 32, width:
32 }} />
) : (
<Image source= {require('#images/BasicAppMenu/play.png')} style={{ height: 32,
width: 32
}} />
)
}
</TouchableOpacity>