React Native Expo Barcode Scanner Navigation

I'm new to react native and expo and I followed a tutorial online for a barcode scanning app using expo, but it didn't cover how to navigate away from the expo camera app to another screen and I can't really figure it out. I have the scanner working and I created a django rest backend with the qrcode data, but it only applies the name of the file and I'm looking to navigate to a page that also contains the name and description that is listed in my django model. I'm sure I probably have to update my django model in some way, but I really could use some help in the code. Here is my django model:

from django.db import models
import qrcode
from io import BytesIO
from django.core.files.base import ContentFile
from PIL import Image


class Event(models.Model):
   name = models.CharField(max_length=200)
   description = models.TextField()
   qr_code = models.ImageField(blank=True, upload_to='qrcodes/')
   date = models.DateField()

   def __str__(self):
        return str(self.name)

   def save(self, *args, **kwargs):
    if not self.qr_code:
        qrcode_img = qrcode.make(self.name)
        canvas = Image.new('RGB', (qrcode_img.pixel_size, qrcode_img.pixel_size), 'white')
        canvas.paste(qrcode_img)
        fname = f'{self.name}.png'
        buffer = BytesIO()
        canvas.save(buffer, 'PNG')
        self.qr_code.save(fname, ContentFile(buffer.getvalue()), save=False)
    super().save(*args, **kwargs)

and here is my barcode scanner screen in react:

import React, { useState, useEffect } from "react";
import { Text, View, StyleSheet, Button } from "react-native";
import { CameraView, Camera } from "expo-camera";
import { useNavigation } from "@react-navigation/native";

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    const getCameraPermissions = async () => {
      const { status } = await Camera.requestCameraPermissionsAsync();
      setHasPermission(status === "granted");
    };

    getCameraPermissions();
  }, []);

  const navigation = useNavigation()
  const handleBarCodeScanned = ({ type, data }) => {

    setScanned(true);
    // alert(`Bar code with type ${type} and data ${data} has been scanned!`);

    if (data) {
        navigation.navigate('Event', {eventId: data} )
    }
  };

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

  return (
    <View style={styles.container}>
      <CameraView
        onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
        barcodeScannerSettings={{
          barcodeTypes: ["qr", "pdf417"],
        }}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && (
        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "center",
  },
});

lastly here is the event screen that I want to navigate to based on the barcode

import { useNavigation, useRoute } from "@react-navigation/native";
import { useLayoutEffect } from "react";
import { View, Text, StyleSheet } from "react-native";
import { HeaderBackButton } from '@react-navigation/elements';

const EventDetailScreen = () => {
    const route = useRoute()
    const navigation = useNavigation()

    const {eventId, name, description} = route.params

    useLayoutEffect(()=> {
        navigation.setOptions({
            headerTitle: name,
            headerLeft: () => (
                <HeaderBackButton
                    tintColor="white"
                    onPress={()=> navigation.goBack()}
                />
            )
        }, [])
    })

    return (
        <View style={ Styles.screen }>
            <Text style={{fontSize: 20}} >This is the event detail screen for {eventId}</Text>
            <Text style={{fontSize: 20}} >{name}</Text>
            <Text style={{fontSize: 20}} >{description}</Text>
        </View>
    );
}

const Styles = StyleSheet.create({
    screen: {
        padding:20,
    }
})

export default EventDetailScreen

Any assistance would be greatly appreciated. Thank you in advance

As you have mentioned,

if (data) {
    navigation.navigate('Event', {eventId: data} )
}

For ex:- if the 'Event' contains the string which can be the navigating page title, for example:

javascript

        import Keypage from './key_page'
<Stack.Screen name="Keypage" component={Keypage} options={{ headerShown: false, animationEnabled: true, animationEnabled: true, gestureEnabled: false }} />

If the 'Event' is 'Keypage', the screen simply navigates to the 'Keypage' screen with the prop eventId as the data from the scanner screen.

Back to Top