dsibiski / react-native-device-display

A simple way to create dynamic views through device and display detection, allowing the creation of adaptable and universal apps.

react-native-device-display

A simple way to create dynamic views through device and display detection, allowing the creation of adaptable and universal apps.

Installation

Simply install the package as shown below...

$ npm install react-native-device-display

To use the Orientation Event Listener you need to add the custom DisplayDeviceUtil(.h/.m) classes to your projec, these come bundled inside the NPM package.

Then require it in your project wherever you need it...

var Display = require('react-native-device-display');

Methods

Display.percentage(type, value);

Returns in pixels the percentage value of the type width or height

Display.isTablet();

Returns true if the the device is a tablet (e.g iPad)

Display.isPhone();

Returns true if the the device is a phone (e.g iPhone)

Display.isPortrait();

Returns true if the the device is in a portrait position

Display.isLandscape();

Returns true if the the device is in a landscape position

Display.onOrientationChange(handler)

Triggers the handler call back when the orientation of the device changes as well as updating the dimension properties

Properties

Display.width

Width in pixels of the device

Display.height

Height in pixels of the device

Example

Simple Implementation (without Event Listener & Classes)...

var Display = require('react-native-device-display');

var testing = React.createClass({

  render: function() {
    if (Display.isPhone() && Display.isPortrait()) {
      return (
        //Portrait Phone View...
      );
    } else if (Display.isPhone() && Display.isLandscape()) {
      return (
        //Landscape Phone View...
      );
    } else {
      return (
        //Non-Phone / Tablet View...
      );
    }
  }
  
});

With Event Listener...

var Display = require('react-native-device-display');

var testing = React.createClass({

  componentDidMount: function() {
    Device.onOrientationDidChange(function() {
      //Change States, Perform Magic, etc...
    });
  }

});