Updating TabNavigator Labels With Data Fetched From An API Call

I have an app which has multiple stack navigators, one of which has a createMaterialTopTabNavigator inside it which shows me a list. Now for each of the tabs i get a count of the items inside it, i fetch these count through a separate API call (Count for all tabs is fetched through a single API). By default i am able to show a static tabLabel. What i need to do is to show the count of each of the tabs in their labels(tab titles).

Navigator Code:

import React from "react";
import { View } from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation";
import SellerListingScreen from "screens/App/SellerListingScreen/SellerListingScreen";

const SellerListingNavigator = createMaterialTopTabNavigator(
  {
    PendingSellers: {
      screen: () => <SellerListingScreen type={0} />,
      navigationOptions: {
        title: "Pending(<show count here>)"
      }
    },
    CompletedSellers: {
      screen: () => <SellerListingScreen type={1} />,
      navigationOptions: {
        title: "Completed(<show count here>)"
      }
    }
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: "#00cc99"
      }
    },
    lazy: true
  }
);

export default SellerListingNavigator;

Ok i managed to solve it by creating a custom navigator white extending my existing tabNavigator & passing the required params to screenProps

import React from "react";
import { createMaterialTopTabNavigator } from "react-navigation";
// @ts-ignore
import SellerListingScreen from "screens/App/SellerListingScreen/SellerListingScreen";
// @ts-ignore
import { getItem } from "utils/interactAsyncStorage";

const SellerListingNavigator = createMaterialTopTabNavigator(
  {
    PendingSellers: {
      screen: () => <SellerListingScreen type={0} />,
      navigationOptions: ({ screenProps }) => ({
        title: `Pending (${screenProps.pending})`
      })
    },
    CompletedSellers: {
      screen: () => <SellerListingScreen type={1} />,
      navigationOptions: ({ screenProps }) => ({
        title: `Completed (${screenProps.completed})`
      })
    }
  },
  {
    tabBarOptions: {
      style: {
        backgroundColor: "#00cc99"
      }
    },
    lazy: true
  }
);

class customSellerListingNavigator extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pending: 0, completed: 0 };
  }
  static router = SellerListingNavigator.router;
  _fetchPickupCounts = async () => {
    const userData = await getItem("UserData");
    const headers = {
      "Content-Type": "application/json",
      "Session-Token": userData.sessionToken,
    };
    const baseUrl = "baseurl here";
    const url = `${baseUrl}/pickupCount/`;

    return await fetch(url, {
      method: "post",
      headers: headers
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({
          pending: responseJson.pending,
          completed: responseJson.completed
        });
      })
      .catch(error => {
        console.error(error);
      });
  };

  componentDidMount() {
    this._fetchPickupCounts();
  }
  render() {
    const { navigation } = this.props;

    return (
      <SellerListingNavigator
        navigation={navigation}
        screenProps={{
          pending: this.state.pending,
          completed: this.state.completed
        }}
      />
    );
  }
}

export default customSellerListingNavigator;