📲 Create dynamic views through device, display and orientation detection (DEPRECATED)
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6d325ea Sep 14, 2018


📲 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.

GitHub issues Version license Downloads

Example GIF Demo

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.

Classes Installation Visual

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

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


Display.percentage(type, value);

Returns in pixels the percentage value of type width or height


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


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


Returns true if the the device is in a portrait position


Returns true if the the device is in a landscape position


Triggers the handler call-back when the orientation changes



Width in pixels of the display


Height in pixels of the display


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


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