Skip to content

Instantly share code, notes, and snippets.

@spikebrehm
Created April 28, 2017 21:47
Show Gist options
  • Save spikebrehm/efe74e6ceb2a669139543707ce5e3542 to your computer and use it in GitHub Desktop.
Save spikebrehm/efe74e6ceb2a669139543707ce5e3542 to your computer and use it in GitHub Desktop.
React VR blog post: Day 1 posters example
import React, { Component } from 'react';
import {
asset,
Pano,
View,
StyleSheet,
} from 'react-vr';
import Poster from './Poster';
import posters from '../posters.json';
export default class App extends Component {
render() {
return (
<View>
<Pano source={asset('background.jpg')} />
<View style={styles.posters}>
{posters.map(poster =>
<Poster
key={poster.thumbnailSrc}
thumbnailSrc={poster.thumbnailSrc}
/>
)}
</View>
</View>
);
}
}
const styles = StyleSheet.create({
posters: {
flex: 1,
flexDirection: 'row',
transform: [{
translate: [-2.5, 2, -7],
}],
},
});
import React, { Component, PropTypes } from 'react';
import {
StyleSheet,
Image,
View,
} from 'react-vr';
export default class Poster extends Component {
static propTypes = {
thumbnailSrc: PropTypes.string.isRequired,
};
render() {
return (
<View style={styles.poster}>
<Image
style={styles.thumbnail}
source={{ uri: this.props.thumbnailSrc }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
poster: {
width: 2,
height: 4,
margin: 0.5,
},
thumbnail: {
width: 2,
height: 4,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment