Skip to content

Instantly share code, notes, and snippets.

@m-tymchyk
Last active July 5, 2021 22:36
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save m-tymchyk/a7bd64ff2ee2844a4890de0aa6925fc0 to your computer and use it in GitHub Desktop.
Save m-tymchyk/a7bd64ff2ee2844a4890de0aa6925fc0 to your computer and use it in GitHub Desktop.
React Native / How to determine if on iPhone X or XR
// is-iphone-x.js
import { Dimensions, Platform } from 'react-native';
export function isIphoneX() {
const dim = Dimensions.get('window');
return (
// This has to be iOS
Platform.OS === 'ios' &&
// Check either, iPhone X or XR
(isIPhoneXSize(dim) || isIPhoneXrSize(dim))
);
}
export function isIPhoneXSize(dim) {
return dim.height == 812 || dim.width == 812;
}
export function isIPhoneXrSize(dim) {
return dim.height == 896 || dim.width == 896;
}
// --- main.js Example
import { isIphoneX } from './is-iphone-x'
const HEADER_SIZE = isIphoneX() ? 130 : 100;
@romreed
Copy link

romreed commented Jan 26, 2019

// is-iphone-x.js

import { Dimensions, Platform } from 'react-native';

export function isIphoneX() {
const dim = Dimensions.get('window');

return (
// This has to be iOS
Platform.OS === 'ios' &&
(isIPhoneXSize(dim) || isIPhoneXrSize(dim))
);
}

export function isIPhoneXSize(dim) {
return dim.height == 812 || dim.width == 812;
}

export function isIPhoneXrSize(dim) {
return dim.height == 896 || dim.width == 896;
}

// --- main.js Example

import { isIphoneX } from './is-iphone-x'

const HEADER_SIZE = isIphoneX() ? 130 : 100;

@m-tymchyk
Copy link
Author

@romreed, thank you. Fixed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment