Abstract navigationOptions react navigation

Question

I have many stacks with the same navigation options. How do I abstract the navigationOptions part to have it repeat in all my stacks?

export const MakePaymentStack = createStackNavigator(
  {
    PaymentsBpayNewScreen,
    PaymentsBpayNewAmountScreen,
  },
  {
    ...defaultNavStyle,
    initialRouteName: APP_SCREENS.PaymentsBpayNewScreen,
  },
);
(MakePaymentStack as any).navigationOptions = () => ({
  animationEnabled: true,
  gesturesEnabled: false, // disable swipe down to dismiss on iOS
});

and like that all the others:

export const StatementsStack = createStackNavigator(
  {
    StatementPdfScreen,
  },
  {
    ...defaultNavStyle,
    initialRouteName: APP_SCREENS.StatementPdfScreen,
  },
);
(StatementsStack as any).navigationOptions = () => ({
  animationEnabled: true,
  gesturesEnabled: false, // disable swipe down to dismiss on iOS
});

How can I abstract the "navigationOptions"?

Answer 1

What I would suggest is to wrap createStackNavigator in another function where you mimic the API but with different defaults.