react-native - React navigation and loading component in react native

Question

Hello I have a react component like which either display a list of items or opens another component which allowes me to select some value. Here is the code

    import React, { PureComponent } from "react";
    import { Text, View } from "react-native";
    import { withNavigationFocus } from "react-navigation-is-focused-hoc";
    import { NavigationActions } from "react-navigation";
    import { connect } from "react-redux";
    import ClassListing from '../../components/ClassListing/ClassListing';
    import Actions from "../../state/Actions";
    import { default as stackStyles } from "./styles";
    import {
      StyleCreator
    } from "../../utils";
    let styles = StyleCreator(stackStyles.IndexStyles)();



    @withNavigationFocus
    @connect(() => mapStateToProps, () => mapDispatchToProps)
    export default class ClassList extends PureComponent {
      static navigationOptions = ({ navigation }) => {
        const { params } = navigation.state;
        return {
          header: null,
          tabBarOnPress({ jumpToIndex, scene }) {
            params.onTabFocus();
            jumpToIndex(scene.index);
          },
        };
      };

      constructor(props) {
        super(props);
        this.state = {};
        console.ignoredYellowBox = ["Warning: In next release", "FlatList"];
      }

      componentDidMount() {
        console.log("componentDidMount");
        this.props.navigation.setParams({
          onTabFocus: this.handleTabFocus
        });
      }

      componentDidUpdate() {
        console.log("I am updated");
      }

      _handleNavigationBar = () => (
        <View style={styles.headerContainer}>
          <Text style={styles.headerLeftTitle}>Klasselister</Text>
        </View>
      );

      handleTabFocus = () => {
        this.props.resetClassList();

        // setTimeout(() => {
        //   this._openChildSchoolSelector();
        // },500);
      };

      _openChildSchoolSelector = () => {
        if (
          !this.props.childrenSelection.selectedDependant ||
          !this.props.childrenSelection.selectedSchool
        ) {
          console.log("navigate to child selector");
          this.props.navigation.dispatch(
            NavigationActions.navigate({
              routeName: "ChildSchoolSelector",
            })
          );
        }
      };

      render() {
        return (
          <View>
            {this._handleNavigationBar()}
            {this.props.classList &&
            this.props.classList.classList &&
            this.props.classList.classList.length > 0 ? (
              <ClassListing list={this.props.classList.classList} />
            ) : (
               null
              // this._openChildSchoolSelector()
            )}
          </View>
        );
      }
    }

    const mapStateToProps = (state) => {
      const { classList, childrenSelection } = state.appData;

      console.log("[Classlist] mapStateToProps", classList);
      console.log("[Classlist] mapStateToProps", childrenSelection);

      return {
        classList,
        childrenSelection
      };
    };

    const mapDispatchToProps = (dispatch) => ({
      resetClassList: () => {
        dispatch(Actions.resetClassList());
      },
    });

My issue is that when I come to this tab, I want to reset the list which came from server and then open the school selector again, which I am doing in handleTabFocus. But there I have to first call

1. this.props.resetClassList();
2. this._openChildSchoolSelector()

The issue is that this._openChildSchoolSelector() is called while this.props.resetClassList() hasn't fininshed.

this.props.resetClassList() works like this

it calls an action like this

static resetClassList() {
 return {
  type: ActionTypes.RESET_CLASS_LIST
};
}

which then cleans the classlist like this

case ActionTypes.RESET_CLASS_LIST:
 return createDefaultState();

in ClassListReducer.js

and also in ChildrenSelectionRedcuer.js

  case ActionTypes.RESET_CLASS_LIST:
  return createDefaultState();

Any hints to solve this? My project uses very old React navigation v1

One thing which I did was to use this

componentWillReceiveProps(nextProps) {
console.log(this.props);
console.log(nextProps);

if (
  nextProps.isFocused &&
  nextProps.focusedRouteKey == "ClassList" &&
  (!nextProps.childrenSelection.selectedDependant ||
    !nextProps.childrenSelection.selectedSchool)
) {
  console.log("componentWillReceiveProps");
  this._openChildSchoolSelector();
}

if (
  this.props.isFocused &&
  this.props.focusedRouteKey === "ClassList" &&
  nextProps.focusedRouteKey !== "ClassList"
) {
  console.log("reset");
  this.props.resetClassList();
}
}

But not sure if this is an elegant way of doing this