react-native-af-video-player icon indicating copy to clipboard operation
react-native-af-video-player copied to clipboard

Removing header on full screen

Open yottanami opened this issue 5 years ago • 2 comments

  • [x] react-native-af-video-player version: 0.2.1
  • [x] React Native version: 0.57.8
  • [x] OS: Debian GNU/Linux

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 avatar Jun 18 '19 10:06 yottanami

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 avatar Jun 19 '19 10:06 yottanami

As I checked it has a conflict with Query tag.

yottanami avatar Jun 24 '19 13:06 yottanami