📲 React Native Device Display

This package is now deprecated and I am not actively maintaining it. In the meantime you can also use react-native-orientation.

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 in progress.

Installation (iOS)

Simply install the package as shown below...

$ npm install react-native-device-display

Next you need to import the DisplayDeviceUtil classes into your project, 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 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.onOrientationDidChange(handler)

Triggers the handler call-back when the orientation changes

Properties

Display.width

Width in pixels of the display

Display.height

Height in pixels of the display

Display.verbose

Defaults to false, changing it to true enables console.log messages of orientation change events

Example

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

var testing = React.createClass({

  componentDidMount: function() {
    listener = Display.onOrientationDidChange(function() {
      //Change States, perform Magic, etc...
    });
  },

  componentWillUnmount: function() {
    //Unlisten the onOrientationChange...
    listener = null;
  },
  
  render: function() {
    if (Display.isPortrait()) {
      //Return portrait view...
    } else if (Display.isLandscape()) {
      //Return landscape view...
    } 
    //Add as many conditions and views as you see fit...
  }
  
});