Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.
Run npm install react-native-orientation --save
- Open your project in XCode, right click on your project and click
Add Files to "Your Project Name"
- Add
RCTOrientation
folder from yournode_modules/react-native-orientation
folder. Make sure you have 'Create Groups' selected
-
In
android/setting.gradle
... include ':Orientation', ':app' project(':Orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')
-
In
android/app/build.gradle
... dependencies { ... compile project(':Orientation') }
-
Register module (in MainActivity.java)
import android.content.Intent; // <--- import import android.content.res.Configuration; // <--- import import com.github.yamill.orientation.OrientationPackage; // <--- import public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { ...... @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .addPackage(new OrientationPackage(this)) // <------ add here .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null); setContentView(mReactRootView); } ...... }
-
Implement onConfigurationChanged method (in MainActivity.java)
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
Intent intent = new Intent("onConfigurationChanged");
intent.putExtra("newConfig", newConfig);
this.sendBroadcast(intent);
}
Whenever you want to use it within React Native code now you can:
var Orientation = require('react-native-orientation');
_orientationDidChange: function(orientation) {
if(orientation == 'LANDSCAPE'){
//do something with landscape layout
}else{
//do something with portrait layout
}
},
componentDidMount: function(){
Orientation.lockToPortrait(); //this will lock the view to Portrait
//Orientation.lockToLandscape(); //this will lock the view to Landscape
//Orientation.unlockAllOrientations(); //this will unlock the view to all Orientations
Orientation.addOrientationListener(this._orientationDidChange);
},
componentWillUnmount: function() {
Orientation.getOrientation((err,orientation)=> {
console.log("Current Device Orientation: ", orientation);
});
Orientation.removeOrientationListener(this._orientationDidChange);
}
addOrientationListener(function(orientation))
orientation can return either LANDSCAPE
PORTRAIT
UNKNOWN
also PORTRAITUPSIDEDOWN
is now different from PORTRAIT
-
removeOrientationListener(function(orientation))
-
addSpecificOrientationListener(function(specificOrientation))
specificOrientation can return either LANDSCAPE-LEFT
LANDSCAPE-RIGHT
PORTRAIT
UNKNOWN
PORTRAITUPSIDEDOWN
removeSpecificOrientationListener(function(specificOrientation))
lockToPortrait()
lockToLandscape()
lockToLandscapeLeft()
lockToLandscapeRight()
unlockAllOrientations()
getOrientation(function(err, orientation)
orientation can return either LANDSCAPE
PORTRAIT
UNKNOWN
PORTRAITUPSIDEDOWN
getSpecificOrientation(function(err, specificOrientation)
specificOrientation can return either LANDSCAPE-LEFT
LANDSCAPE-RIGHT
PORTRAIT
UNKNOWN
PORTRAITUPSIDEDOWN
- Add some way to allow setting a preferred orientation on a screen by screen basis.
- Make API Cleaner to Orientation Locking
- Android Support