├── .npmignore ├── index.js ├── yarn.lock ├── docs └── ScreenSwitcher.gif ├── package.json ├── LICENSE ├── .gitignore ├── src ├── deviceSizes.js └── ScreenSwitcher.js └── README.md /.npmignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | docs/ 3 | node_modules/ 4 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import ScreenSwitcher from './src/ScreenSwitcher'; 2 | 3 | export default ScreenSwitcher; 4 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | -------------------------------------------------------------------------------- /docs/ScreenSwitcher.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calvium/react-native-device-screen-switcher/HEAD/docs/ScreenSwitcher.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-device-screen-switcher", 3 | "version": "0.2.0", 4 | "description": "Run app in iPhone 6 Plus simulator and auto-scale the viewport to iPhone 4, 5, and 6 sizes while running.", 5 | "main": "index.js", 6 | "scripts": {}, 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/calvium/react-native-device-screen-switcher.git" 10 | }, 11 | "keywords": [ 12 | "React", 13 | "Native", 14 | "Screen", 15 | "Layout", 16 | "Test", 17 | "Debug" 18 | ], 19 | "author": "Ben Clayton (https://www.calvium.com)", 20 | "license": "MIT", 21 | "bugs": { 22 | "url": "https://github.com/calvium/react-native-device-screen-switcher/issues" 23 | }, 24 | "homepage": "https://github.com/calvium/react-native-device-screen-switcher#readme", 25 | "dependencies": { 26 | "prop-types": "*" 27 | }, 28 | "peerDependencies": { 29 | "react-native": ">=0.43.0", 30 | "react": "*" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 calvium 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (http://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # Typescript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # WebStorm 63 | .idea/ 64 | -------------------------------------------------------------------------------- /src/deviceSizes.js: -------------------------------------------------------------------------------- 1 | // https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 2 | const deviceSizes = { 3 | 'iPhone 4': { 4 | windowPhysicalPixels: { 5 | width: 640, 6 | height: 960, 7 | scale: 2, 8 | }, 9 | }, 10 | 'iPhone 5': { 11 | windowPhysicalPixels: { 12 | width: 640, 13 | height: 1136, 14 | scale: 2, 15 | }, 16 | }, 17 | 'iPhone 6, 6s, 7, 8': { // 6s, 7, 8 18 | windowPhysicalPixels: { 19 | width: 750, 20 | height: 1334, 21 | scale: 2, 22 | }, 23 | }, 24 | 'iPhone 6 Plus, 6s+, 7+, 8+': { // 6s+, 7+, 8+ 25 | windowPhysicalPixels: { 26 | width: 1242, 27 | height: 2208, 28 | scale: 3, 29 | }, 30 | }, 31 | 'iPhone X, XS, 11 Pro': { // note: this won't have the bezel 32 | windowPhysicalPixels: { 33 | width: 1125, 34 | height: 2436, 35 | scale: 3, 36 | }, 37 | }, 38 | '11, XR': { 39 | windowPhysicalPixels: { 40 | width: 828, 41 | height: 1792, 42 | scale: 2, 43 | }, 44 | }, 45 | '11 Pro Max, XS Max': { 46 | windowPhysicalPixels: { 47 | width: 1242, 48 | height: 2688, 49 | scale: 3, 50 | }, 51 | }, 52 | }; 53 | 54 | export default deviceSizes; 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-device-screen-switcher 2 | 3 | Testing your React Native UI layouts on different screen sizes can be quite time-consumning. 4 | 5 | This library aims to make this much easier by allowing the run-time switching of the main app viewport to match the sizes of different devices. 6 | 7 | > This library requires React Native 0.43.0 or above. For versions older versions of React Native (from 0.34.0 up), use the 0.0.4 release. 8 | 9 | ![GIF of the library in action](docs/ScreenSwitcher.gif) 10 | 11 | # Usage 12 | 13 | ``` 14 | npm i -S react-native-device-screen-switcher 15 | ``` 16 | 17 | In your root-level component, wrap the root component returned by `render()` with ``. 18 | 19 | ```js 20 | import ScreenSwitcher from 'react-native-device-screen-switcher'; 21 | 22 | class MyRoot extends Component { 23 | ... 24 | render() { 25 | return ( 26 | 27 | 28 | 29 | ) 30 | } 31 | } 32 | ``` 33 | 34 | - Run your app in Debug mode. For best results run on the iPhone 11 Pro Max simulator: 35 | 36 | ```bash 37 | react-native run-ios --simulator="iPhone Pro Max" 38 | ``` 39 | 40 | - You'll see a 'Switch' button at the bottom-right of the screen. 41 | - Tap this button to bring up a menu of the available screen sizes. 42 | - Make your selection. 43 | 44 | > The viewport is resized to the correct size. 45 | 46 | Additionally, the app will render images using the density appropriate to the simulated device (@3x on iPhone 6 Plus, @2x on most others). 47 | 48 | - Notes: Dimensions.get('window') will now return the size of the simulated device. So long as you have followed React Native's documentation and **not** cached these values, your app will continue to render with the correct simulated sizes. 49 | 50 | 51 | To hide the `Switch` button use the `hideButton` prop on ScreenSwitcher, e.g. 52 | 53 | ```js 54 | 55 | ... 56 | 57 | ``` 58 | 59 | For scale screen down to fit physical device dimensions, use `scaleToFit` prop, e.g. 60 | 61 | ```js 62 | 63 | ... 64 | 65 | ``` 66 | 67 | If you want to scale up to fill device screen, use 'scaleUp' prop with addition to `scaleToFit`, e.g. 68 | 69 | ```js 70 | 71 | ... 72 | 73 | ``` 74 | 75 | # In Production 76 | 77 | In production builds the `` component simply passes through the child components without changing them using the same method as the `react-redux` `` component. 78 | 79 | This means it's not necessary to remove `` from your root component for production builds. 80 | 81 | # Similar libraries 82 | 83 | This library was inspired by https://github.com/machadogj/react-native-layout-tester, which performs a similar function by running your app on an iPad. 84 | 85 | However, that library required that you did not use React Native's `Dimensions` system, but used their own alternative system. It also required you to set your iPhone app to be Universal in Xcode. Neither of these are the case here. 86 | -------------------------------------------------------------------------------- /src/ScreenSwitcher.js: -------------------------------------------------------------------------------- 1 | import React, {Component, Children} from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { 5 | View, 6 | Dimensions, 7 | TouchableHighlight, 8 | StyleSheet, 9 | ActionSheetIOS, 10 | Text, 11 | Platform, 12 | } from 'react-native'; 13 | 14 | import deviceSizes from './deviceSizes'; 15 | 16 | const styles = StyleSheet.create({ 17 | buttonContainer: {position: 'absolute', right: 0, bottom: 0}, 18 | buttonText: {padding: 5, color: 'white', backgroundColor: 'rgba(0,0,0,0.5)'}, 19 | outer: { 20 | flex: 1, 21 | backgroundColor: '#003355', 22 | }, 23 | }); 24 | 25 | /** 26 | * Force resize of Dimensions.get by using the setter. 27 | */ 28 | function performResize(deviceInfo, deviceName, scaleToFit, scaleUp) { 29 | // Make sure you are using copy of deviceInfo.windowPhysicalPixels 30 | const windowPhysicalPixels = { ...deviceInfo.windowPhysicalPixels }; 31 | const { width, height, scale } = windowPhysicalPixels; 32 | const w_points = Math.round(width / scale); // round because of JS 33 | const h_points = Math.round(height / scale); // round because of JS 34 | let infoSuffix = ''; 35 | 36 | windowPhysicalPixels.fontScale = device_font_scale; 37 | 38 | console.log({ width, height, scale, w_points, h_points }); 39 | 40 | // Scale to fit if needed 41 | if (scaleToFit && (w_points != device_width || h_points != device_height)) { 42 | const w_ratio = w_points / device_width; 43 | const h_ratio = h_points / device_height; 44 | const min_ratio = w_ratio < h_ratio ? w_ratio : h_ratio; 45 | const max_ratio = w_ratio > h_ratio ? w_ratio : h_ratio; 46 | 47 | if ((max_ratio <= 1 && scaleUp) || min_ratio > 1 || max_ratio > 1) { 48 | const ratio = min_ratio > 1 ? min_ratio : max_ratio; 49 | console.log({ ratio }); 50 | 51 | windowPhysicalPixels.width = Math.round(windowPhysicalPixels.width / ratio); 52 | windowPhysicalPixels.height = Math.round(windowPhysicalPixels.height / ratio); 53 | windowPhysicalPixels.fontScale = windowPhysicalPixels.fontScale / ratio; 54 | } 55 | 56 | console.log(`${device_width}x${device_height}`, { w_ratio, h_ratio, min_ratio, max_ratio }); 57 | 58 | const { width: w, height: h } = windowPhysicalPixels; 59 | infoSuffix = ` (scaled to ${w}x${h})`; 60 | } 61 | 62 | windowPhysicalPixels.deviceName = deviceName; 63 | 64 | // Force RN to re-set the Dimensions sizes 65 | Dimensions.set({windowPhysicalPixels}); 66 | console.log(`Resizing window to physical pixels ${width}x${height}${infoSuffix}`, { ...windowPhysicalPixels }); 67 | // TODO: Android uses screenPhysicalPixels - see https://github.com/facebook/react-native/blob/master/Libraries/Utilities/Dimensions.js 68 | } 69 | 70 | // Disable if Production or Android (Android support coming later) 71 | const isActive = Platform.OS === 'ios' && __DEV__; 72 | 73 | // Remember real device dimensions 74 | const { width: device_width, height: device_height, fontScale: device_font_scale } = Dimensions.get('screen'); 75 | 76 | /** 77 | * Insert this component at the root of your app to 78 | * add a 'Switch' 79 | */ 80 | class ScreenSwitcher extends Component { 81 | constructor(props) { 82 | super(props); 83 | 84 | // Do nothing in production mode 85 | if (!isActive) { 86 | return; 87 | } 88 | 89 | this.state = {screenSwitcherDeviceName: 'Default'}; 90 | 91 | this.resize = () => { 92 | const deviceNames = Object.keys(deviceSizes); 93 | const options = [...deviceNames, 'Cancel']; 94 | const cancelButtonIndex = deviceNames.length; 95 | 96 | ActionSheetIOS.showActionSheetWithOptions( 97 | { 98 | title: 'Simulate Device Screen Size', 99 | options, 100 | cancelButtonIndex, 101 | }, 102 | index => { 103 | if (index === cancelButtonIndex) { 104 | return; 105 | } 106 | 107 | const deviceName = deviceNames[index]; 108 | const deviceInfo = deviceSizes[deviceName]; 109 | 110 | if (!deviceInfo) { 111 | return; 112 | } 113 | 114 | performResize(deviceInfo, deviceName, this.props.scaleToFit, this.props.scaleUp); 115 | 116 | this.setState({screenSwitcherDeviceName: deviceName}); // force re-render of this component 117 | } 118 | ); 119 | }; 120 | } 121 | 122 | render() { 123 | // In production, just pass through children unchanged 124 | if (!isActive) { 125 | return Children.only(this.props.children); 126 | } 127 | 128 | // In dev mode, resize the main content 129 | const {children, hideButton} = this.props; 130 | 131 | const {width, height, fontScale} = Dimensions.get('window'); 132 | console.log({width, height, fontScale, device_font_scale}); 133 | 134 | return ( 135 | 136 | 137 | {children} 138 | 139 | {hideButton 140 | ? undefined 141 | : 142 | 143 | {this.state.screenSwitcherDeviceName || 'Switch'} 144 | 145 | } 146 | 147 | ); 148 | } 149 | } 150 | 151 | if (isActive) { 152 | // Use context to force re-renders for our children when screen is resized. Ensures that images are rendered with 153 | // correct density (2x, @3x) 154 | ScreenSwitcher.prototype.getChildContext = function() { 155 | const {screenSwitcherDeviceName} = this.state; 156 | return {screenSwitcherDeviceName}; 157 | }; 158 | 159 | ScreenSwitcher.childContextTypes = { 160 | /** 161 | * Used to force re-render of children when screen is resized 162 | */ 163 | screenSwitcherDeviceName: PropTypes.string, 164 | }; 165 | } 166 | 167 | ScreenSwitcher.defaultProps = { 168 | hideButton: false, 169 | scaleToFit: false, 170 | scaleUp: false, 171 | }; 172 | 173 | ScreenSwitcher.propTypes = { 174 | children: PropTypes.node.isRequired, 175 | hideButton: PropTypes.bool, 176 | scaleToFit: PropTypes.bool, 177 | scaleUp: PropTypes.bool, 178 | }; 179 | 180 | export default ScreenSwitcher; 181 | --------------------------------------------------------------------------------