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

1. 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')
   

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

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

3. 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');
}