Какой компонент использовать класс или функционал?

Я пытаюсь использовать react-native-camera, и я хочу отправить токены с первой страницы на страницу камеры. как получить токен на странице камеры? Я не уверен, как решить эту проблему, я попытался изменить страницу камеры на компонент, основанный на функциях, но у меня появляется больше ошибок :) поэтому я был бы очень рад, если вы, ребята, мне поможете

первая страница - это функциональный компонент

import React from 'react';
import {View, Text, TouchableOpacity, ActivityIndicator} from 'react-native';

const first = () => {
  const token = '12345678';

  return (
    <View style = {{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      {isData?(
        <TouchableOpacity
        onPress = {() => {
          navigation.navigate('cameraV2', {token:token});
        }}
        style = {{
          height: 50,
          width: '80%',
          backgroundColor: '#f45f00',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Text style = {{fontWeight: 'bold', fontSize: 18}}>
          Giriş için tıklayın
        </Text>
      </TouchableOpacity>
      ):(
        <ActivityIndicator size='large' color='#0f0' />
      )}
    </View>
  );
};

export default first;

страница камеры - это компонент на основе классов

import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
import {RNCamera} from 'react-native-camera';


class cameraV2 extends Component {
  navigation = this.props.navigation;
  constructor(props) {
    super(props);
    this.camera = null;
    this.barcodeCodes = [];

    this.state = {
      token:this.navigation.token,
      is_camera: 0,
      is_loading: 0,
      barcodes: [],
      camera: {
        type: RNCamera.Constants.Type.back,
        flashMode: RNCamera.Constants.FlashMode.auto,
      },
    };
  }

  barcodeRecognized = ({barcodes}) => {
    barcodes.forEach(barcode => {
        if (barcode.type!=='UNKNOWN_FORMAT'){
          console.info(barcode.data)
            this.setState({barcodes});
        }
    });
  };

  render() {
    return (
      <View style = {styles.container}>
        <RNCamera
          ref = {ref => {
            this.camera = ref;
          }}
          defaultTouchToFocus
          flashMode = {this.state.camera.flashMode}
          mirrorImage = {false}
          //onBarCodeRead = {this.onBarCodeRead.bind(this)}
          onGoogleVisionBarcodesDetected = {this.barcodeRecognized}
          onFocusChanged = {() => {}}
          onZoomChanged = {() => {}}
          permissionDialogTitle = {'Permission to use camera'}
          permissionDialogMessage = {
            'We need your permission to use your camera phone'
          }
          style = {styles.preview}
          type = {this.state.camera.type}
        />
        <View style = {[styles.overlay, styles.topOverlay]}>
          <Text style = {styles.scanScreenMessage}>Please scan the barcode.</Text>
          <Text style = {styles.scanScreenMessage}>token: {this.state.token} </Text>
        </View>
        <View style = {[styles.overlay, styles.bottomOverlay]}>
          <Button
            onPress = {() =>
              this.navigation.navigate('second', {
                barcode: this.state.barcodes,
                token: token,
              })
            }
            style = {styles.enterBarcodeManualButton}
            title = "Enter Barcode"
          />
        </View>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  overlay: {
    position: 'absolute',
    padding: 16,
    right: 0,
    left: 0,
    alignItems: 'center',
  },
  topOverlay: {
    top: 0,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  bottomOverlay: {
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.4)',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  enterBarcodeManualButton: {
    padding: 15,
    backgroundColor: 'white',
    borderRadius: 40,
  },
  scanScreenMessage: {
    fontSize: 14,
    color: 'white',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  },
};

export default cameraV2;