react-native landscape mode Orientation - react-native

Question

Im still beginner and here is one page that I want it to display with landscape mode when I open up the page. I installed react-native-orientation, but im not sure how I can use this.
I want landscape mode when I open the app, so I believe that I should set Orientation when I use, componentWillMount(){
Orientation
}
but im not sure how to set it up... could anyone tell me how?

Answer 1

Try Following package may be help you.
react-native-orientation

Answer 2

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>

Answer 3

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();
}