Skip to content

Instantly share code, notes, and snippets.

@zsajjad
Created Jan 18, 2020
Embed
What would you like to do?
React 360 Step 2: Images & Text
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"
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment