Created
April 13, 2020 21:00
-
-
Save jesster2k10/6a25236328f9ff6992da29d7c24a76b7 to your computer and use it in GitHub Desktop.
React Native Device Size
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import {Dimensions, Platform} from 'react-native' | |
const window = Dimensions.get('window') | |
const {width, height} = window | |
type DeviceSize = | |
| 'xsmall' | |
| 'small' | |
| 'normal' | |
| 'large' | |
| 'xlarge' | |
| 'unknown' | |
| 'default' | |
export function selectDevice<T>( | |
selection: {[size in DeviceSize]?: T} & {default: T}, | |
) { | |
const size = getDeviceSize() | |
const attr = selection[size] | |
return attr || selection.default | |
} | |
export function getDeviceSize(): DeviceSize { | |
if (Platform.OS === 'ios') { | |
if ((width <= 320 && height <= 480) || (width <= 480 && height <= 320)) { | |
// iPhone 4 spec | |
return 'xsmall' | |
} else if ( | |
(width <= 320 && height <= 568) || | |
(width <= 568 && height <= 320) | |
) { | |
// iPhone 5 spec | |
return 'small' | |
} else if ( | |
(width <= 375 && height <= 667) || | |
(width <= 667 && height <= 375) | |
) { | |
// iPhone 6 spec | |
return 'normal' | |
} else if ( | |
(width <= 414 && height <= 736) || | |
(width <= 736 && height <= 414) | |
) { | |
// iPhone 6 plus spec | |
return 'large' | |
} | |
// greater then iPhone 6 plus, such as tablets | |
return 'xlarge' | |
} else if (Platform.OS === 'android') { | |
// size spec from: https://developer.android.com/guide/practices/screens_support.html | |
// xlarge screens are at least 960dp x 720dp | |
// large screens are at least 640dp x 480dp | |
// normal screens are at least 470dp x 320dp | |
// small screens are at least 426dp x 320dp | |
if ((width >= 960 && height >= 720) || (width >= 720 && width >= 960)) { | |
return 'xlarge' | |
} else if ( | |
(width >= 640 && height >= 480) || | |
(width >= 480 && height >= 640) | |
) { | |
return 'large' | |
} else if ( | |
(width >= 470 && height >= 320) || | |
(width >= 320 && height >= 470) | |
) { | |
return 'normal' | |
} else if ( | |
(width >= 426 && height >= 320) || | |
(width >= 320 && height >= 426) | |
) { | |
return 'small' | |
} | |
return 'xsmall' | |
} | |
return 'unknown' | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment