Crash when navigating back to scanner

[jamietj]

In my app the user scans a qr code, the returned data is then passed to another scene using a Navigator, when they navigate back to scan another code the app crashes.

I have other scenes in the app that can be navigated back and forth to but when returning to the scene with the scanner in it always crashes (without stack trace or errors)

It might be something like the scanner is still running in the background (the phone alerts me that this app is draining battery)

Any advice would be appreciated

[moaazsidat]

Hey @jamietj would you be able to point towards an example code that's causing this behaviour, would make it easier to debug, thanks a ton!

[PlantBuilder]

I have run into this with navigation and this package (and a friend has run into it with navigation and maps). The stackNavigator.navigate doesn't play nice. Friend said he was able to keep things working with navigate.back(null) keeping the stack short...
I moved away from stackNavigator to TabNavigator used navigate.back(null) and all works well.

[moaazsidat]

@PlantBuilder can you point towards a reproducible example of this, thanks!

[PlantBuilder]

At this point I am not sure whether my comment had to do with your good work or my misunderstanding how react navigation works... I tried searching for an example but couldn't locate one.

[moaazsidat]

Hmm, no worries, I'll try to setup an example with stack navigation this weekend to test this out

[jctadios]

same problem here. any updates?

[moaazsidat]

@jctadios can you point me to a snippet of code/repo that reproduces this problem, thanks!

[hilkeheremans]

First hunch: Assuming you're using react-navigation. If this only occurs in a stacknavigator but not in a tabnavigator, it's possible that this is related to the implementation of the stack navigator. Perhaps the underlying camera component gets mounted twice. This would perfectly explain these crashes. See also #45.

@moaazsidat To repro, try mounting two camera's somewhere. This scenario could occur with a not-quite-properly set up stacknavigation, where a scanner screen is somewhere down in the screen stack, and it gets mounted again while the other one is still running.

I'm a little puzzled why a back navigation to null would leave the component mounted though, but it's been a while since I've gone into react-navigation's code in-depth so it might be related to an issue there.

[hilkeheremans]

Oh, btw, try doing a reset instead of back(null), see what happens.

[DSTOLF]

Hi guys,

Just dropping by to leave my compliments for this awesome project, it really helped me getting started quickly on my own project.

If anybody else's app is crashing when using stack navigation, I've managed to get it working nicely with this fix:

export default class Scan extends React.Component<*> {
  // Set the navigation options for `react-navigation`
  static navigationOptions = {
    headerTitle: 'Scan Now',
  };

  onSuccess(e) {
    Linking.openURL(e.data).catch(err => console.error('An error occured', err));
    this.forceUpdate();
  }

  render() {
    return (
      <QRCodeScanner
        ref={(node) => { this.scanner = node }}
        onRead = {this.onSuccess.bind(this)}
        reactivate = {true}
        reactivateTimeout = {5000}
      />
    );
  }
}

I can scan as many codes as I want, go back and forth to other screens... no more crashes.

Hope it helps.

[DSTOLF]

BTW, I'm not sure that the forceUpdate call is the right approach, or if it's in the right place... I sense it should be in a .then block somewhere... so if anybody thinks there's a better way, please let me know :)

[imomer]

@DSTOLF didn't work for me :(

[afilp]

In my case, the app crashes when I mount and remount the app, after some times (don't understand how many times).
It is not related to navigation but to the scanner view being mounted and unmounted regularly through the same View, by using this code:

{this.state.isScannerEnabled && <Scanner />}

Any ides why and how to prevent this?

[afilp]

I also see many problems with app crashes in Android in react-native-camera, maybe the problem is only there?

See here:

https://github.com/react-native-community/react-native-camera/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+crash

[OtacilioN]

+1 here, @DSTOLF solution did not work to me

[moaazsidat]

if someone has the code with this bug (on iOS) reproducible in a repo, please point me to it, I may be able to dig deeper and see what's up. thanks!

[mattruddy]

Any updates on this bug? Mine is consistently crashing every few scans. (Love the project btw)

[j0nd0n7]

Same issue using react-native-navigation.
I already tried to force state updates without success

[renatobenks]

I'm closing this once it's not a problem caused by this scanner to qrcode and actually, it's a problem caused by react-native-camera which it sounds to be already fixed as following react-native-camera/react-native-camera#701

[aravi365]

I am facing the same issue. The app lags fully when navigated from the camera ui to the previous screen.

  React.useEffect(() => {
    checkPermissions();
    InteractionManager.runAfterInteractions(() => {
      setCameraVisible(true);
    });
  }, []);
 {cameraVisible ? (
          <QRCodeScanner/>):null}
 <Button onPress={() => navigation.goBack()}/>

Referred various react camera docs, but nothing found. The transition looks very sluggish or lagging. Any workarounds or fixes or links to refer to solve this glitch?