How can I display a modal with info from a scanned QR code? - react-native

Question

Tech stack: Expo, React-Native
Using: expo-barcode-scanner
I am trying to create an app that will scan a QR code and then display the info from the QR code on the screen, preferably in a modal so I can display an image.
I've created an app that will do that... except that it uses an alert function to show the text. How can I change it to a modal? When I try to change it to modal, or return a modal it doesn't work.
My code:
import React, { useCallback, useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image, Button, Modal } from 'react-native';
import { BarCodeScanner } from 'expo-barcode-scanner';
import {createCustomerInformation2} from './src/graphql/mutations'
import logo from './assets/icon.png';
import Scanner from './components/QRScanner';
import custModal from './components/custInfo'
export default function App() {
const [hasPermission, setHasPermission] = useState(null);
const [scanned, setScanned] = useState(false);
// const [modalVisible, setModalVisible] = useState(false);
useEffect(() => {
(async () => {
const { status } = await BarCodeScanner.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
const handleBarCodeScanned = ({ type, data }) => {
setScanned(true);
var newData = JSON.parse(data)
// return(
// <View>
// <Modal>
// <View>
// <Text>Test</Text>
// </View>
// </Modal>
// </View>
// )
alert(`
Customer: ${newData.name}
Email: ${newData.email}
Phone: ${newData.phone}
Favorite Drink: ${newData.favoriteDrink}
`);
// createCustomerInformation2(newData)();
};
if (hasPermission === null) {
return <Text>Requesting for camera permission</Text>;
}
if (hasPermission === false) {
return <Text>No access to camera</Text>;
}
return (
<View id="view" style={styles.container}>
<BarCodeScanner
onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
style={StyleSheet.absoluteFillObject}
// If you want to use the front facing or rear facing, include type={'front'} or put 'back'
/>
{scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
},
});

Answer 1

Instead of returning that JSX in the onBarCodeScanned handler, you'll need to include it in the returned JSX of your App. You'll want to conditionally hide the modal when no value is present. You'll then populate it by assigning the scanned value to a state variable in the event handler and displaying that value in the modal.