I'm encountering an issue in my React Native Expo project where I'm passing a photoURL as a parameter between screens using Expo Router, but the received value is different from the original one. I am storing the photos in firebase storage. Here's a simplified overview of my setup:
I have a main screen where I fetch user data, including the photoURL, and navigate to another screen (let's call it Screen2) when a marker is pressed on the map. I'm passing the photoURL as a parameter to the Screen2 screen using Expo Router's navigation prop.
Here's the relevant code snippet from the main screen where I navigate to the Screen2:
const onMarkerPressed = useCallback((userData) => {
const userparams = { userData: JSON.stringify(userData), photoURL: userData.photoURL };
router.navigate({ pathname: '/screen2', params: userparams });
}, [userLocation]);
And here's how I'm accessing the photoURL in the Screen2:
const params = useLocalSearchParams();
const { photoURL } = params;
console.log("photoURL", photoURL)
The problem is that the photoURL received in the Screen2 is different from the original photoURL fetched in the main screen.
I've checked the data flow and confirmed that the photoURL passed as a parameter from the main screen is correct. However, when I log the photoURL in the Screen2, it's a different value.
photoURL in the main screen: https://firebasestorage.googleapis.com/app-name/o/Users%2F1702579717947?alt=media&token=02d60b8b-09e7-4d1c-aa3f-902de123396b
photoURL received as param: https://firebasestorage.googleapis.com/app-name/o/Users/1702579717947?alt=media&token=02d60b8b-09e7-4d1c-aa3f-902de123396b
The difference is in Users/. The correct one has '%2F' instead of '/'
Can someone please help me understand why the photoURL value is changing between screens and how to resolve this issue?
Any insights or suggestions would be greatly appreciated. Thank you!