react native orientation implementation example needed - react-native

Question

I am new in react-native. I have problems wiht implementing orientation for ios. I am trying to use react native orientation. I have read the documentation but can't do it anyway. Please don't answer with methods like "lockToPortrait(),lockToLandscape() or getOrientation(function(err, orientation)", I have already read this. Can anyone just respond with a piece of working code, it will be enough for me.
Thanks

Answer 1

var Orientation = require('react-native-orientation');
class YourApp extends Component {
componentDidMount() {
Orientation.lockToPortrait();
}
render() {
<MainComponent />
}
}
AppRegistry.registerComponent('YourApp', () => YourApp);
Worked for me just fine.

Answer 2

import React, {PureComponent} from 'react';
import {
View,
Text,
Dimensions
} from 'react-native';
import Orientation from 'react-native-orientation';
const {
width: deviceScreenWidth,
height: deviceScreenHeight
} = Dimensions.get('window');
let aspectRatio = deviceScreenWidth / deviceScreenHeight;
export default class Home extends PureComponent {
constructor(props) {
super(props);
}
render() {
return (
<View style={style.homeMainContainer}>
<Text>Atif dont let this screen rotate</Text>
</View>
)
}// end of render
componentDidMount() {
if (deviceScreenWidth > deviceScreenHeight) {
Orientation.lockToLandscape();
} else {
Orientation.lockToPortrait();
}
// 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
}
}
};
This example is to figure out the the device is the tablet or mobile, if it is tablet it will lock the screen as landscape and if it is mobile then it will lock the screen as portrait.
This is the library as package first you have to install the package link : https://www.npmjs.com/package/react-native-orientation

Answer 3

Adding this since none of the above mentioned that this can be done in react native, without importing a library with Dimensions.addEventListener.
Here is an example of a class that can be initiated to remove and add the StatusBar in your app.
import { Dimensions } from "react-native";
class OrientationChanger {
constructor() {
this.update();
Dimensions.addEventListener("change", () => {
this.updateOrientation();
});
}
update() {
if (Dimensions.get("window").width < Dimensions.get("window").height) {
StatusBar.setHidden(false); // "portrait"
} else {
StatusBar.setHidden(true); // "landscape"
}
}
}
export default OrientationChanger;