react-native-screen-layout

React Native Module for reading Android ScreenLayout Configuration

This plugin provides access to the screenLayout configuration on Android devices.

Getting started

$ npm install react-native-screen-layout --save

Mostly automatic installation

$ react-native link react-native-screen-layout

Manual installation

Android

• Append the following lines to android/settings.gradle:

  include ':react-native-screen-layout'
  project(':react-native-screen-layout').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-screen-layout/android')
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-screen-layout')
  

• Import Package

  For React Native >= v0.29

  Update the MainApplication.java file to use the Plugin via the following changes:

  ...
  // 1. Import the plugin class.
  import com.artirigo.screenlayout.RNScreenLayoutPackage;
  
  public class MainApplication extends Application implements ReactApplication {
  
      private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
          ...   
          @Override
          protected List<ReactPackage> getPackages() {
              // 2. Instantiate an instance of the Plugin runtime and add it to the list of
              // existing packages.
              return Arrays.<ReactPackage>asList(
                  new MainReactPackage(),
                  new RNScreenLayoutPackage()
              );
          }
      };
  }
  

  For React Native v0.19 - v0.28

  Update the MainActivity.java file to use the Plugin via the following changes:

  ...
  // 1. Import the plugin class (if you used RNPM to install the plugin, this
  // should already be done for you automatically so you can skip this step).
  import com.artirigo.screenlayout.RNScreenLayoutPackage;
  
  public class MainActivity extends ReactActivity {    
      @Override
      protected List<ReactPackage> getPackages() {
          // 2. Instantiate an instance of the Plugin runtime and add it to the list of
          // existing packages.
          return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new RNScreenLayoutPackage()
          );
      }
  
      ...
  }
  

Usage

import ScreenLayout from 'react-native-screen-layout';

if(ScreenLayout.SCREEN_LAYOUT === ScreenLayout.LARGE) {
    console.log('this is a large screen');
}