react-native-iphone-x-helper がどのように iPhoneX を識別しているか

答えとしては、端末の画面サイズから、iPhoneX かどうか判定している

バージョン

• ptelad/react-native-iphone-x-helper : 1.0.3 / 1.2.0

背景

• (古いバージョンの react-native-iphone-x-helper を使用していた為) iPhoneXS Max を iPhoneX だと判定しなかった事が原因で、iPhoneXS Max の SafeArea のレイアウトが崩れる、という事があった

関連PR

• Add support for iPhone XR, XS and XS Max #9

react-native-iphone-x-helper の isIphoneX が何をやっているか

• 答え
  • 端末の画面サイズから、iPhoneX かどうか判定している

// バージョン: 1.2.0
// node_modules/react-native-iphone-x-helper/index.js

export function isIphoneX() {
    const dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        ((dimen.height === 812 || dimen.width === 812) || (dimen.height === 896 || dimen.width === 896))
    );
}

iPhoneXS Max シミュレータが iPhoneX として識別されなかった理由

• (前提)

  • iPhoneXS Max の画面サイズは 414x896

• 古いバージョンの react-native-iphone-x-helper では、画面サイズ 812 の端末のみを iPhoneX として認識していた

  • 896 の iPhoneXS Maxは iPhoneX として識別されなかった

• See: Add support for iPhone XR, XS and XS Max #9

// バージョン: 1.0.3

export function isIphoneX() {
    const dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        ((dimen.height === 812 || dimen.width === 812))
    );
})

備忘録

• 画面サイズの異なる新端末がリリースされた際は、このあたりのライブラリのバージョンアップが必要になる