https://github.com/kkjdaniel/react-native-device-display

📲 Create dynamic views through device, display and orientation detection (DEPRECATED)
https://github.com/kkjdaniel/react-native-device-display

device-detection orientation-changes react-native universal-apps

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kkjdaniel/react-native-device-display
• Owner: kkjdaniel
• License: bsd-2-clause
• Created: 2015-06-29T22:44:45.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-09-13T23:29:06.000Z (about 6 years ago)
• Last Synced: 2023-09-20T01:36:22.775Z (about 1 year ago)
• Topics: device-detection, orientation-changes, react-native, universal-apps
• Language: JavaScript
• Homepage:
• Size: 41 KB
• Stars: 108
• Watchers: 11
• Forks: 26
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-device-display ★105 - A simple way to create dynamic views through device and display detection, allowing the creation of adaptable and universal apps. (Components / UI)

README

        
# 📲 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](https://github.com/yamill/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](https://github.com/kkjdaniel/react-native-device-display/issues/10) in progress.**

[![GitHub issues](https://img.shields.io/github/issues/kkjdaniel/react-native-device-display.svg)](https://github.com/kkjdaniel/react-native-device-display/issues)

[![Version](https://img.shields.io/npm/v/react-native-device-display.svg)](https://www.npmjs.com/package/react-native-device-display)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://www.npmjs.com/package/react-native-device-display)

[![Downloads](https://img.shields.io/npm/dt/react-native-device-display.svg)](https://www.npmjs.com/package/react-native-device-display)

![Example GIF Demo](http://i.imgur.com/RKYZf3i.gif)

## Installation (iOS)

Simply install the package as shown below...

```sh

$ 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](http://i.imgur.com/vT2qGfr.png)

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

```javascript

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

```

## Methods

```javascript

Display.percentage(type, value);

```

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

```javascript

Display.isTablet();

```

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

```javascript

Display.isPhone();

```

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

```javascript

Display.isPortrait();

```

Returns `true` if the the device is in a portrait position

```javascript

Display.isLandscape();

```

Returns `true` if the the device is in a landscape position

```javascript

Display.onOrientationDidChange(handler)

```

Triggers the `handler` call-back when the orientation changes

## Properties

```javascript

Display.width

```

Width in `pixels` of the display

```javascript

Display.height

```

Height in `pixels` of the display

```javascript

Display.verbose

```

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

## Example

```javascript

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

  }

  

});

```