How to use the react-native-iphone-x-helper.getStatusBarHeight function in react-native-iphone-x-helper

// @flow
import {getStatusBarHeight} from 'react-native-iphone-x-helper';

export const NavBarHeight = 56 + getStatusBarHeight();

import TitleBar from "miot/ui/TitleBar";
import React from 'react';
import { Dimensions, ScrollView, StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';

/**
 * iOS: windowHeight === screenHeight
 * android: screenHeight - windowHeight = 底部导航条（非全面屏下虚拟按键）的高度
 */
const { width: windowWidth, height: windowHeight } = Dimensions.get('window'); // 视窗尺寸
const { width: screenWidth, height: screenHeight } = Dimensions.get('screen'); // 屏幕尺寸
const statusBarHeight = getStatusBarHeight(true); // 状态栏高度
const titleBarHeight = 44; // 顶部导航栏的高度，在 `TitleBar` 中有定义 TODO: TitleBar 提供静态方法获取导航栏高度
const backgroundContentHeight = 400; // 背景层的高度
const safeAreaHeight = 0; // 安全区域的高度
const contentInsetBottom = backgroundContentHeight + safeAreaHeight; // ScrollView 内容固定的位置
const scrollViewHeight = windowHeight - statusBarHeight - titleBarHeight; // ScrollView 的高度
const adjustOffset = 34; // 微调的高度

/**
 * @author Geeook
 * @name Parallax iOS demo
 * @description ScrollView 透明背景，交互方案
 * 基本满足需求，存在以下小问题
 * 1. 在 ScrollView 吸附在顶部时，继续往上滑动，iOS 自带的 bounce 效果会使整个 ScrollView 往下 bounce 一段距离。 weird？
 *  为了解决这个问题，在计算底部白色背景高度时，增加一点微调的高度 adjustOffset 即可破解。 awesome！
 */
export default class ParallaxIOS extends React.Component {

export const WithoutSnap = ({ navigation }: NavigationScreenConfigProps) => (
  <>
    
     navigation.goBack()} />}
      headerHeight={100}
      statusBarHeight={getStatusBarHeight(true)}
      headerContainerBackgroundColor={'green'}
      disableHeaderSnap={true}
    >
      
  
)

break;
      case 'artist':
        track = this.props.searchResultsByArtist.find(obj => obj.trackAddress === trackAddress);
        break;
      case 'recent':
        track = this.props.lastPlayed.find(obj => obj.trackAddress === trackAddress);
        break;
      case 'tip':
        track = this.props.lastTipped.find(obj => obj.trackAddress === trackAddress);
        break;
      default:
        track = this.props.currentTrack;
        break;
    }
    return (
        

import { StatusBar } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper';
import { deviceUtils } from '../../utils';
import { colors } from '../../styles';

const statusBarHeight = getStatusBarHeight(true);

const expand = {};
expand.translateY = deviceUtils.dimensions.height;

export const sheetVerticalOffset = statusBarHeight;

const exchangeStyleInterpolator = ({
  current: { progress: current },
  layouts: { screen },
}) => {
  const backgroundOpacity = current.interpolate({
    inputRange: [-1, 0, 0.975, 2],
    outputRange: [0, 0, 1, 1],
  });

  const translateY = current.interpolate({

return block([
    cond(clockRunning(clock), 0, [
      set(state.finished, 0),
      set(state.time, 0),
      set(state.position, value),
      set(state.velocity, 0),
      set(config.toValue, dest),
      startClock(clock),
    ]),
    springFill(clock, state, config),
    cond(state.finished, stopClock(clock)),
    set(value, state.position),
  ]);
}

const statusBarHeight = getStatusBarHeight(true);

const Container = styled(Column)`
  background-color: ${colors.transparent};
`;

const SheetContainer = styled(Column)`
  border-radius: 20px;
  background-color: ${colors.white};
  height: 420px;
  overflow: hidden;
  width: 100%;
`;

class AvatarBuilder extends Component {
  constructor(props) {
    super(props);

render() {
    const {navigation} = this.props;
    redirectToPlayer = navigation.getParam('redirectToPlayer', false);
    const lastTipped = this.props.lastTipped.slice().reverse();
    return (

import { get } from 'lodash';
import { Animated, Easing } from 'react-native';
import { getStatusBarHeight, isIphoneX } from 'react-native-iphone-x-helper';
import { updateTransitionProps } from '../../redux/navigation';
import store from '../../redux/store';
import { colors } from '../../styles';
import { deviceUtils, statusBar } from '../../utils';

const distanceFromTop = 14;
const statusBarHeight = getStatusBarHeight(true);

export const sheetVerticalOffset = distanceFromTop + statusBarHeight;
export const transitionName = 'sheet';

export default function sheet(navigation, transitionProps, prevTransitionProps) {
  const nextEffect = get(transitionProps, 'scene.descriptor.options.effect');
  const prevEffect = get(prevTransitionProps, 'scene.descriptor.options.effect');
  const nextIndex = get(transitionProps, 'index');
  const prevIndex = get(prevTransitionProps, 'index', nextIndex - 1);

  if (nextEffect === transitionName) {
    statusBar.setBarStyle('light-content', true);
  }

  if (prevEffect === transitionName) {
    statusBar.setBarStyle('dark-content', true);

SendContactList,
  SendHeader,
  SendTransactionSpeed,
} from '../components/send';
import {
  withAccountData,
  withAccountSettings,
  withDataInit,
  withTransitionProps,
  withUniqueTokens,
} from '../hoc';
import { borders, colors } from '../styles';
import { deviceUtils, gasUtils, isNewValueForPath } from '../utils';
import { getLocalContacts } from '../handlers/localstorage/contacts';

const statusBarHeight = getStatusBarHeight(true);

const Container = styled(Column)`
  background-color: ${colors.transparent};
  height: 100%;
`;

const SheetContainer = styled(Column)`
  ${borders.buildRadius('top', 16)};
  background-color: ${colors.white};
  height: 100%;
  top: ${statusBarHeight};
`;

class SendSheet extends Component {
  static propTypes = {
    allAssets: PropTypes.array,