react-native-af-video-player
react-native-af-video-player copied to clipboard
Removing header on full screen
- [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
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.
As I checked it has a conflict with Query tag.