Why can't I transfer const variables to different React files

Question

So I'm trying to transfer const variables from one file to another. For some reason I can't access it and it won't let me display it in a text file. Below are the homepage.js code and pay.js file. I'm trying to transfer the displayedAmount variable from the homepage file to the premium file and then display it in a text element. However, when I do this, I get this error "Error: The text string must be rendered within the component."

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',
   },
 });

Answer 1

Several options:

1. For static values, export the value in non-nested const. It's common to separate constants so that if two components require the same constant and one requires the other, no require loop is created. FYI, export constants are named export VS default export. So you need to use braces to import.

//constants file
export const value1 = '123456'

// component file
import { value1 } from '../constants'

2. For stateful values ​​that need to be exported across applications, check out the React.Context API or the global state management library.
3. For child components, you can pass data to the component through props.
4. For React-navigation screen navigation, you can send parameters to the screen through the params object.