Error resizing header on your second and third page in (reactnative navigation drawer)?

Question

Header size on the first page is correct, but unwanted header size changes occur on the second and third pages?

A strange thing if you rotate the phone everything will be correct.

Maybe this is because it is in their home books or it should be added to the Java code snippet project files. This problem only occurs in a react-native-cli project. Not at Expo CLI

Code of this page

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { Container, Content } from 'native-base'; 
import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator, DrawerItems } from 'react-navigation-drawer';
import { createStackNavigator } from 'react-navigation-stack'; 
  

const styles = StyleSheet.create({
    MainContainer: {
        flex: 1,
        paddingTop: 20,
        alignItems: 'center',
        marginTop: 50,
        justifyContent: 'center',
    },
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#424242'
    },
    text: {
        color: '#fff',
        fontSize: 14,
        marginTop: 5
    },    
    drawerBody: {
        padding: 15,
        height: 130,
        width: 300,
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        backgroundColor: "#517da2",
    },
    icon: {
        tintColor: '#F50057'
    }
});

class SimplyScreen extends Component { 
    render() {
      return (
        <View style={styles.MainContainer}>
          <Text style={{ fontSize: 23 }}> Simply Screen </Text>
        </View>
      );
    }
}

const CustomDrawerContentComponent = (props) => (
    <Container> 
        <Content>
            <DrawerItems {...props} />
        </Content>
    </Container>
);


class NavigationDrawerStructure extends Component {
    toggleDrawer = () => { 
        this.props.navigationProps.toggleDrawer();
    };
    render() {
        return (
            <View style={{ flexDirection: 'row'}}>
                <TouchableOpacity onPress={this.toggleDrawer.bind(this)} style={{ marginRight: 20 }}> 
                    <Text style={{ color:'white' }}> Menu </Text> 
                </TouchableOpacity>
            </View>
        );
    }
}


const FirstActivity_StackNavigator = createStackNavigator({ 
    First: {
        screen: SimplyScreen,
        navigationOptions: ({ navigation }) => ({
            title: 'Demo Screen 1 Onl',
            headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
                backgroundColor: '#517da2',
            },
            headerTintColor: '#fff',
        }),
    }
});


const Screen2_StackNavigator = createStackNavigator({ 
    Second: {
        screen: SimplyScreen,
        navigationOptions: ({ navigation }) => ({
            title: 'Demo Screen 2',
            headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
                backgroundColor: '#517da2',
            },
            headerTintColor: '#fff',
        }),
    }
});


const Screen3_StackNavigator = createStackNavigator({ 
    Third: {
        screen: SimplyScreen,
        navigationOptions: ({ navigation }) => ({
            title: 'Demo Screen 3',
            headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
            headerStyle: {
                backgroundColor: '#517da2'
            },
            headerTintColor: '#fff',
        }),
    }
});


const DrawerNavigatorMain = createDrawerNavigator({
    Screen1: {
        screen: FirstActivity_StackNavigator,
        navigationOptions: {
            drawerLabel: 'Demo Screen 1',
            safeAreaInsets: { top: 0 }
        }
    },

    Screen2: {
        screen: Screen2_StackNavigator,
        navigationOptions: {
            drawerLabel: 'Demo Screen 2',
            safeAreaInsets: { top: 0 }
        },
    },

    Screen3: {
        screen: Screen3_StackNavigator,
        navigationOptions: {
            drawerLabel: 'Demo Screen 3',
            safeAreaInsets: { top: 0 }
        },
    }
},{
    contentOptions: {
        headerStyle: {
            backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: 'white',
        } 
    },
    drawerWidth: 300, 
    drawerBackgroundColor: '#262A2C',  
    contentComponent: CustomDrawerContentComponent
});

export default createAppContainer(DrawerNavigatorMain);