QR Code Scanner and Webview in React Native

Relatively new to React Native. Been trying to get a QR Code Scanner to scan the QR Code and direct the App Screen to a webview to view the URL deciphered from the QR Code. Lots of QR Code packages give examples for displaying the URL but not necessarily do they mention passing on the URL to a webview.


Here I've set the url to empty string and a variable webview to false. On scanning i'm updating the state for the url after scanning and setting variable webview to true.

Then using conditional rendering to try switch between QR Code scanning and a webview when QR Code is scanned. I've included a button to switch back to the QR Camera.


The App crashes when it goes to scan a QR code. No errors are apparent in debug mode from xcode. I've had a look at the debugging part of the simulator and no apparent errors, prior to scanning, not too sure how do debug on the iPhone whilst scanning since the app crashes.

On testing the App

Code Snippet

import React, { Component } from 'react'
import { View, TouchableOpacity, Text} from 'react-native'
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';

export default class QR extends Component {
  constructor(props) {
    this.state = {
      webview: false,
      url: ''
  onSuccess = e => {
      this.setState({url: e.data, webview: true})
  render() {
    return (
      <View style={{flex:1}}>
        <View style={{flex:1}}>
            {this.state.webview && (<Webview 
              source={{uri: this.state.url}}
              scalesPageToFit={true} />

            {!this.state.webview && (<QRCodeScanner
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: 'rgba(0,0,0,0.2)',
              borderRadius: 50,
              width: 50,
              height: 50,
              position: 'absolute',
              right: 5,
              bottom: 5
            onPress={() => this.setState({ webview: false })}
              <Text> Click Me </Text>

I'd be grateful to know where I'm going wrong here. I've tried numerous other QR Code scanners, I do think my approach should work, but not really seeing the mistake.