J'essaie donc de transférer une variable const d'un fichier à un autre. Pour une raison quelconque, je ne peux pas y accéder et il ne me permet pas de l'afficher dans un fichier texte. Vous trouverez ci-dessous le code homepage.js et le fichier pay.js. J'essaie de transférer la variable displayAmount du fichier de la page d'accueil vers le fichier premium, puis de l'afficher dans un élément de texte. Cependant, lorsque je fais cela, j'obtiens cette erreur "Erreur : la chaîne de texte doit être rendue dans un composant

import { StyleSheet, Text, View, Image, Dimensions, TouchableOpacity, Alert, Animated } from 'react-native';
import { FontAwesome5 } from '@expo/vector-icons';
import React, { useState, useEffect, useRef } from 'react';
import { useNavigation } from '@react-navigation/native';
import pay from './pay';

const homepage = ({ route, navigation }) => {
  const [selectedAmount, setSelectedAmount] = useState("0");
  const [displayedAmount, setDisplayedAmount] = useState("0");
  const fadeAnim = new Animated.Value(0);  // initial opacity
  const screenWidth = Dimensions.get('window').width;
  const buttonWidth = screenWidth * 0.45;
  const spaceBetweenNumbers = 100;
  
  
  useEffect(() => {
    Animated.timing(
      fadeAnim,
      {
        toValue: 1,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();
    
    if (selectedAmount.includes('.')) {
        const [whole, decimal] = selectedAmount.split('.');
        setDisplayedAmount(`${isNaN(parseInt(whole)) ? "0" : parseInt(whole).toLocaleString()}.${decimal}`);
      } else {
        setDisplayedAmount(isNaN(parseInt(selectedAmount)) ? "0" : parseInt(selectedAmount).toLocaleString());
      }

    Animated.timing(
      fadeAnim,
      {
        toValue: 0,
        duration: 1000,
        useNativeDriver: true,
      }
    ).start();

  }, [selectedAmount]);

  const handleNumberPress = (number) => {
    if (selectedAmount.length < 5) {
      setSelectedAmount(prevState => prevState === "0" ? String(number) : prevState + number);
    }
  };

  const handleDecimalPress = () => {
    if (!selectedAmount.includes(".") && selectedAmount.length < 4) {
      setSelectedAmount(prevState => prevState + ".");
    }
  };

  const handleDeletePress = () => {
    setSelectedAmount(prevState => prevState.slice(0, -1) || "0");
  };
  const goTopay = () => {
    navigation.navigate('Pay', { displayedAmount }); // passing displayedAmount as a parameter
  };

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import React from 'react';
 import { Feather } from '@expo/vector-icons';
 import { createStackNavigator } from '@react-navigation/stack';
 import homepage from './homepage';
 import displayedAmount from './homepage'
 
 
 const Pay = ({ route, navigation }) => {
     const { displayedAmount } = route.params;
     const goToHome = () => {
     navigation.navigate('Homepage'); // The corrected screen name should be 'Homepage' instead of 'homepage'
   };
 
   return (
     <View>
       <TouchableOpacity onPress={goToHome}>
         <Feather name="x" color="black" size={30} style={styles.cross} />
       </TouchableOpacity>
       <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 95,
   }}
 />
 <Text style={styles.to}>To</Text>
 <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 55,
   }}
 />
 <Text style={styles.for}>For</Text>
 <View
   style={{
     borderBottomColor: 'grey',
     borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 55,
   }}
 />
 <Text>{displayedAmount}</Text> {/* Display the displayedAmount */}
     </View>
     
   );
 };
 
 export default Pay;
 
 const styles = StyleSheet.create({
   cross: {
     position: 'absolute',
     left: 15,
     top: 50,
   },
   to:{
     fontFamily: 'CashMarketMedium',
     fontSize: 16,
     position: 'absolute',
     left: 19,
     top: 110,
   },
   for:{
     fontFamily: 'CashMarketMedium',
     fontSize: 16,
     position: 'absolute',
     left: 19,
     top: 165,
   },
   line: {
     position: 'absolute',
     left: 15,
     top: 50 + 36 + 4, // To position the line below the 'x' icon, we add its size (36) and some margin (4)
     width: '100%',
     height: 1,
     backgroundColor: 'grey',
   },
 });