Навигация по сканеру штрих-кода React Native Expo

Я новичок в react native и expo, и я следовал учебнику в Интернете для приложения для сканирования штрих-кодов с помощью expo, но он не охватывает, как перейти от приложения камеры expo к другому экрану, и я не могу понять это. У меня работает сканер, и я создал django rest backend с данными qrcode, но он применяет только имя файла, а я хочу перейти на страницу, которая также содержит имя и описание, перечисленные в моей модели django. Я уверен, что мне, вероятно, придется каким-то образом обновить мою модель django, но я действительно мог бы использовать некоторую помощь в коде. Вот моя модель django:

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)

и вот мой экран сканера штрих-кодов в 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",
  },
});

И наконец, вот экран событий, на который я хочу перейти на основе штрихкода

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

Любая помощь будет очень признательна. Заранее спасибо

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

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