filmDetail.js

// FilmDetail.js
import React, { Component, PropTypes } from 'react';
import { gql, graphql } from 'react-apollo';
import {
  Text,
  View,
} from 'react-native';

@graphql(gql`
    query($id: ID!) {
      film(id: $id) {
        title
        openingCrawl
        director
        producers
        releaseDate
      }
    }
`, {
  options: (props) => ({
    variables: {
      id: props.navigation.state.params.id,
    },
  }),
})
class FilmDetail extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.title,
  });

  render() {
    const { film } = this.props.data;

    return (
      <View style={styles.container}>
        <Text style={styles.title}>{film.title}</Text>
        <View style={styles.rowContainer}>
          <Text style={styles.bold}>Released Date:</Text><Text> {moment(film.releaseDate).format('DD MMMM Y')}</Text>
        </View>
        <View style={styles.rowContainer}>
          <Text style={styles.bold}>Director:</Text><Text> {film.director}</Text>
        </View>
        <View style={styles.rowContainer}>
          <Text style={styles.bold}>Producers:</Text><Text> {film.producers.join(', ')}</Text>
        </View>
        <View style={styles.openingCrawlContainer}>
          <Text style={styles.openingCrawlText}>{film.openingCrawl}</Text>
        </View>
      </View>
    );
  }
}

export default FilmDetail;