How to resolve header gap when integrate "NativeBase" ActionSheet into React Native project?

Software Required
- NPM version 6.4.1
- expo version 2.6.14
- Atom 1.34.0
- NativeBase 2.10.0. Please refer to link
- react-navigation version 3.1.2

Problems

• Run through NativeBase tutorial on ActionSheet, encounter the gap at the header. Please refer to the screenshot below.

Steps

• Below are the source code of my App.js

import React from "react";
import { Root } from "native-base";
import {createStackNavigator, createAppContainer} from "react-navigation";
import ActionSheetIconExample from './src/component/ActionSheetIconExample';

const NavStack = createStackNavigator(
  {
    Home: { screen: ActionSheetIconExample }
  }
);

const AppNavigator = createAppContainer(NavStack);

export default () =>
  <Root>
    <AppNavigator />
  </Root>;

• In order to resolve this issue, added a new code as shown below

headerMode: 'none',

• Below are the final source code that work

import React from "react";
import { Root } from "native-base";
import {createStackNavigator, createAppContainer} from "react-navigation";
import ActionSheetIconExample from './src/component/ActionSheetIconExample';

const NavStack = createStackNavigator(
  {
    Home: { screen: ActionSheetIconExample }
  },
  {
    headerMode: 'none',
  }
);

const AppNavigator = createAppContainer(NavStack);

export default () =>
  <Root>
    <AppNavigator />
  </Root>;

• It will work like a charm after the single line of code being inserted. The while gap is missing.