kkjdaniel/react-native-device-display

📲 Create dynamic views through device, display and orientation detection (DEPRECATED)

react-native-device-display's Issues

UI Error Message after upgrading to React Native 0.7.1

Hello. I get the following error message after installing this module, and trying to run the default app that is created from latest react-native version (0.7.1), e.g. react-native init Test. I responded to someone'e else inquiry about error messages occurring after upgrading to React Native 0.7.1: facebook/react-native#1960

NPM Updates on Dimensions import issue

Hi, when i do npm install on react-native-device-display, i still get the old codes:

var { NativeModules } = require('react-native');

var DeviceUtil = NativeModules.DisplayDeviceUtil;
var Dimensions = require('Dimensions');
var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');

Which displays the Module not found error. But i can see that this is fixed on Github copy but i'm not getting the update whenever i npm install.

FIX Code:

---

var {
Dimensions,
RCTDeviceEventEmitter,
NativeModules
} = require('react-native');

var DeviceUtil = NativeModules.DisplayDeviceUtil;

Thanks.

Is orientation worked for a build product-apk

Hi all
I tried the same thing for a react-native android application. Its took the value of the screen width, height using Dimension when I reload the js otherwise this orientation (width, height changing) not worked. Can you help me to fix this issue

Thank you

Unlisten to Display.onOrientationDidChange

Does this method get unregistered after the underlying component gets unmounted? If not, i'm wondering how one can do so (unregister this listener).

Support newest versions of React Native

I've seen your last commit, but while using React Native 0.7.1 & 0..8.0.rc.2 are giving me errors installing your module. Could you alter your peerDepedencies less strict, while now I cannot use (without hassle) your module in the new updates of React Native. Could you update like react-native-icons has done for example:

"peerdependencies" : {
    "react-native": ">=0.6.0 <1.0.0"
}

Thanks!

Submitting a pull request

Forgive me if this question is stupid, but I am wondering how I can update my forked version to the current version of this repo. My fork is currently @1.0.0, and I want to create a pull request from my base , and submit it to kkdaniel's master branch.

Please advise. Thanks. -Albert

Missing tag for master

currently the tag for the master is missing and if you follow the documentation and run

npm install react-native-device-display

You will get a different version from the latest release.

P.S: temporary solution for those who are facing this issue:
Use following in your package.json
"react-native-device-display": "kkjdaniel/react-native-device-display#master",

Potential bug in the JS orientation predicates

The Display class will return false from both isPortrait and isLandscape in case the application frame is square (i.e. width == height).
Although application frame can not be square today, who know what new split-screen modes Apple is planning for future iOS releases.

Suggested solution: either isPortrait or isLandscape should change the condition to <=.

If the device is landscape when app start, all value is opposite.

All value is opposite when device is landscape when app start.

Flipping Around Breaks This

This doesn't appear to work.

I start in portrait > 667 x 375

I rotate to landscape > 667 x375

I keep going in circle (rotate same way) to portrait > 375 x 667

I rotate again to landscape > 667 x 375

It is not reporting the proper values.

[UIScreen applicationFrame] is deprecated on iOS 9.0

Beside that using the screen dimensions is no longer proper to determine the application frame size since on iPad the app might be in split-screen mode. In order to determine the application frame one should get the frame of the application's key window.

React Native Android Support

Add support for React Native Android:

• Percentage
• isTablet
• isPhone
• isPortrait
• isLandscape
• onOrientationDidChange Event
• Width & Height Properties

Seems to be incompatible with React Native 0.14.x and 0.13.x

I recently upgraded my app to React Native 0.14.x and react-native-device-display is causing the following errors to show up in the console:

2015-11-16 23:40:17.179 [error][tid:main][RCTBatchedBridge.m:436] Error while loading: Unable to resolve module Dimensions from /Users/XXX/XXX/XXX/node_modules/react-native-device-display/display.js: Invalid directory /Users/node_modules/Dimensions

Need to change API for onOrientationDidChange

Under your list of Methods in the Readme, you still have onOrientationChange. I believe the function name is actually onOrientationDidChange

Fixed Bugs and Made Changes

Hey, I know there is some official means of doing this but I'm not familiar with git really...

Anyway I made some changes I think are pretty good including the bug fix mentioned in previous

   UIDeviceOrientation deviceOrientation = [[UIDevice currentDevice] orientation];
   NSDictionary *dimensions = @{ @"width": @(frameSize.width), @"height": @(frameSize.height),      @"orientation": @(deviceOrientation) };
   NSLog(@"%@", dimensions);
   [_bridge.eventDispatcher sendDeviceEventWithName:@"orientationDidChange" body:dimensions];

I now include the actual device orientation in the dictionary. I also fixed the issue with sending the wrong width / height (it was flipped around).

Then I receive the orientation in the event receiver and parse it. I also send the new data in the handler.

 onOrientationDidChange(handler) {
     var main = this;
     return RCTDeviceEventEmitter.addListener(
       'orientationDidChange',
       function(newDimensions) {
         main.updateProps(newDimensions.width, newDimensions.height);
         var orientation = main.updateOrientation(newDimensions.orientation);
         handler(newDimensions.width, newDimensions.height, orientation);
       }
     );
   }

I parse the orientation to return easier to work with object:

 updateOrientation(orientation) {
     var o = {};
     switch (orientation) {
       case 1:
         o = {
           current: 'portrait',
           idle: false,
           facing: ''
         };
         break;
       case 2:
         o = {
           current: 'portrait',
           idle: false,
           facing: ''
         };
        break;
       case 3:
         o = {
           current: 'landscape',
           idle: false,
           facing: ''
         };
         break;
       case 4:
         o = {
           current: 'landscape',
            idle: false,
           facing: ''
         };
         break;
       case 5:
         o = {
           current: this.orientation.current,
           idle: true,
           facing: 'up'
         };
         break;
       case 6:
         o = {
           current: this.orientation.current,
           idle: true,
           facing: 'down'
         };
         break;
     }
     console.log('Orientation Updated');
     console.log(o);
     this.orientation = o;
     return o;
   }

And now my handler receives:
NEW ORIENTATION DISCOVERED!
index.ios.js:22 Height: 716
index.ios.js:23 Width: 414
index.ios.js:24 Orientation:
index.ios.js:25 Object {current: "portrait", idle: true, facing: "up"}

GPL - Incompatible with iOS App Store

The GPL is incompatible with the iOS App Store and proprietary software development. I'm not sure how many people are looking to build a GPL app and not distribute it on the App Store.

I would hazard to guess that the 500 users who have downloaded this library, the majority of them will be breaking the terms of your licence and putting themselves at risk of legal action.

I would suggest a less restrictive license like MIT, Apache or BSD.

Doesnot it support on android?

when i implemented it to android error occurs as:

undefined is not an object (evaluationg 'DeviceUtil.isPhone')