How to use react-native-iphone-x-helper - 10 common examples

// dismissed
      }
    } catch (error) {
      alert(error.message);
      console.log(error.message);
    }
  }
}

function mapStateToProps(state) {
  return state;
}

const styles = StyleSheet.create({
  container: {
    paddingTop: getStatusBarHeight(true),
    flex: 1,
    backgroundColor: Colors.backgroundColor,
  },
});

export default connect(mapStateToProps, {})(InviteScreen);

// @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 {

import React from 'react';
import {
  Animated,
  Dimensions,
  Platform,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { withNavigation, HeaderBackButton } from 'react-navigation';
import { getInset, getStatusBarHeight } from 'react-native-safe-area-view';
import { isIphoneX } from 'react-native-iphone-x-helper';

// @todo: make this work properly when in landscape
const hasNotch = isIphoneX();

const APPBAR_HEIGHT = Platform.OS === 'ios' ? 50 : 56;
const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;

@withNavigation
export default class Header extends React.PureComponent {
  constructor(props) {
    super(props);

    // @todo: this is static and we don't know if it's visible or not on iOS.
    // need to use a more reliable and cross-platform API when one exists, like
    // LayoutContext. We also don't know if it's translucent or not on Android
    // and depend on react-native-safe-area-view to tell us.
    const ANDROID_STATUS_BAR_HEIGHT = getStatusBarHeight
      ? getStatusBarHeight()
      : StatusBar.currentHeight;

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

    const buttonWidth = 36;
    return (

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);