Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/inProgress-team/react-native-orientation-controller
https://github.com/inProgress-team/react-native-orientation-controller
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/inProgress-team/react-native-orientation-controller
- Owner: inProgress-team
- License: mit
- Created: 2015-10-30T15:43:25.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-05T12:43:07.000Z (over 7 years ago)
- Last Synced: 2024-04-26T02:35:29.326Z (9 months ago)
- Language: Java
- Size: 72.3 KB
- Stars: 26
- Watchers: 5
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-orientation-controller ★23 - A react-native library for obtaining and controlling the current device and application orientation (Components / UI)
- awesome-react-native - react-native-orientation-controller ★23 - A react-native library for obtaining and controlling the current device and application orientation (Components / UI)
- awesome-react-native - react-native-orientation-controller ★23 - A react-native library for obtaining and controlling the current device and application orientation (Components / UI)
- awesome-react-native-ui - react-native-orientation-controller ★19 - A react-native library for obtaining and controlling the current device and application orientation (Components / UI)
- awesome-react-native - react-native-orientation-controller ★23 - A react-native library for obtaining and controlling the current device and application orientation (Components / UI)
README
## react-native-orientation-controller
> A react-native library for obtaining and controlling current device or application orientation
This library is a fork of [this library by Ken Wheeler](https://github.com/walmartreact/react-native-orientation-listener). We thank him.
###Getting Started
- Run `npm install --save react-native-orientation-controller`
### Install with RNPM
- `npm install -g rnpm`
- `rnpm link react-native-orientation-controller`### Or Manual Installation
#### Android
Add to `android/settings.gradle`:
```
include ':react-native-orientation-controller'
project(':react-native-orientation-controller').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation-controller/android')
```Add the compile project line to `android/app/build.gradle` (inside `dependencies`):
```
dependencies {
// ... other content ...
compile project(':react-native-orientation-controller')
}
```Inside `MainActivity.java` (normally somewhere here `android/app/src/main/java/com//MainActivity.java`)
add `import com.inprogress.ReactOrientationController.ReactOrientationController;` and ` new ReactOrientationController(this)`
like in the example below```
import com.inprogress.ReactOrientationController.ReactOrientationController; // <<< ADD THIS/* ... other content ... */
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactOrientationController(this) // <<< AND THIS
/* ... other packages can be here ... */
);
}```
### Usage
Import the library:
```javascript
var Orientation = require('react-native-orientation-controller');
```####rotate(orientation)
This method will change the current orientation of the device of 90° for parameter=1, 180° for parameter=2, 270° for parameter=3 :
```javascript
componentDidMount(){
Orientation.rotate(parameter);
}
```####getOrientation(callback)
This method will return the current orientation of the device, the current orientation of the application, the device model and the screen size in the form of a callback:
```javascript
componentDidMount(){
Orientation.getOrientation(
(deviceOrientation, applicationOrientation, device, size) => {
console.log(deviceOrientation, applicationOrientation, device, size);
}
);
}
```####addListener(callback)
This method will add a listener that will call the callback anytime the orientation changes:
```javascript
_setOrientation(deviceOrientation, applicationOrientation, device, size) {
console.log(deviceOrientation, applicationOrientation, device, size);
},
componentDidMount(){
this.orientationListener = Orientation.addListener(this._setOrientation);
}
```####removeListener(callback)
This method removes the listener you added in componentDidMount:
```javascript
componentWillUnmount() {
this.orientationListener.remove();
}
```