Access additional display metrics on Android devices: status bar height, soft menu bar height, real screen size.
Switch branches/tags
Clone or download
Sunhat Update README.md on how to link package with RN (#38)
* Update README.md

* Update README.md
Latest commit 88a1160 Nov 12, 2018
Permalink
Failed to load latest commit information.
Example updates code and README.md Dec 23, 2015
android Refactor Jul 19, 2018
.gitignore ignore .iml files Nov 23, 2016
LICENSE.md Add title and extension to LICENSE file Nov 4, 2017
README.md update README.md (#37) Oct 11, 2018
demo.png adds demo Dec 23, 2015
index.d.ts Add typescript types May 16, 2018
index.js Update index.js Jul 6, 2018
package.json Update version Oct 30, 2018

README.md

ExtraDimensions

This module allows you to access additional display metrics on Android devices. (RN 0.47.0+)

  • Actual width and height of the screen (including elements such as soft menu bar)
  • Soft menu height
  • Status bar height
  • Smart bar height (MeiZu)

Why?

There is currently a bug in React Native where Dimensions.get('window').height sometimes returns the wrong value.

Also, some apps may want to set the background of status bar and soft menu bar to transparent, thus the top-level view needs to fill up the real screen size.

Installation

  1. Install with npm

    npm install react-native-extra-dimensions-android --save
    
  2. linking

    react-native link react-native-extra-dimensions-android
    
  3. You may have to register the module (in android/app/src/main/java/com/YOUR-PROJECT-NAME/MainApplication.java)

    import ca.jaysoo.extradimensions.ExtraDimensionsPackage;  // <--- import
    
    public class MainApplication extends Application implements ReactApplication {
      ......
      protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new ExtraDimensionsPackage()  // <--- add here
        );
      }
      ......
    }
    
  4. Whenever you want to use it within React Native code now you can:

var ExtraDimensions = require('react-native-extra-dimensions-android');

Or, if you are using ES6

import ExtraDimensions from 'react-native-extra-dimensions-android';

Demo

API

There is only one method get(dimension: string) that takes in a dimension name, and returns its value as a number.

Supported dimensions are:

  • REAL_WINDOW_HEIGHT - Actual height of screen including system decor elements
  • REAL_WINDOW_WIDTH - Actual width of screen including system decor elements
  • STATUS_BAR_HEIGHT - Height of the status bar
  • SOFT_MENU_BAR_HEIGHT - Height of the soft menu bar (supported on most new Android devices)
  • SMART_BAR_HEIGHT - Height of the MeiZu's device smart bar