title: How to change particular index image in flatlist renderitem react native on conditional
body: <p>I am showing some Audio data in Flat-list. Flat-list, I am showing in main class, But, RenderItem calling in separate class. So, Once I tapped particular row item, I am playing audio file. But, I have to change pause to play image. But, When I tried to change it, All images are getting changes.
  Bydefault, I am showing all cells images with pause icon.</p>
  
  <p>Also Once user taps on play/pause in audio player, Then I have to change flatlist current playing item row images either play/pause.</p>
  
  <p>I am showing audio player in bottom of the screen. Once user tap on flatlist pause icon, I am playing audio player in bottom of the screen.</p>
  
  <p>I have tired but, All cells images getting changing.
  Any suggestions?</p>
  
  <p>Note: We have different UI for Audio player,  So,  I have created customized UI for player instead of default media component. </p>
  
  <p>Main class.js</p>
  
  <pre><code>  selectedAudio = (item, index) =&gt; {
  
      if (isConnected) {
        if (!isEmpty(audioURL)) {
          //   console.log('selected audio url is', audioURL);
          SoundPlayer.playUrl(audioURL);
          this.setState({
            paused: false,
            currentPosition: 0,
            currentTime: 0,
            audioSelectedIndex: index,
          });
        }
      } else {
      }
    }
  
    renderItem = ({ item, indexx }) =&gt; (
      &lt;Cell
        item={item}
        onSelected={this.selectedAudio}
        index={indexx}
        audioSelectedIndex={this.state.audioSelectedIndex}
      /&gt;
    )
  
  
                  render() {
                  return (
                   &lt;View some styles&gt;
                    &lt;FlatList
                      style={styles.faltList}
                      showsVerticalScrollIndicator
                      data={podcast}
                      extraData={this.state}
                      ItemSeparatorComponent={this.separator}
                      renderItem={this.renderItem}
                      /&gt;
                      &lt;/View&gt;
                     );
                    }
  
  
  Cell.js
  
  export default class Cell extends PureComponent {
    render() {
      const { item, indexx, audioSelectedIndex } = this.props;
      return (
  
        &lt;View style={styles.flatListCell}&gt;
            &lt;View style={styles.containerText}&gt;
                &lt;Text style={styles.title}&gt;
                  {item.title}
                &lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
            &lt;TouchableWithoutFeedback onPress={this.props.onSelected.bind(this, item)}&gt;
              &lt;Image
                style={styles.playPause}
                source={audioSelectedIndex === indexx ? res.images.play : res.images.pause}
              /&gt;
            &lt;/TouchableWithoutFeedback&gt;
          &lt;/ImageBackground&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>