https://github.com/yonahforst/react-native-heading

Get device heading information on iOS or Android
https://github.com/yonahforst/react-native-heading

Last synced: about 1 month 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 8 years ago)
• Default Branch: master
• Last Pushed: 2019-07-09T11:18:13.000Z (about 5 years ago)
• Last Synced: 2024-08-14T22:31:58.383Z (about 1 month 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

        );

    }

    ...

}

```