post.js

import React, { Component } from 'react';
import { StyleSheet, View, Alert, Text, ActivityIndicator, Orientation } from 'react-native';
import {H2, H3, Card, CardItem, Right, Body, Button} from 'native-base';
import { colors, fontSize } from "../Styles/styles";
import Video, { ScrollView, Container } from 'react-native-af-video-player';
import { Query, withApollo, ApolloConsumer } from "react-apollo";
import Setting from '../Configs/settings';
import gql from "graphql-tag";
import Layout from '../Components/Layout';
import VideoPlayer from '../Components/VideoPlayer';
import NavigationService from '../Configs/NavigationService';
const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

const PostQuery = gql`
query Post($id: ID!) {
  post(id: $id) {
    title,
    body,
    image,
    video
	}
}
`;

class Post extends Component {

  constructor() {
    super();
  }


  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    const header = (state.params.fullscreen ? undefined : null);
    return {
      header,
    };
  }

  onFullScreen(status) {
    this.props.navigation.setParams({
      fullscreen: !status
    });
  }


  render() {
    const id = this.props.navigation.getParam('id', 0);
    return (
      <Layout>
        <ApolloConsumer>
          {client =>
           <VideoPlayer client={client} postID={id} setNavigationOptions={this.onFullScreen} />
          }
        </ApolloConsumer>
      </Layout>
    );
  }
}

export default Post = Post;

videoplayer.js

import React, { Component } from "react";
import Video, { ScrollView, Container } from 'react-native-af-video-player';
import Setting from '../Configs/settings';
import gql from "graphql-tag";
import NavigationService from '../Configs/NavigationService';


import {
  View,
  ActivityIndicator,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Image,
  Dimensions
} from "react-native";

import { Header,
         Content,
         Card,
         CardItem,
         Thumbnail,
         Text,
         Button,
         Icon,
         Left,
         Body,
         Right
       } from 'native-base';


const PostQuery = gql`
query Post($id: ID!) {
  post(id: $id) {
    title,
    body,
    image,
    video
	}
}
`;

export default class VideoPlayer extends Component {

  constructor() {
    super();
    this.state = {
      data: {}
    };
  }

  async componentDidMount (){
    const client = this.props.client;

    try {
      await client.query({
        query: PostQuery,
        variables: {id: this.props.postID}
      }).then(data => {
        this.setState({data: data.data});
      });
    } catch(err) {
      console.log("Error fetching post-----------", err);
      alert('Error fetching data');
    }
  }


  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    const header = state.params.fullscreen ? undefined : null;
    return {
      header
    };
  }

  onFullScreen(status) {
    this.props.setNavigationOptions(status);
  }

  render () {
    if(this.state.data.post != null){
      return (
        <View>
          <Video
            key={this.state.data.post.title}
            url={Setting.serverMainPath + this.state.data.post.video.url}
            placeholder={Setting.serverMainPath + this.state.data.post.image.url}
            logo={Setting.serverMainPath + this.state.data.post.image.url}
            title={this.state.data.post.title}
            onFullScreen={fullScreen => this.onFullScreen(fullScreen)}
            rotateToFullScreen
          />

        </View>
      );

    }else{
      return <ActivityIndicator />;
    }
  }
}