React Navigation (v4) sequential navigator

createSequentialNavigator.js

// @flow
import React, { Component } from 'react';
import _ from 'lodash';
import createStackNavigator from './createStackNavigator';

type Props = {
  navigation: *,
};

const DEFAULT_CONFIG = {
  sequentialNavigationOptions: {
    order: null,
  },
};

export default (routes: *, localConfig: * = {}) => {
  const config = _.merge({}, DEFAULT_CONFIG, localConfig);
  const { order } = config.sequentialNavigationOptions;

  const Navigator = createStackNavigator(routes, config);

  return class extends Component<Props> {
    static router = Navigator.router;
    props: Props;

    routeNames: string[] = [];
    sharedParams = {};

    constructor(props: Props) {
      super(props);

      this.routeNames = order;

      if (typeof this.routeNames === 'function') {
        this.routeNames = this.routeNames(props.navigation);
      }
      if (!this.routeNames) {
        this.routeNames = Object.keys(props.navigation.router.childRouters);
      }
    }

    onChange = (params: *) => {
      this.sharedParams = { ...this.sharedParams, ...params };
    };

    onSubmit = () => {
      const { navigation } = this.props;

      const currentRouteName =
        navigation.state.routes[navigation.state.index].routeName;
      const currentRouteIndex = this.routeNames.indexOf(currentRouteName);
      const nextRouteName = this.routeNames[currentRouteIndex + 1];

      if (!nextRouteName) {
        navigation.dismiss();
        navigation.getParam('onComplete', () => {})();
        return;
      }

      const routeParams = {
        ...navigation.state.params,
        ...this.sharedParams,
      };

      navigation.navigate(nextRouteName, routeParams);
    };

    render() {
      const { navigation } = this.props;
      const screenProps = {
        ...navigation.getScreenProps(),
        onChange: this.onChange,
        onSubmit: this.onSubmit,
      };

      return <Navigator navigation={navigation} screenProps={screenProps} />;
    }
  };
};

sample.js

import React from 'react';
import { withMappedNavigationProps } from 'react-navigation-props-mapper';
import { createSequentialNavigator } from './createSequentialNavigator';

import { ReviewRating, ReviewText } from './screens/review';

const ReviewStack = createSequentialNavigator(
  {
    ReviewRating: {
      screen: withMappedNavigationProps()(ReviewRating),
    },
    ReviewText: {
      screen: withMappedNavigationProps()(ReviewText),
    },
  },
  {
    initialRouteName: 'ReviewRating',
    defaultNavigationOptions: {
      title: "Submit Your Review",
    },
    sequentialNavigationOptions: {
      order: navigation => {
        if (navigation.getParam('onlyRaring')) {
          return ['ReviewRating'];
        }
        return [
          'ReviewRating',
          'ReviewText',
        ];
      },
    },
  },
);