├── .gitignore
├── DisplayDeviceUtil.h
├── package.json
├── LICENSE
├── DisplayDeviceUtil.m
├── display.js
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/DisplayDeviceUtil.h:
--------------------------------------------------------------------------------
1 | #import <RCTBridge.h>
2 | 
3 | @interface DisplayDeviceUtil : NSObject <RCTBridgeModule>
4 | 
5 | - (NSDictionary *)getDimensions;
6 | 
7 | @end
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-device-display",
 3 |   "version": "1.0.4",
 4 |   "private": false,
 5 |   "scripts": {
 6 |     "start": "node_modules/react-native/packager/packager.sh"
 7 |   },
 8 |   "peerDependencies": {
 9 |     "react-native": ">=0.6.0-rc || >=0.7.0-rc || >=0.8.0-rc || >=0.9.0-rc"
10 |   },
11 |   "description": "A simple way to create dynamic views through device and display detection, allowing the creation of adaptable and universal apps.",
12 |   "main": "display.js",
13 |   "devDependencies": {},
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/kkjdaniel/react-native-display-view.git"
17 |   },
18 |   "keywords": [
19 |     "react-component",
20 |     "react-native",
21 |     "ios",
22 |     "display",
23 |     "viewport",
24 |     "device",
25 |     "orientation"
26 |   ],
27 |   "author": "Karl Daniel <me@karldaniel.co.uk> (http://www.karldaniel.co.uk)",
28 |   "license": "BSD-3-Clause",
29 |   "bugs": {
30 |     "url": "https://github.com/kkjdaniel/react-native-display-view/issues"
31 |   },
32 |   "homepage": "https://github.com/kkjdaniel/react-native-display-view#readme"
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2015, Karl Daniel
 2 | All rights reserved.
 3 | 
 4 | Redistribution and use in source and binary forms, with or without
 5 | modification, are permitted provided that the following conditions are met:
 6 | 
 7 | * Redistributions of source code must retain the above copyright notice, this
 8 |   list of conditions and the following disclaimer.
 9 | 
10 | * Redistributions in binary form must reproduce the above copyright notice,
11 |   this list of conditions and the following disclaimer in the documentation
12 |   and/or other materials provided with the distribution.
13 | 
14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
24 | 


--------------------------------------------------------------------------------
/DisplayDeviceUtil.m:
--------------------------------------------------------------------------------
 1 | #import "DisplayDeviceUtil.h"
 2 | #import "RCTBridge.h"
 3 | #import "RCTEventDispatcher.h"
 4 | #import "RCTUtils.h"
 5 | 
 6 | @implementation DisplayDeviceUtil
 7 | 
 8 | RCT_EXPORT_MODULE();
 9 | 
