Avoid repeating params in stack navigation

Question

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 1

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

 const initialParams = { initialParams: { url } };


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