Location.watchHeadingAsync stalls the JS thread

🐛 Bug Report

Environment

Client version on iOS: 2.11.0.6067

$ expo diagnostics

Expo CLI 2.18.0 environment info:
    System:
      OS: macOS 10.14.4
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 11.14.0 - /usr/local/bin/node
      npm: 6.9.0 - /usr/local/bin/npm
    IDEs:
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      expo: ^32.0.0 => 32.0.6 
      react: 16.5.0 => 16.5.0 
      react-native: https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz => 0.57.1 
    npmGlobalPackages:
      expo-cli: 2.18.0

Currently targeting iOS only, on my personal device (iPhone XS).

Steps to Reproduce

See lower for a repo + demo.

Basically: Bind anything except the simplest setState() to watchHeadingAsync and run it on a physical device. As soon as the device rotates, the JS thread drops dramatically.

Expected Behavior

Since watchHeadingAsync offers no built-in throttling (ex. only update on Δ > 5°), it’s probably reasonable to expect a minimum of headroom in terms of CPU usage.

Actual Behavior

As soon as watchHeadingAsync is given a callback, the JS thread is at risk of dropping. Currently, writing my own throttling is already too heavy of a callback for a new iPhone XS to manage, and the JS thread can drop to 0 fps when the phone rotates slowly, even on a 20° throttle:

Reproducible Demo

Here is a barebones demo of the behavior. Only App.js is modified from expo init: https://github.com/L-A/expo-heading-demo/blob/master/App.js#L15-L18

export default class App extends React.Component {
  state = { heading: 0 };

  async componentDidMount() {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status === "granted") {
      Location.watchHeadingAsync(this.updateHeading);
    }
  }

  updateHeading = headingObject => {
    // console.log("Uncomment me to stall the JS thread on heading events");
    this.setState({ heading: headingObject.trueHeading });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Orientation: {this.state.heading}</Text>
      </View>
    );
  }
}

I’d love to learn I’m just doing something wrong! However, the same code appeared to run without any issues around february this year. I’m having a hard time investigating what version introduced the issue since it’s on the Expo client’s side.

Cheers! I’d be happy to provide anything else that can help.

[lukmccall]

@L-A Thanks you for checking it. I’m closing this issue. If the same situation will occur in the future, feel free to open issue again.

[L-A]

Hi @lukmccall! I’ll be able to test on a different phone and SDK 33 early next week, I’ll give you a heads up as soon as I have the info.