Skip to content

Instantly share code, notes, and snippets.

@alfonsodev
Last active Sep 28, 2019
Embed
What would you like to do?
React Native Item list
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment