React native QR scanner to webview

I converted my app from expo to bare react native. I had a barcode/QR scanner that was working great with the expo module "Expo-bar-code-scanner" I tried to convert from expo bar code scanner to React native qr scanner but I’ve been running into problems and not sure how to fix. What is expected is to scan a qr code containing a URL and have that opened in a webview. What is happening however since converting is webview failing to open and my overlay is failing to display.

Please help… Thank you 🙂

Below is my QRscreen.js. URL’s are omitted

import React, { useState, useEffect } from 'react';
  import { Text, View, StyleSheet, Button, Modal, TouchableHighlight, Image } from 'react-native';
  import { WebView } from 'react-native-webview';
  import QRCodeScanner from 'react-native-qrcode-scanner';
  import { RNCamera } from 'react-native-camera';

  export default function App(){
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(true);
    const [modalVisible, setModalVisible] = useState(true);
    const [uri, setUri] = useState('omitted');


useEffect(() => {
  (async () => {
    const { status } = await QRCodeScanner.requestPermissionsAsync();
    setHasPermission(status === 'granted');
  })();
}, []);

const handleBarCodeScanned = ({ type, data }) => {
  setScanned(true);
  setModalVisible(true);
    // console.warn("Scan returned " + data);
    setUri({ uri: data })
};



if (hasPermission === false) {
  return <Text>No access to camera</Text>;
}

return (
  <View
    style={{
      flex: 1,
      flexDirection: 'column'
    }}>
    <Modal
      animationType="slide"
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => {
        setScanned(false);
      }}>
      <View style={{ flex: 1 }}>
        <WebView
          style={{ flex: 1 }}
          source={{uri: uri['uri']}}
        />

        <TouchableHighlight
          style={{
            backgroundColor:'black',
            padding: 15,
            alignItems: 'center'
          }}
          onPress={() => {
            setModalVisible(!modalVisible);
            setScanned(false);
          }}
          underlayColor='slategray'
        >
          <Text style={{ color:'white', fontSize: 15 }}>Re Scan</Text>
        </TouchableHighlight>
      </View>
    </Modal>

    <QRCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View style={{ marginBottom: 100 }}>
        <View style={{ alignItems: 'center', marginBottom: 5 }}>
          <Image
            style={{
              width: 100,
              height: 100,
              resizeMode: 'contain',
              marginBottom: 20,
            }}
            source={{ uri: 'omitted' }}
          />
          <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold', paddingBottom: 10}}>
            QR Code Reader
          </Text>
        </View>
        <View
          style={{
            borderColor: 'white',
            borderTopWidth: 5,
            borderBottomWidth: 5,
            borderLeftWidth: 1,
            borderRightWidth: 1,
            paddingVertical: 80,
            paddingHorizontal: 100,
          }}
        />

        <View style={{ alignItems: 'center', marginTop: 5 }}>
          <Text style={{ color: 'white', fontSize: 15}}>
            QR Scan...
          </Text>
        </View>
      </View>
    </QRCodeScanner>
    </View>
);
        }