react_help.jsx

FrontView.js

'use strict';

var React = require('react-native');

var ProfileView = require('./ProfileView');

var { 
  StyleSheet,
  View,
} = React;

class FrontView extends React.Component {
  render(): React.Element {
    return (
      <View style={styles.container}>
        <ProfileView style={styles.rightContainer}/>
        <ProfileView/>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container : {
    flex: 1,
    flexDirection : 'row',
  },
  rightContainer: {
    flex:1,
  },
});

module.exports = FrontView;

ProfieView.js

'use strict';

var React = require('react-native');


var {
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TouchableHighlight,
  View,
} = React;

var API_KEY = '7waqfqbprs7pajbz28mqf6vz';
var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json';
var PAGE_SIZE = 25;
var PARAMS = '?apikey=' + API_KEY + '&page_limit=' + PAGE_SIZE;
var REQUEST_URL = API_URL + PARAMS;

class ProfileView extends React.Component {

  getInitialState() {
    return {
      dataSource: [],
      loaded: false,
    };
  }

  componentDidMount() {
    fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource:responseData.movies,
          loaded: true,
        });
      })
      .done();
  }

 render(): React.Element {
    if (this.state.loaded) {
      return this.renderLoadingView();
    }
    return (
        <ScrollView
          alwaysBounceVertical={true}
          pagingEnabled={true}>
          {this.state.dataSource.map(s=>this.renderMovie(s))}
        </ScrollView>
    );
  }

  handlePress() {
    console.log("ProfileView bol");
  }

  renderLoadingView() : React.Element {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

  renderMovie() : React.Element {
    return (
  //    <TouchableHighlight onPress={this.handlePress} underlayColor="#dddddd" >

// </TouchableHighlight>
<View>
        <View style={styles.container}>
          <Image
            source={{uri: movie.posters.thumbnail}}
            style={styles.thumbnail}
          />
          <View style={styles.rightContainer}>
            <Text style={styles.title}>{movie.title}</Text>
            <Text style={styles.year}>{movie.year}</Text>
            <Text style={styles.criticsReview}>{movie.ratings.critics_rating}</Text>
          </View>
        </View>
</View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  criticsReview: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 80,
    height: 181,
  },
});

module.exports = ProfileView;