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

React Native

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

バージョン

背景

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

関連PR

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

備忘録

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