React Native Orientation
Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per screen basis. Works on both Android and iOS.
Installing
This was tested with
npx react-native info
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.1
wanted: 0.72.1
npm install react-native-orientation-maintained --save
Linking Native Dependencies
Automatic Linking
react-native link react-native-orientation-maintained
Please note that you still need to manually configure a couple files even when using automatic linking. Please see the 'Configuration' section below. You will also need to restart your simulator before the package will work properly.
Manual Linking
iOS
- Add
node_modules/react-native-orientation-maintained/iOS/RCTOrientation.xcodeproj
to your xcode project, usually under theLibraries
group - Add
libRCTOrientation.a
(fromProducts
underRCTOrientation.xcodeproj
) to build target'sLinked Frameworks and Libraries
list - Add
$(SRCROOT)/node_modules/react-native-orientation-maintained/iOS/RCTOrientation/
toProject Name
->Build Settings
->Header Search Paths
Android
-
In
android/setting.gradle
... include ':react-native-orientation-maintained', ':app' project(':react-native-orientation-maintained').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-maintained/android')
-
In
android/app/build.gradle
... dependencies { ... implementation project(':react-native-orientation-maintained') }
-
Register module in
MainApplication.java
import com.github.alinrzv.orientation.OrientationPackage; // <--- import public class MainApplication extends Application implements ReactApplication { ...... @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); //packages.add(new OrientationPackage()); // <--- uncomment if is not working without this line, it should be auto loaded return packages; } ...... }
Configuration
iOS
Add the following to your project's AppDelegate.m
:
#import "Orientation.h" // <--- import
@implementation AppDelegate
// ...
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
while ([[UIDevice currentDevice] isGeneratingDeviceOrientationNotifications]) {
[[UIDevice currentDevice] endGeneratingDeviceOrientationNotifications];
}
return [Orientation getOrientation];
}
@end
Android
Implement onConfigurationChanged
method in MainActivity.java
import android.content.Intent; // <--- import
import android.content.res.Configuration; // <--- import
public class MainActivity extends ReactActivity {
......
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
sendBroadcast(intent);
}
}
......
}
Usage with the required updated methods based on your react version
To use the react-native-orientation-maintained
package in your codebase, you should use the Orientation module:
import Orientation from 'react-native-orientation-maintained';
export default class AppScreen extends Component {
// ...
componentWillMount() {
// The getOrientation method is async. It happens sometimes that
// you need the orientation at the moment the JS runtime starts running on device.
// `getInitialOrientation` returns directly because its a constant set at the
// beginning of the JS runtime.
const initial = Orientation.getInitialOrientation();
if (initial === 'PORTRAIT') {
// do something
} else {
// do something else
}
},
componentDidMount() {
// this locks the view to Portrait Mode
Orientation.lockToPortrait();
// this locks the view to Landscape Mode
// Orientation.lockToLandscape();
// this unlocks any previous locks to all Orientations
// Orientation.unlockAllOrientations();
Orientation.addOrientationListener(this._orientationDidChange);
},
_orientationDidChange = (orientation) => {
if (orientation === 'LANDSCAPE') {
// do something with landscape layout
} else {
// do something with portrait layout
}
},
componentWillUnmount() {
Orientation.getOrientation((err, orientation) => {
console.log(`Current Device Orientation: ${orientation}`);
});
// Remember to remove listener
Orientation.removeOrientationListener(this._orientationDidChange);
}
render() {
// ...
return (
// ...
)
}
}
Orientation Events
addOrientationListener((orientation) => {});
orientation
will return one of the following values:
LANDSCAPE
PORTRAIT
PORTRAITUPSIDEDOWN
UNKNOWN
removeOrientationListener((orientation) => {});
addSpecificOrientationListener((specificOrientation) => {});
specificOrientation
will return one of the following values:
LANDSCAPE-LEFT
LANDSCAPE-RIGHT
PORTRAIT
PORTRAITUPSIDEDOWN
UNKNOWN
removeSpecificOrientationListener((specificOrientation) => {});
API
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation((err, orientation) => {})
getSpecificOrientation((err, specificOrientation) => {})