NavigationBar fix for iPhone X, Xs Max, XR

[dongminkim]

I've found that NavigationBar dimension issues, especially on iPhone X.
So I try to fix them, and they seems to be fixed.

Simulators are positioned like this on screeenshots:

iPhone X	iPhone SE
iPhone Xs Max	iPhone XR

[Before]

[After]

[Test Source Code]

/* eslint-disable global-require */
import React, { Component } from 'react';
import {
  StatusBar,
} from 'react-native';
import { getStatusBarHeight } from 'react-native-status-bar-height';

import {
  Font, AppLoading,
} from 'expo';

import {
  View, Screen, NavigationBar,
  Icon, Button, Title, Caption,
} from '@shoutem/ui';

export default class App extends Component {
  static navigationOptions = {
    header: null,
  };

  state = {
    fontsAreLoaded: false,
  };

  async componentWillMount() {
    await Font.loadAsync({
      'Rubik-Black': require('../node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('../node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('../node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('../node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('../node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('../node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('../node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('../node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('../node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('../node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('../node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    });

    this.setState({ fontsAreLoaded: true });
  }

  render() {
    if (!this.state.fontsAreLoaded) {
      return <AppLoading />;
    }

    return (
      <Screen>
        <StatusBar backgroundColor="white" barStyle="dark-content" />
        <NavigationBar
          styleName="inline"
          leftComponent={<Button><Icon name="sidebar" /></Button>}
          centerComponent={<Title>NavigationBar</Title>}
          style={{
            container: {
              backgroundColor: 'lightpink',
            },
            componentsContainer: {
              backgroundColor: 'hotpink',
            },
            statusBar: {
              height: getStatusBarHeight(),
              backgroundColor: 'clear',
            },
          }}
        />
        <View>
          <Title>Hello</Title>
          <Caption>
            getStatusBarHeight() =
            {getStatusBarHeight()}
          </Caption>
        </View>
      </Screen>
    );
  }
}

[simpleminds619]

I am also facing this issue. Can we prioritize this PR and make this fix available soon please?

[dongminkim]

I've tested commit c87ba00.
Simulators are positioned like this on the screeenshot:

iPhone 11 Pro	iPhone 8
iPhone 11 Pro Max	iPhone 11