(React-native-tab-view) Используете navigation.navigate в TabBar?

Я новичок в React Native и создаю приложение для одного из наших клиентов.

Я создал экран, на котором отображается список имен, которые могут отображаться в алфавитном порядке или сгруппированы по категориям. Я использовал компонент react-native-tab-view, чтобы заставить эту работу работать. Каждая из двух вкладок отображает свой собственный компонент экрана, ScreenMapAlpha (показывает FlatList) и ScreenMapCategory (показывает SectionList).

Для каждой renderItem опоры этих списков я хотел сделать каждый элемент доступным для кликов с помощью TouchableOpacity, превратив его в страницу с подробностями, однако мне не удалось заставить работать функцию navigation.navigate (), поскольку я продолжаю получать это сообщение:

TypeError: undefined не является объектом (оценка '_this3.props.navigation.navigate')

Я читал документацию Github response-native-tab-view но я не смог найти способ передать объект навигации в оба компонента экрана Alpha / Category, чтобы он работал.

Мой код выглядит так:

import * as React from 'react';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import ScreenMapAlpha from '../screens/map_alpha';
import ScreenMapCategory from '../screens/map_cat';
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';

const initialLayout = { width: Dimensions.get('window').width };

const renderTabBar = props => (
  <TabBar
    {...props}
    indicatorStyle={{ backgroundColor: '#fff' }}
    style={{ backgroundColor: '#c00' }}
  />
);

export default function ScreenMap({ navigation }) {
    const [index, setIndex] = React.useState(0);
    const [routes] = React.useState([
        { key: 'first', title: 'Alphabetical' },
        { key: 'second', title: 'Category' }
    ]);

    const renderScene = SceneMap({
        first: ScreenMapAlpha,
        second: ScreenMapCategory
    });

    return (
        <TabView
            navigationState={{index, routes}}
            renderScene={renderScene}
            onIndexChange={setIndex}
            renderTabBar={renderTabBar}
            initialLayout={initialLayout}
            navigation={navigation}
        />
    )  
}

map_alpha.js

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, FlatList, Image, TouchableOpacity } from 'react-native';
import TenantListAlpha from '../shared/tableTenantAlpha';

export default function ScreenMapAlpha({ navigation }) {       
    return (
        <View style={styles.container}>
            <TenantListAlpha navigation={navigation} />
        </View>
    )  
}

map_cat.js

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import TenantListCat from '../shared/tableTenantCat';

export default function ScreenMapCategory({ navigation }) {
    return (
        <View style={styles.container}>
            <TenantListCat navigation={navigation} />
        </View>
    )  
}   

Я использую StackNavigator для этого приложения:

mapstack.js

import { createStackNavigator, createTopTabNavigator } from 'react-navigation-stack';
import Map from '../screens/map.js';
import React from 'react';
import CommonHeader from '../shared/header';
import TenantDetail from '../screens/tenant_detail';

const screens = {
    Map: {
        screen: Map,
        navigationOptions: ({ navigation }) => {
            return {
                headerTitle: () => <CommonHeader navigation={navigation} title="Directory" />
            }
        }
    },
    TenantDetail: {
        screen: TenantDetail,
        navigationOptions: ({ navigation }) => {
            return {
                //headerTitle: () => <CommonHeader navigation={navigation} title="News" />
                headerTitle: () => <Text>Directory</Text>
            }
        }
    }
}

const MapStack = createStackNavigator(screens);

export default MapStack;

Я не мог понять это - как передать объект навигации с родительского экрана на два экрана на вкладках для работы navigation.navigate ()?