React Native Item list

ItemList.js

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  TouchableHighlight,
  Text,
  SafeAreaView,
  Alert
} from "react-native";

const styles = StyleSheet.create({
  title: {
    fontSize: 25,
    margin: 10,
    marginTop: 20
  },
  item: {
    backgroundColor: "pink",
    padding: 10,
    margin: 10
  }
});

class ItemList extends Component {
  items = [
    { title: "song 1", url: "https://mysongs.com/song-one" },
    { title: "song 2", url: "https://mysongs.com/song-two" },
    { title: "song 3", url: "https://mysongs.com/song-three" }
  ];

  constructor(props) {
    super(props);
    this.playTrack = this.playTrack.bind(this);
  }

  playTrack(index) {
    Alert.alert(
      `now playing ${this.items[index].title} from url: ${this.items[index].url}`
    );
  }

  render() {
    const itemList = this.items.map((item, index) => (
      <TouchableHighlight
        style={styles.item}
        onPress={() => this.playTrack(index)}
      >
        <Text>{this.items[index].title}</Text>
      </TouchableHighlight>
    ));
    return (
      <SafeAreaView>
        <Text style={styles.title}>My Playlist</Text>
        {itemList}
      </SafeAreaView>
    );
  }
}
export default ItemList;