https://github.com/yonahforst/react-native-heading
Get device heading information on iOS or Android
https://github.com/yonahforst/react-native-heading
Last synced: 3 months ago
JSON representation
Get device heading information on iOS or Android
- Host: GitHub
- URL: https://github.com/yonahforst/react-native-heading
- Owner: yonahforst
- License: mit
- Created: 2016-02-21T11:59:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-07-09T11:18:13.000Z (over 6 years ago)
- Last Synced: 2024-11-11T21:25:08.364Z (12 months ago)
- Language: Java
- Homepage:
- Size: 12.6 MB
- Stars: 38
- Watchers: 5
- Forks: 34
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-heading ★31 - Get device heading (compass) information on iOS or Android (Components / System)
- awesome-react-native - react-native-heading ★31 - Get device heading (compass) information on iOS or Android (Components / System)
- awesome-react-native - react-native-heading ★31 - Get device heading (compass) information on iOS or Android (Components / System)
- awesome-react-native - react-native-heading ★31 - Get device heading (compass) information on iOS or Android (Components / System)
- awesome-react-native-ui - react-native-heading ★14 - Get device heading (compass) information on iOS or Android (Components / System)
README
# React Native Heading
Get device heading information on iOS or Android
## What
Report back device orientation in degrees, 0-360, with 0 being North.
#### Example
```java
const { DeviceEventEmitter } = require('react-native');
const ReactNativeHeading = require('react-native-heading');
//....
componentDidMount() {
ReactNativeHeading.start(1)
.then(didStart => {
this.setState({
headingIsSupported: didStart,
})
})
DeviceEventEmitter.addListener('headingUpdated', data => {
console.log('New heading is:', data.heading);
});
}
componentWillUnmount() {
ReactNativeHeading.stop();
DeviceEventEmitter.removeAllListeners('headingUpdated');
}
//...
```
| Version | React Native Support |
|---|---|
| 1.1.0 | 0.40.0 - 0.41.0 |
| 1.0.0 | 0.33.0 - 0.39.0 |
*Complies with [react-native-version-support-table](https://github.com/dangnelson/react-native-version-support-table)*
#### API
`start(filter)` - Start receiving heading updates. Accepts an optional filter param (int) to ignore heading changes less than the spcified threshold. The default value is 5. Returns a promise which can be used to determine if heading updates are suported by the device.
`stop` - Stop receiving heaing updates (don't forget to remove the `headingUpdated` listener)
## Setup
````
npm install --save react-native-heading
````
### iOS
* Run open node_modules/react-native-heading
* Drag ReactNativeHeading.xcodeproj into your Libraries group
### Android
##### Step 1 - Update Gradle Settings
```
// file: android/settings.gradle
...
include ':react-native-heading'
project(':react-native-heading').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-heading/android')
```
##### Step 2 - Update Gradle Build
```
// file: android/app/build.gradle
...
dependencies {
...
compile project(':react-native-heading')
}
```
##### Step 3 - Register React Package
```
...
import com.joshblour.reactnativeheading.ReactNativeHeadingPackage; // <--- import
public class MainActivity extends ReactActivity {
...
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactNativeHeadingPackage() // <------ add the package
);
}
...
}
```