Skip to content

Instantly share code, notes, and snippets.

@zsajjad
Created Jan 18, 2020
Embed
What would you like to do?
React 360 Step 1: Layout
export default class soccerVR extends React.Component {
render() {
return (
<View style={styles.panel}>
{/* This container will align all logos in center as row */}
<View style={styles.logosContainer}>
{/* Each view will have logo and name of club */}
<View style={styles.logoHolder} />
<View style={styles.logoHolder} />
<View style={styles.logoHolder} />
<View style={styles.logoHolder} />
<View style={styles.logoHolder} />
</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: {
padding: 12,
backgroundColor: "#003143",
borderWidth: 2,
flexDirection: "row",
justifyContent: "center",
alignItems: "center"
},
logoHolder: {
flex: 20,
height: 200,
margin: 12,
backgroundColor: "rgba(0, 0, 0, 0.8)"
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment