CODEWITHSUNDEEP
react-nativereact-navigation
daybreaker
daybreaker

Reputation: 1420

React Native + React Navigation v5 - sending params between two stacks works on simulator, but not on a real device

So, I have a Tab Navigator, and a Stack on each tab. Below is a simplified setup. 

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeStack} />
  <Tab.Screen name="PlanStack" component={PlanStack} />
</Tab.Navigator>

function HomeStack() {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="Dashboard" component={Dashboard} />
    </Stack.Navigator>
  )
}

function PlanStack() {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen name="Plans" component={Plans} />
      <Stack.Screen name="Plan" component={Plan} />
    </Stack.Navigator>
  )
}

In my Dashboard, I have a list of plans, and I have a TouchableOpacity on each plan, with this onPress:

onPress={() => { navigate('PlanStack', {
  screen: 'Plan',
  params: { planId }
}) }}

In the iOS simulator, the planId is sent, but when I build the app and deploy to Test Flight, the param object is empty.

I'd appreciate any thoughts or ideas on what could be happening. Thanks!

Upvotes: 2

Views: 94

Answers (1)

daybreaker
daybreaker

Reputation: 1420

Lol, whoops. It was my own dumb mistake:

Apparently if you pass an undefined value to an object it just drops that key.

So in my case, I was sending params: { selectedName: undefined }, and since that was the only key, it was returning params: {} which I was mis-interpreting as a react-navigation issue about not sending my params.

So why was this different on dev (simulator) vs staging (TestFlight device) for me? The time honored tradition of the Staging API being out of sync with my local dev API. "Selected Name" is a value that comes back nested inside a few other objects, and the branch that added it to the api response wasnt deployed to staging!

Upvotes: 1

Related Questions