using react-native-camera with react-native-navigation

I just started react-native and I made a multi screen android application (by using react-native-navigation. My screens are functions as shown in examples of screen navigation but now I want to use the camera in the 2nd screen.

An idea of how my code looks:

import React, {Component} from 'react';import { Platform, StyleSheet, Text, View, ScrollView, TextInput, Button, Image } from 'react-native';import {NavigationContainer} from '@react-navigation/native';import {createStackNavigator} from '@react-navigation/stack';import { RNCamera, FaceDetector } from 'react-native-camera';export default function App() {    return (<NavigationContainer><Stack.Navigator><Stack.Screen            name="Screen1"            component={Screen1}          /><Stack.Screen name="Screen2" component={Screen2} /></Stack.Navigator></NavigationContainer>  );}function Screen1({navigation}) {  return (<View style={styles.container}><Button        title="Go to screen 2"        onPress={() => navigation.navigate('Screen2', {mode: 'dev'})} // passing parameters: mode      /></View>  );}function Screen2({navigation}) {  return (<View><RNCamera        ref={ref => {          this.camera = ref        }}        style={styles.scanner}      /></View>  );}

I get the error: TypeError: undefined is not an object (evaluating '_this.camera=_ref3') in screen2.

Though this error does not come when I define the App as one class and put the camera on the first screen (and not be able to navigate because react-native-navigation uses functions for screens).

Apologies if I sound naive I'm new to react.