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

render() {
    // const { state = {} } = this.props.navigation;
    // const { data = [someUser, someUser, someUser, someUser] } =
    //   state.params || {};

    const buttonWidth = 36;
    return (

render() {
    let statusBar = null;
    if (Platform.OS === 'ios') {
      statusBar = (

const bottomButtonView = createButtonView(this.props.options.bottomContainer.bottomButton);
    const topButtonView = createButtonView(this.props.options.bottomContainer.topButton);
    let codePushComponent;
    const self = this;
    if (this.props.options.codepush) {
      codePushComponent = (
         {
            self.codepush = codepush;
          }}
        />
      );
    }

    return (

import styled from "styled-components/native";
import { ifIphoneX, getStatusBarHeight } from "react-native-iphone-x-helper";
import { colors } from "../../styles";

export const Container = styled.View`
  margin-top: ${ifIphoneX(getStatusBarHeight(), 0)}px;
`;

export const Buttons = styled.View`
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 15px;
`;

interface Theme {
  theme: "light" | "dark";
}

export const TweetInput = styled.TextInput`
  margin: 0px 15px;
  font-size: 16px;

import { StyleSheet } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-x-helper';

const headerHeight = ifIphoneX(88, 60);

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: 'transparent' },
  headerContainer: {
    height: headerHeight,
  },
  headerComponentContainer: {
    height: headerHeight,
    alignItems: 'center',
    justifyContent: 'flex-end',
    paddingBottom: 12,
  },
  headline: {
    fontSize: 17,
    lineHeight: 22,
    fontWeight: '500',

displayed={displayed}
        height={height + ifIphoneX(18, 0)}
      >
        {this.renderBackButton()}
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    paddingTop: ifIphoneX(48, 30),
  },
  text: {
    fontSize: 18,
    color: 'white',
  },
  backContainer: {
    position: 'absolute',
    flexDirection: 'row',
    left: 0,
    top: 16,
  },
  backText: {
    paddingTop: 14,
    marginLeft: -10,
  },
});

render() {
    const { stories, events, url } = this.props;
    const { isPortrait, isMenuOpen, selectedKind, selectedStory } = this.state;

    const iPhoneXStyles = ifIphoneX(
      isPortrait
        ? {
            marginVertical: 30,
          }
        : {
            marginHorizontal: 30,
          },
      {}
    );

    const menuStyles = [
      style.menuContainer,
      {
        transform: [
          {
            translateX: isMenuOpen ? 0 : -DRAWER_WIDTH - 30,

initialNumToRender={21}
          numColumns={3}
          renderItem={this.renderItem}
          removeClippedSubviews={false}
          getItemLayout={this.getItemLayout}
        />
      
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: ifIphoneX(18, 0),
    paddingBottom: Constants.TOOLBAR_HEIGHT,
  },
  row: {
    justifyContent: 'center',
    margin: 1,
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 1,
  },
});

scrollToBottom
        alwaysShowSend
        inverted={false}
        maxInputLength={200}
        messages={transform}
        scrollToBottomComponent={CustomScrollToBottom}
        textInputProps={{ disable: true }}
        renderComposer={composerProps => }
        renderMessageText={CustomMessageText}
        renderBubble={CustomBubble}
        renderSend={CustomSend}
        renderInputToolbar={CustomInputToolbar}
        onSend={onSend}
        onPressAvatar={navigateToProfile}
        user={{ _id: user.id }}
        bottomOffset={ifIphoneX(20, -12)}
        keyboardShouldPersistTaps={null}
        listViewProps={{ showsVerticalScrollIndicator: false, style: { marginBottom: 16 } }}
      />
    );
  }

  return (

render() {
    const {
      displayed,
      title,
      height,
    } = this.props;

    return (
      
        {this.renderBackButton()}
        
      
    );
  }
}