RadioList.js

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Platform,
  Image,
  TouchableOpacity
} from 'react-native'
import { ReactNativeAudioStreaming } from 'react-native-audio-streaming'
import Player from './Player'

var URL =  'https://api.backendless.com/F9B3E486-9DA0-E127-FF44-208D03827200/8B9A3030-C8BB-1149-FFCB-26E84A927F00/files/media/iSK/radiodata.json'

export default class Radio extends Component {
  constructor() {
    super()
    this.state = {
      dataSource: [],
      loaded: false,
      radioUrl: 'http://83.219.1.77:9200/skfm'
    }
  }

  componentDidMount() {
    this.fetchData().done()
    console.log('fetch')
  }

  async fetchData() {
    try {
      const response = await fetch(URL)
      const ds = await response.json()
      this.setState({
        dataSource: ds,
        loaded: true,
      })
    } catch (e) {
      throw e
    }
  }
  
  async prePlay() {
    try {
      ReactNativeAudioStreaming.stop()
      if(true) {
        this.play()
      }
    } catch (e) {
      throw e
    }
  }
  
  play() {
    ReactNativeAudioStreaming.play(this.state.radioUrl, { showIniOSMediaCenter: true, showInAndroidNotifications: true})
  }

  renderRadio(data) {
     return (
       <TouchableOpacity onPress={() => {
         this.setState({ radioUrl: data.item.url }) 
         this.prePlay()
       }}>
          <View style={StyleSheet.flatten([
            styles.listData,
            {backgroundColor: data.item.url == this.state.radioUrl ? '#F8F8F7' : 'white'}
          ])}>
            <Image style={styles.thumbnail} source={{ uri: data.item.img }} />
            <View style={styles.column}>
              <Text style={styles.name}>{data.item.name}</Text>
            </View>
        </View>   
       </TouchableOpacity>
     )
   }

  _keyExtractor = (item, index) => {
    return item.id
  }

  render() {
    console.log('state', this.state.radioUrl)

    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.dataSource}
          renderItem={this.renderRadio.bind(this) }
          keyExtractor={this._keyExtractor}
          extraData={this.state}
        />
        <Player url={this.state.radioUrl} />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: '#fff',
    paddingTop: Platform.OS === 'ios' ? 30 : 0
  },
  thumbnail: {
    height: 75,
    width: 150
  },
  listData: {
    borderBottomColor: '#e8e9ea',
    borderBottomWidth: 1,
    flexDirection: 'row'    
  },
  name: {
    marginLeft: 10,
    paddingTop: 30,
    color: '#809393'    
  }
})