abbasfreestyle / react-native-af-video-player

MIT License
381 stars 289 forks source link

Removing header on full screen #126

Open yottanami opened 5 years ago

yottanami commented 5 years ago

I need to remove header on full-screen rotation but it can not make it completely full-screen and the app stays on horizontal even after canceling full-screen. If I am not mistaken onFullScreen called twice! ( as I checked in the debugger ) I think the problem happens when it is trying to set the fullscreen parameter. Whithout it everything works fine but I need to remove header on full-screen

import React, { Component } from 'react'
import { StyleSheet, View, ScrollView, Alert, Text, ActivityIndicator } from 'react-native'
import { colors, fontSize } from "../Styles/styles";
import Video from 'react-native-af-video-player'
import GraphqlProvider from '../Components/GraphqlProvider'
import { Query } from "react-apollo"
import Setting from '../Configs/settings';
import gql from "graphql-tag";

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})

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

class ReactNavigationExample extends Component {

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

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

  render() {
    const id = this.props.navigation.getParam('id', 0);
    return (

      <GraphqlProvider>
        <Query query={PostQuery} variables={{id}}>
          {({ loading, error, data }) => {
            if (loading) return <ActivityIndicator color={colors.teal} />;
            if (error) return <Text>OH OH :{`Error: ${error}`}</Text>;

            return (

              <View style={styles.container}>
                <Video

                  key={data.post.title}
                  url={Setting.serverMainPath + data.post.video.url}
                  placeholder={Setting.serverMainPath + data.post.image.url}
                  logo={Setting.serverMainPath + data.post.image.url}
                  title={data.post.title}
                  onFullScreen={status => this.onFullScreen(status)}
                  rotateToFullScreen
                />
              </View>
            );
          }}
        </Query>
      </GraphqlProvider>

    )
  }
}

export default ReactNavigationExample

photo5785155003516825709

photo5785155003516825708

yottanami commented 5 years ago

After clicking on the fullscreen button onFullSScreen returns value for three times: true, false and then true again. If I change state on onFullScreen event it returns one value and it is true and the screen changes like the top screenshot and it cannot return or completely fullscreen.

yottanami commented 5 years ago

As I checked it has a conflict with Query tag.