10 | @synthesize bridge = _bridge;
11 | 
12 | - (instancetype)init {
13 |   if ((self = [super init])) {
14 |     [[NSNotificationCenter defaultCenter] addObserver:self
15 |                                              selector:@selector(displayOrientationDidChange:)
16 |                                                  name:UIDeviceOrientationDidChangeNotification
17 |                                                object:nil];
18 |   }
19 |   
20 |   return self;
21 | }
22 | 
23 | - (void)dealloc {
24 |   [[NSNotificationCenter defaultCenter] removeObserver:self];
25 | }
26 | 
27 | - (void)displayOrientationDidChange:(NSNotification*)note {
28 |   CGSize frameSize = [UIScreen mainScreen].applicationFrame.size;
29 |   
30 |   /* For Non-Orientation Dependant Versions */
31 |   if ((NSFoundationVersionNumber <= NSFoundationVersionNumber_iOS_7_1)
32 |       && UIInterfaceOrientationIsLandscape([UIApplication sharedApplication].statusBarOrientation)) {
33 |     frameSize = CGSizeMake(frameSize.height, frameSize.width);
34 |   }
35 |   
36 |   UIDeviceOrientation deviceOrientation = [[UIDevice currentDevice] orientation];
37 |   NSDictionary *dimensions = @{ @"width": @(frameSize.width), @"height": @(frameSize.height),      @"orientation": @(deviceOrientation) };
38 |   NSLog(@"%@", dimensions);
39 |   [_bridge.eventDispatcher sendDeviceEventWithName:@"orientationDidChange" body:dimensions];
40 | }
41 | 
42 | - (NSDictionary *)constantsToExport {
43 |   BOOL isPhone = [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone;
44 |   BOOL isTablet = [[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad;
45 |   
46 |   return @{
47 |     @"isPhone" : @(isPhone),
48 |     @"isTablet" : @(isTablet)
49 |   };
50 | }
51 | 
52 | @end
53 | 


--------------------------------------------------------------------------------
/display.js:
--------------------------------------------------------------------------------
  1 | var {
  2 |   DeviceEventEmitter,
  3 |   Dimensions,
  4 |   NativeModules
  5 | } = require('react-native');
  6 | 
  7 | var DeviceUtil = NativeModules.DisplayDeviceUtil;
  8 | 
  9 | class Display {
 10 | 
 11 |   updateProps(newWidth, newHeight) {
 12 |     this.width = newWidth;
 13 |     this.height = newHeight;
 14 |   }
 15 | 
 16 |   constructor() {
 17 |     this.width = Dimensions.get("window").width;
 18 |     this.height = Dimensions.get("window").height;
 19 |     //Enable console messages by changing to true: Display.verbose = true
 20 |     this.verbose = false;
 21 |   }
 22 | 
 23 |   percentage(type, value) {
 24 |     if (type == 'width') {
 25 |       return value * (this.height / 100);
 26 |     } else if (type == 'height') {
 27 |       return value * (this.width / 100);
 28 |     } else {
 29 |       return 'Invalid Type (width / height)';
 30 |     }
 31 |   }
 32 | 
 33 |   isPortrait() {
 34 |     if (this.width < this.height) {
 35 |       return true;
 36 |     } else {
 37 |       return false;
 38 |     }
 39 |   }
 40 | 
 41 |   isLandscape() {
 42 |     if (this.width > this.height) {
 43 |       return true;
 44 |     } else {
 45 |       return false;
 46 |     }
 47 |   }
 48 | 
 49 |   isTablet() {
 50 |     return DeviceUtil.isTablet;
 51 |   }
 52 | 
 53 |   isPhone() {
 54 |     return DeviceUtil.isPhone;
 55 |   }
 56 | 
 57 |   onOrientationDidChange(handler) {
 58 |     var main = this;
 59 |     return DeviceEventEmitter.addListener(
 60 |       'orientationDidChange',
 61 |       function(newDimensions) {
 62 |         main.updateProps(newDimensions.width, newDimensions.height);
 63 |         var orientation = main.updateOrientation(newDimensions.orientation);
 64 |         handler(newDimensions.width, newDimensions.height, orientation);
 65 |       }
 66 |     );
 67 |   }
 68 |   updateOrientation(orientation) {
 69 |     var o = {};
 70 |     switch (orientation) {
 71 |       case 1:
 72 |         o = {
 73 |           current: 'portrait',
 74 |           idle: false,
 75 |           facing: ''
 76 |         };
 77 |         break;
 78 |       case 2:
 79 |         o = {
 80 |           current: 'portrait',
 81 |           idle: false,
 82 |           facing: ''
 83 |         };
 84 |         break;
 85 |       case 3:
 86 |         o = {
 87 |           current: 'landscape',
 88 |           idle: false,
 89 |           facing: ''
 90 |         };
 91 |         break;
 92 |       case 4:
 93 |         o = {
 94 |           current: 'landscape',
 95 |           idle: false,
 96 |           facing: ''
 97 |         };
 98 |         break;
 99 |       case 5:
100 |         o = {
101 |           current: this.orientation.current,
102 |           idle: true,
103 |           facing: 'up'
104 |         };
105 |         break;
106 |       case 6:
107 |         o = {
108 |           current: this.orientation.current,
109 |           idle: true,
110 |           facing: 'down'
111 |         };
112 |         break;
113 |     }
114 |     if (this.verbose) {
115 |       console.log('Orientation Updated');
116 |       console.log(o);
117 |     }
118 |     this.orientation = o;
119 |     return o;
120 |   }
121 | }
122 | 
123 | module.exports = new Display();
124 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # 📲 React Native Device Display
  2 | ### This package is now **deprecated** and I am not actively maintaining it. In the meantime you can also use [react-native-orientation](https://github.com/yamill/react-native-orientation).
  3 | 
  4 | A simple way to create dynamic views through device, display and orientation detection, allowing the creation of adaptable and universal apps. **Currently only for React Native iOS, [Android support](https://github.com/kkjdaniel/react-native-device-display/issues/10) in progress.**
  5 | 
  6 | [![GitHub issues](https://img.shields.io/github/issues/kkjdaniel/react-native-device-display.svg)](https://github.com/kkjdaniel/react-native-device-display/issues)
  7 | [![Version](https://img.shields.io/npm/v/react-native-device-display.svg)](https://www.npmjs.com/package/react-native-device-display)
  8 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/react-native-device-display)
  9 | [![Downloads](https://img.shields.io/npm/dt/react-native-device-display.svg)](https://www.npmjs.com/package/react-native-device-display)
 10 | 
 11 | ![Example GIF Demo](http://i.imgur.com/RKYZf3i.gif)
 12 | 
 13 | ## Installation (iOS)
 14 | 
 15 | Simply install the package as shown below...
 16 | 
 17 | ```sh
 18 | $ npm install react-native-device-display
 19 | ```
 20 | 
 21 | Next you need to import the `DisplayDeviceUtil` classes into your project, these come bundled inside the NPM package.
 22 | 
 23 | ![Classes Installation Visual](http://i.imgur.com/vT2qGfr.png)
 24 | 
 25 | Then require it in your project wherever you need it...
 26 | 
 27 | ```javascript
 28 | var Display = require('react-native-device-display');
 29 | ```
 30 | 
 31 | ## Methods
 32 | 
 33 | ```javascript
 34 | Display.percentage(type, value);
 35 | ```
 36 | 
 37 | Returns in `pixels` the percentage value of type `width` or `height`
 38 | 
 39 | ```javascript
 40 | Display.isTablet();
 41 | ```
 42 | 
 43 | Returns `true` if the the device is a tablet (e.g iPad)
 44 | 
 45 | ```javascript
 46 | Display.isPhone();
 47 | ```
 48 | 
 49 | Returns `true` if the the device is a phone (e.g iPhone)
 50 | 
 51 | ```javascript
 52 | Display.isPortrait();
 53 | ```
 54 | 
 55 | Returns `true` if the the device is in a portrait position
 56 | 
 57 | ```javascript
 58 | Display.isLandscape();
 59 | ```
 60 | 
 61 | Returns `true` if the the device is in a landscape position
 62 | 
 63 | ```javascript
 64 | Display.onOrientationDidChange(handler)
 65 | ```
 66 | 
 67 | Triggers the `handler` call-back when the orientation changes
 68 | 
 69 | ## Properties
 70 | 
 71 | ```javascript
 72 | Display.width
 73 | ```
 74 | 
 75 | Width in `pixels` of the display
 76 | 
 77 | ```javascript
 78 | Display.height
 79 | ```
 80 | 
 81 | Height in `pixels` of the display
 82 | 
 83 | ```javascript
 84 | Display.verbose
 85 | ```
 86 | 
 87 | Defaults to `false`, changing it to `true` enables `console.log` messages of orientation change events
 88 | 
 89 | ## Example
 90 | 
 91 | ```javascript
 92 | var Display = require('react-native-device-display');
 93 | var listener;
 94 | 
 95 | var testing = React.createClass({
 96 | 
 97 |   componentDidMount: function() {
 98 |     listener = Display.onOrientationDidChange(function() {
 99 |       //Change States, perform Magic, etc...
100 |     });
101 |   },
102 | 
103 |   componentWillUnmount: function() {
104 |     //Unlisten the onOrientationChange...
105 |     listener = null;
106 |   },
107 |   
108 |   render: function() {
109 |     if (Display.isPortrait()) {
110 |       //Return portrait view...
111 |     } else if (Display.isLandscape()) {
112 |       //Return landscape view...
113 |     } 
114 |     //Add as many conditions and views as you see fit...
115 |   }
116 |   
117 | });
118 | ```
119 | 


--------------------------------------------------------------------------------