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(

   def save(self, *args, **kwargs):
    if not self.qr_code:
        qrcode_img = qrcode.make(
        canvas ='RGB', (qrcode_img.pixel_size, qrcode_img.pixel_size), 'white')
        fname = f'{}.png'
        buffer = BytesIO(), 'PNG'), 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");

  }, []);

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

    // 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}>
        onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
          barcodeTypes: ["qr", "pdf417"],
      {scanned && (
        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />

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(()=> {
            headerTitle: name,
            headerLeft: () => (
                    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>

const Styles = StyleSheet.create({
    screen: {

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:


        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