How do I use this component with ReactNavigation? about react-native-qrcode-scanner

[imomer]

@moaazsidat there is a bug in this module. When you try to navigate to another component and come back to scanner it closes the app.

render() {
        return (
            <QRCodeScanner
                onRead={this.onSuccess.bind(this)}
                containerStyle={{backgroundColor: '#ffffff'}}
                showMarker={true}
                topViewStyle={{flex: 0, height: 0}}
                bottomContent={(
                    <TouchableOpacity onPress={this.gotoHome}>
                        <Text>OK. Got it!</Text>
                    </TouchableOpacity>
                )}
                ref={(node) => { this.scanner = node }}
                reactivate = {true}
                reactivateTimeout = {5000}
            />
        );
    }

gotoHome = () => {
        this.props.navigation.navigate('Home');
    }

[moaazsidat]

Hey @victorsferreira, will take a look at ReactNavigation, and try to add a couple of examples using it. Since this is just a react component, you should generally be able to use it as any other component.

import QRCodeScanner from 'react-native-qrcode-scanner'

<QRCodeScanner
  title='Scan Code'
  onRead={() => alert('Success')}
  topContent={(
    <Text style={styles.centerText}>
      Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
    </Text>
  )}
  bottomContent={(
    <TouchableOpacity style={styles.buttonTouchable}>
      <Text style={styles.buttonText}>OK. Got it!</Text>
    </TouchableOpacity>
  )}
/> 

[lucasharada]

@imomer @victorsferreira Any solution on this? I'm having this issue when creating a StackNavigator with this Component.

[imomer]

@lucasharada well didn't find a solution but I have worked around it

[lucasharada]

@imomer Can you show us how you did it?

[afilp]

@imomer Can you please show us the workaround? The app also crashes...