How to remove header and footer from certain screens - reactjs

Question

I need to remove the footer and header from login screen. I used header : null to remove the header but when the header gets removed a footer appears from nowhere. When the header is visible the footer is invisible.
I need to remove both not just one.
I am new to react-native. I would appreciate any help.
I tried tabBarVisible : false and it did not work
import React, {Fragment} from 'react';
import { createStackNavigator } from "react-navigation";
import HomeScreen from '../Screens/HomeScreen';
import PS4Screen from '../Screens/PS4Screen';
import XboxScreen from '../Screens/XboxScreen';
import LoginScreen from '../Screens/LoginScreen';
export default createStackNavigator(
{
HomeScreen : {screen : HomeScreen},
PS4Screen : {screen : PS4Screen},
XboxScreen : {screen : XboxScreen},
LoginScreen: {
screen : LoginScreen,
navigationOptions: {
header: null,
tabBarVisible: false,
}
}
},
{
initialRouteName: "LoginScreen",
}
);
This is the Login Screen Code. There is not functionality just the UI.
import React, { Component } from 'react'
import { Text, StyleSheet, View, ImageBackground, Image, TextInput, TouchableOpacity } from 'react-native'
const styles = StyleSheet.create({
textcolour: {
color: 'white',
},
textinputbox: {
borderWidth:2,
width: 200,
borderColor: 'white',
borderRadius: 10,
backgroundColor: 'transparent'
},
loginandsignup:{
margin:10,
borderColor: 'white',
fontSize: 15,
backgroundColor: 'transparent',
fontWeight: 'bold',
}
})
export default class LoginScreen extends Component {
render() {
const { navigation } = this.props;
return (
<ImageBackground resizeMode='repeat' source={require('../Pictures/loginscreenbackground.jpeg')} style={{width:'100%', height:'100%', justifyContent:'center', }}>
<View style={{alignItems:'center'}}>
<Text style={ [ styles.textcolour, { fontSize: 22, fontWeight:'bold', margin:20} ] }> Welcome to Healthy Foods </Text>
<TextInput style={ [styles.textcolour, styles.textinputbox, { margin:10 } ] }> Username </TextInput>
<TextInput style={ [styles.textcolour, styles.textinputbox, { margin: 10 } ] }> Password </TextInput>
<TouchableOpacity onPress = { () => this.props.navigation.navigate('HomeScreen')} style={[{borderRadius: 10, borderColor: 'white', borderWidth: 2, margin: 10, marginTop: 30, width: 100, alignItems: 'center'}]} >
<Text style={ [ styles.textcolour, styles.loginandsignup ] }> Login </Text>
</TouchableOpacity>
<TouchableOpacity style={[{borderRadius: 10, borderColor: 'white', borderWidth: 2, margin: 5, width: 100, alignItems: 'center'}]}>
<Text style={ [ styles.textcolour, styles.loginandsignup ] }> Sign Up </Text>
</TouchableOpacity>
</View>
</ImageBackground>
)
}
}