How do transfer data across multiple pages in my React Native app?

I am creating an app using JavaScript and React Expo that needs a functionality where when I press a button it redirects the user to a page based on the button pressed, and that page has data from the previous page.

I’m using Expo Router for my page navigation.

Here is some of my current code of the page that has all the button options:

export default function createplanhome() {
    const [name, setName] = useState('');
    return (
        <View style={styles.container}>
            <View style={styles.columnContainer}>
                <Image source={require('./assets/logo.png')} style={styles.image} />
                <Text style = {styles.nameText}>Plan Name:</Text>
                    <TextInput 
                            style={styles.input} 
                            placeholder='e.g. Push Pull Legs'
                            onChangeText={(val) => setName(val)}
                        />
                <Link href="/pages/viewmonday" style = {styles.buttons}>Monday</Link>
                <Link href="/pages/viewtuesday" style = {styles.buttons}>Tuesday</Link>
                <Link href="/pages/viewwednesday" style = {styles.buttons}>Wednesday</Link>
                <Link href="/pages/viewthursday" style = {styles.buttons}>Thursday</Link>
                <Link href="/pages/viewfriday" style = {styles.buttons}>Friday</Link>

However, I have a separate page for each day of the week, which is not ideal – I just want to change this so that it’s only one page that can change its data based on what day is selected.

Here is the code for each day – the only thing changing is the name of the day, i.e. where it says "Monday" in the following code.

export default function viewmonday() {
    return (
        <View style={styles.container}>
            <Image source={require('./assets/logo.png')} style={styles.image} />
            <View style={styles.columnContainer}>
                <Text style = {styles.nameText}>Monday</Text>

I’d appreciate any help for this – thanks.

I tried to use a variable in each of the view day pages, but I’m not sure how to change that variable from the previous page’s choice.

return(
        <View style={styles.container}>
            <Image source={require('./assets/logo.png')} style={styles.image} />
            <View style={styles.columnContainer}>
               <Text style={styles.nameText}>{displayDay}</Text>

>Solution :

The main thing I would say you should try to do is use a map. A map lets you iterate through some values and works similar to a loop in other languages. You can set the map to iterate through a list of all of the weekdays and create a button/href for each one. Furthermore, use router.push in order to send the value of the day to the new page as part of params. It should look something like this:

{['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map((day) => (
                <TouchableOpacity
                    key={day}
                    style={styles.buttons}
                    onPress={() => router.push({ pathname: '/pages/viewday', params: { day } })}
                >
                    <Text style={styles.buttons}>{day}</Text>
                </TouchableOpacity>
            ))}

This should solve both of your main issues in terms of not having a separate link for each weekday. (I used TouchableOpacity but you can use anything else you want)

Replace /viewmonday with /viewday and use the method useLocalSearchParams() in order to get the params from the previous page

export default function viewday() {
    const selectedDay = useLocalSearchParams();
    const displayDay = selectedDay["day"];
   return(
    
               <Text style={styles.nameText}>{displayDay}</Text>

)