How to remove header and footer from certain screens

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>


        )
    }
}