CODEWITHSUNDEEP
react-nativeorientationlandscape
Kazuki Kimoto
Kazuki Kimoto

Reputation: 79

react-native landscape mode Orientation

I'm still a beginner. Here is one page that I want to display with landscape mode - when I open up the page. I installed react-native-orientation, but I'm not sure how I can use it.

I want landscape mode when I open the app, so I believe that I should set Orientation when I use, componentWillMount(){ Orientation }

but I'm not sure how to set it up... could anyone tell me how?

Upvotes: 4

Views: 24154

Answers (3)

Naved Khan
Naved Khan

Reputation: 1947

only this one line add on your project in your

android:screenOrientation="landscape"

android->app->src->main->AndroidManifest.xml

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:screenOrientation="landscape"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

Upvotes: 2

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

I came across the same issue instead of using third party module I created my own.

My React Native Module:

public class OrientationHelperModule extends ReactContextBaseJavaModule {
    private static final String TAG = OrientationHelperModule.class.getSimpleName();
    private static final String MODULE_NAME = "OrientationHelperModule";

    private final ReactApplicationContext reactAppContext;


    @Override
    public String getName() {
        return MODULE_NAME;
    }

    public OrientationHelperModule(ReactApplicationContext reactAppContext) {
        super(reactAppContext);
        this.reactAppContext = reactAppContext;
    }

    @ReactMethod
    public void lockLandscape() {
        OrientationUtils.lockOrientationLandscape(getCurrentActivity());
    }

    @ReactMethod
    public void unlockOrientation() {
        OrientationUtils.unlockOrientation(getCurrentActivity());
    }

    @ReactMethod
    public void lockPortrait() {
        OrientationUtils.lockOrientationPortrait(getCurrentActivity());
    }
}

The Helper class to handle orientation lock 

import android.app.Activity;
import android.content.Context;
import android.content.pm.ActivityInfo;
import android.content.res.Configuration;
import android.os.Build;
import android.view.Surface;
import android.view.WindowManager;

/*  * This class is used to lock orientation of Android app in any Android devices  
 */

public class OrientationUtils {
    private OrientationUtils() {
    }

    /**
     * Locks the device window in landscape mode.
     */
    public static void lockOrientationLandscape(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR_LANDSCAPE);
    }

    /**
     * Locks the device window in portrait mode.
     */
    public static void lockOrientationPortrait(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    }

    /**
     * Locks the device window in actual screen mode.
     */
    public static void lockOrientation(Activity activity) {
        final int orientation = activity.getResources().getConfiguration().orientation;
        final int rotation = ((WindowManager) activity.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay()
                .getRotation();

        // Copied from Android docs, since we don't have these values in Froyo 
        // 2.2 
        int SCREEN_ORIENTATION_REVERSE_LANDSCAPE = 8;
        int SCREEN_ORIENTATION_REVERSE_PORTRAIT = 9;

        // Build.VERSION.SDK_INT <= Build.VERSION_CODES.FROYO 
        if (!(Build.VERSION.SDK_INT <= Build.VERSION_CODES.FROYO)) {
            SCREEN_ORIENTATION_REVERSE_LANDSCAPE = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE;
            SCREEN_ORIENTATION_REVERSE_PORTRAIT = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT;
        }

        if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_90) {
            if (orientation == Configuration.ORIENTATION_PORTRAIT) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
            } else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
            }
        } else if (rotation == Surface.ROTATION_180 || rotation == Surface.ROTATION_270) {
            if (orientation == Configuration.ORIENTATION_PORTRAIT) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_PORTRAIT);
            } else if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
                activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_REVERSE_LANDSCAPE);
            }
        }
    }

    /**
     * Unlocks the device window in user defined screen mode.
     */
    public static void unlockOrientation(Activity activity) {
        activity.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_USER);
    }

}

Import it in React Native

'use strict';
import { NativeModules } from 'react-native';
module.exports = NativeModules.OrientationHelperModule;

Import OrientationHelperModule in your component

  import OrientationHelperModule from './src/modules/OrientationHelperModule'

And use it to lock orientation

  componentDidMount = () => {
    OrientationHelperModule.lockLandscape();
   }

Upvotes: 1

Santosh Sharma
Santosh Sharma

Reputation: 2248

Try Following package may be help you.

react-native-orientation

Upvotes: 2

Related Questions