Avoid repeating params in stack navigation

I am building the auth part of the stack navigation for a react navigation app, and ended with something like thiss:

 <Stack.Screen
        name="a"
        component={a}
        initialParams={{ url }}
      />
      <Stack.Screen name="f" component={f} />
      <Stack.Screen
        name="b"
        component={b}
        initialParams={{ url }}
      />
      <Stack.Screen
        name="c"
        component={c}
        initialParams={{ url }}
      />
      <Stack.Screen
        name="d"
        component={d}
        initialParams={{ url }}
      />

Is there any way I can avoid adding the url initialParams everywhere and add it maybe to the stack group screen around?

I tried to add it in the screenOptions prop in the stack group around, but didn’t work.

Do you guys have any suggestion?

Thanks!

Answer

You can create an object and use spread operator on components.

 const initialParams = { initialParams: { url } };


 <Stack.Screen
        name="a"
        component={a}
        {...initialParams}
      />