Filipe-qrcode.js

import React, {useState, useRef} from 'react';
import {
  View,
  WebView,
  Text,
  Linking,
  Dimensions,
  StyleSheet,
} from 'react-native';

import QRCodeScanner from 'react-native-qrcode-scanner';
import ModalWebView from './components/ModalWebView';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  touchable: {
    padding: 16,
  },
  text: {
    fontSize: 21,
    color: 'rgb(0,122,255)',
  },
  cameraContainer: {
    height: Dimensions.get('window').height,
  },
});

const QRCodeScreen = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [success, setSuccess] = useState(null);
  const [url, setUrl] = useState('');
  const scanner = useRef(null);

  const openLink = () => {
    Linking.openURL(url).catch((err) => alert('An error occured', err));
  };

  const handleButton = () => {
    setModalVisible(!modalVisible);
    if (scanner.current) {
      scanner.reactivate();
    }
  };

  const onSuccess = async (e) => {
    setSuccess(true);
    setModalVisible(true);
    setUrl(e.data);
  };

  return (
    <View style={styles.container}>
      <QRCodeScanner
        onRead={onSuccess}
        showMarker={true}
        checkAndroid6Permissions={true}
        ref={scanner}
        cameraStyle={styles.cameraContainer}
        bottomContent={
          <View style={styles.touchable}>
            {success && <Text style={styles.text}>OK. Got it!</Text>}
          </View>
        }
      />
      <ModalWebView
        handleButton={handleButton}
        modalVisible={modalVisible}
        url={url}
        openLink={openLink}
      />
    </View>
  );
};

export default QRCodeScreen;