React 360 Step 2: Images & Text

content.js

const CLUBS = [
	{
		id: "manutd",
		name: "Manchester United",
		logoUrl: "https://i.ibb.co/mBnCHjY/manUtd.png"
	},
	{
		id: "barcelona",
		name: "Barcelona",
		logoUrl: "https://i.ibb.co/xhchBsm/barcelona.png"
	},
	{
		id: "realMadrid",
		name: "Real Madrid",
		logoUrl: "https://i.ibb.co/tZCsRc5/real-Madrid.png"
	},
	{
		id: "juventus",
		name: "Juventus",
		logoUrl: "https://i.ibb.co/XY6ZKRM/juventus.jpg"
	},
	{
		id: "bayern",
		name: "Bayern Munich",
		logoUrl: "https://i.ibb.co/R697hhG/bayern.png"
	}
];

export default class soccerVR extends React.Component {
	render() {
		return (
			<View style={styles.panel}>
				<View style={styles.logosContainer}>
					{/* Iterating over CLUBS and rendering content */}
					{CLUBS.map(club => (
						<View style={styles.logoHolder} key={club.id}>
							<Image style={styles.logoImage} source={{ uri: club.logoUrl }} />
							<Text style={styles.logoText}>{club.name}</Text>
						</View>
					))}
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	panel: {
		// Fill the entire surface
		width: 1000,
		height: 600,
		backgroundColor: "rgba(0, 0, 0, 0.8)",
		justifyContent: "center",
		alignItems: "center"
	},
	logosContainer: {
		flexDirection: "row",
		justifyContent: "center",
		alignItems: "center"
	},
	logoHolder: {
		flex: 20,
		height: 200,
		margin: 12,
		borderRadius: 12,
		backgroundColor: "white",
		alignItems: "center",
		justifyContent: "center"
	},
	logoImage: {
		// Image requires width and height to be defined explicitly
		width: 120,
		height: 120
	},
	logoText: {
		color: "black"
	}
});