React VR blog post: Day 1 posters example

App.js

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],
    }],
  },
});

Poster.js

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,
  },
});