Chapter 13: Passing Data Between Screens in Expo React Native

13.1 Passing Parameters in Expo Navigation

Passing data between screens is a common requirement in React Native applications. In Expo Router, parameters can be passed as props to the destination screen.

Example:

1. Sending Parameters:

   import { Link } from "expo-router";
   
   function HomeScreen() {
     return (
       <Link href="/details?itemId=42&otherParam=anything">Go to Details</Link>
     );
   }
   

2. Receiving Parameters:

   import { useSearchParams } from "expo-router";
   
   function DetailsScreen() {
     const { itemId, otherParam } = useSearchParams();
     return (
       <View>
         <Text>Item ID: {itemId}</Text>
         <Text>Other Param: {otherParam}</Text>
       </View>
     );
   }
   

13.2 Sharing Data Across Expo Router Nested Navigation

In complex apps, you often need to pass data across nested navigations. This can be achieved seamlessly using the Expo Router and Context API.

Example:

Suppose you have a nested navigation structure and want to share a piece of state between different screens within nested routes.

1. Define the nested routes:

   // app/screens/settings/index.js
   export default function SettingsIndex() {
     return <Text>Settings Home</Text>;
   }
   
   // app/screens/settings/profile.js
   export default function ProfileScreen() {
     const [state] = useContext(AppContext);
     return <Text>User: {state.user.name}</Text>;
   }
   

2. Use context in nested routes:

   import { useContext } from "react";
   import { AppContext } from "../../context/AppContext";
   
   function ProfileSettingsScreen() {
     const [state, setState] = useContext(AppContext);
   
     return (
       <View>
         <Text>Current User: {state.user ? state.user.name : "Guest"}</Text>
       </View>
     );
   }
   

13.3 Handling Complex Data Structures

When dealing with complex data structures, such as arrays or nested objects, passing this data efficiently is crucial. The Context API shines in this scenario.

Example:

Assume you have a user profile with deeply nested preferences, and you want to pass this data across screens:

1. Structure the Data:

   const initialState = {
     user: {
       name: "John Doe",
       preferences: {
         notifications: true,
         privacy: {
           shareLocation: false,
           adPersonalization: true,
         },
       },
     },
   };
   

2. Accessing Nested Data:

   function PreferencesScreen() {
     const [state] = useContext(AppContext);
   
     return (
       <View>
         <Text>
           Share Location:{" "}
           {state.user.preferences.privacy.shareLocation ? "Yes" : "No"}
         </Text>
         <Text>
           Ad Personalization:{" "}
           {state.user.preferences.privacy.adPersonalization
             ? "Enabled"
             : "Disabled"}
         </Text>
       </View>
     );
   }
   

3. Updating Complex Structures:

   function TogglePrivacySettings() {
     const [state, setState] = useContext(AppContext);
   
     const toggleLocation = () => {
       setState({
         ...state,
         user: {
           ...state.user,
           preferences: {
             ...state.user.preferences,
             privacy: {
               ...state.user.preferences.privacy,
               shareLocation: !state.user.preferences.privacy.shareLocation,
             },
           },
         },
       });
     };
   
     return <Button title="Toggle Location Sharing" onPress={toggleLocation} />;
   }
   

---

This chapter ensures that students understand how to efficiently pass data between screens in an Expo React Native app using Expo Router, Context API, and Provider, all while managing more complex state structures.