Условно отрендерить TabNavigators

Question

У меня есть требование, при котором я должен отображать вкладки по условию и должен поддерживать один компонент поиска в верхней части экрана, который является общим для содержимого всех 3 вкладок. Вы можете проверить этот снимок экрана, чтобы получить лучшее представление. Ввод текста будет отправлен на все вкладки с помощью screenProps, чтобы они могли соответствующим образом фильтроваться.

В компоненте экрана render () У меня есть это,

return (
            <SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>

                <View style={{ flex: 1, backgroundColor: 'white' }}>

                    {this.getStatusBar()}

                    <CustomSearchBar
                        onChangeText={this.setSearchPhrase}
                        onSubmitEditing={this.onSearchPress}
                        placeholder={I18n.t('searchEntities')} />

                    {this.getTabs()}

                </View>

            </SafeAreaView>
        );

Вот как я отображаю вкладки условно,

getTabs = () => {
        const { entityType } = this.props.parentEntity;

        if (entityType === appConstants.entityTypeEstate) {
            return (
                <EstateDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else if (entityType === appConstants.entityTypeBuilding) {
            return (
                <BuildingDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else if (entityType === appConstants.entityTypeRoom) {
            return (
                <RoomDrillDownTabs
                    screenProps={screenProps}
                    navigation={this.props.navigation} />);
        } else {
            if (__DEV__) console.error(`ERROR!`);
        }
    };

И, конечно, это означает, что у меня создано 3 навигатора вкладок.

const EstateDrillDownTabs = createMaterialTopTabNavigator({
    Building: {
        screen: BuildingTab,
    },
    Site: {
        screen: SiteTab,
    },
    TechConst: {
        screen: TechConstTab,
    }
}, { ... });

const BuildingDrillDownTabs = createMaterialTopTabNavigator({
    Section: {
        screen: SectionTab,
    },
    Room: {
        screen: RoomTab,
    },
    Object: {
        screen: ObjectTab,
    }
}, { ... });

const RoomDrillDownTabs = createMaterialTopTabNavigator({
    Object: {
        screen: ObjectTab,
    }
}, { ... });

Моя проблема возникла при переходе с v1 на v3, где я должен предоставить Class.router.

Согласно руководству здесь Я выставляю это, как показано ниже.

static router = {
        ...EstateDrillDownTabs.router,
        getStateForAction: (action, lastState) => {
            return EstateDrillDownTabs.router.getStateForAction(action, lastState);
        },
    };

Это работает нормально, как и ожидалось, когда условие для EstateDrillDownTabs выполнено, но другие вещи явно ломаются. Как я могу установить статический маршрутизатор условно или как-то иначе настроить маршрутизатор в соответствии с моими требованиями?