How to Set Orientation in React Native App Without using any package
Controlling Orientation on Android
For Android, you can control the orientation of your React Native app by modifying the AndroidManifest.xml
file located in the android/app/src/main
directory of your project. Follow these steps:
Open the
AndroidManifest.xml
file.Locate the
<activity>
tag for your main activity, which is typically named.MainActivity
.To set your app to landscape mode, add the following attribute to the
<activity>
tag:xmlandroid:screenOrientation="landscape"
Your
<activity>
tag should now look something like this:xml<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:screenOrientation="landscape" android:windowSoftInputMode="adjustResize">
To set your app to portrait mode, simply change the value of
android:screenOrientation
to "portrait".
Controlling Orientation on iOS
For iOS, you'll need to make some changes in the AppDelegate.m
file located in the ios/[YourAppName]
directory. Follow these steps:
Open the
AppDelegate.m
file.To set your app to landscape mode, add the following line inside the
application
method:objective[[UIDevice currentDevice] setValue:@(UIInterfaceOrientationLandscapeLeft) forKey:@"orientation"];
To set your app to portrait mode, use:
objective[[UIDevice currentDevice] setValue:@(UIInterfaceOrientationPortrait) forKey:@"orientation"];
To enforce the orientation, override the
supportedInterfaceOrientationsForWindow
method:objective- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window { if ([[UIDevice currentDevice] orientation] == UIInterfaceOrientationPortrait) { return UIInterfaceOrientationMaskPortrait; } else { return UIInterfaceOrientationMaskLandscape; } }
By following these steps, you can control the orientation of your React Native app on both Android and iOS without the need for external packages. Make sure to test your app thoroughly in both portrait and landscape modes to ensure everything works as expected.
Comments