Nested Tab Bar in stack with modal screen (React Navigation v5)

I am new to react native + js + ts so i have a big trouble righ now how to implement my navigation right.
am using react-navigation v5 right now.I have Tab navigator with 3 screens 'Home', 'Discover', 'Profile'. I need to make navigation that way i could present modal screen complitely on top of tab navigator. But reading docs i didn;t found how to do it from Tab navigator. So i deside to nest Tab navigator inside Stack navigator. And now i have tons of issues i need to resolve: 1. How i can show header for each tab in Tab navigator nested inside stack. 2. Show modal screen from view inside 'Home'. 3. Since i am using typescript before v5 i was using v4 with NavigationInjectedProps. i could access fron nested component inside 'Home' with no problems, but now i having undefined props.navigate / props.navigation

MainNavigator.tsx

import HomeScreen from './Home/HomeScreen';
import DiscoverScreen from './Discover/DiscoverScreen';
import ProfileScreen from './profile/ProfileScreen';
import StreamsTabScreen from './Discover/tabview/tabScreens/StreamsTabScreen';
import { Image, Platform, View } from 'react-native';
import React from 'react';
import images from 'assets/images'
import DeviceInfo from 'react-native-device-info';
import VideoPlayer from '../../library/ui/videoPlayer/VideoPlayer';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export type TabNavigationProp = {
    Home: undefined;            //
    Discover: undefined;        // Should be here all undefined ????
    Profile: undefined;         //
}

export type StacknavigationProp = {
    TabNavigator: undefined;      // Same here ???
    ModalPlayer: undefined;       //
}


const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();


const TabNavigator = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen name='Home' component={HomeScreen}  />
            <Tab.Screen name='Discover' component={DiscoverScreen} />
            <Tab.Screen name='Profile' component={ProfileScreen} />
        </Tab.Navigator>
    );
};


const MainStackNavigator = () => {
    return (
        <Stack.Navigator mode='modal'>
            <Stack.Screen name='TabNavigator' component={TabNavigator} options={{ headerShown: false }} />
            <Stack.Screen name='ModalPlayer' component={VideoPlayer} />
        </Stack.Navigator>
    );
}

export default MainStackNavigator;

HomeScreen.tsx

import { View, Text, StyleSheet, ScrollView } from "react-native";
import React from "react";
import StreamsScreen from '../../streamsScreen/StreamsScreen';
import VideoplayerScreen from '../../videoplayer/VideoplayerScreen';

import { CompositeNavigationProp } from '@react-navigation/native';
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import { StackNavigationProp } from '@react-navigation/stack';
import { TabNavigationProp, StacknavigationProp } from "../MainNavigator";

export type HomeScreenNavigationProps = CompositeNavigationProp<
  BottomTabNavigationProp<TabNavigationProp, 'Home'>,
  StackNavigationProp<StacknavigationProp>
  >; //           made props type from docs guide...

export default class HomeScreen extends React.Component<HomeScreenNavigationProps> {
  render() {
    console.log(this.props.navigate); //navigate is undefined... 
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scrollView}>
          <View style={{ paddingBottom: 24 }}>
            <StreamsScreen navigate={this.props.navigation} />   //props.navigation does not exist
            <View style={styles.separator} ></View>
            <VideoplayerScreen />
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#0C2B33',
    paddingBottom: 20,
  },
  separator: {
    height: 1,
    backgroundColor: '#3D908E'
  }
});

StreamsScreen.tsx

import { View, Text, StyleSheet, Image, ActivityIndicator } from 'react-native';
import MainViewItem from '../../library/ui/MainViewItem';
import { NavigationState, SceneRendererProps, TabBar, SceneMap } from 'react-native-tab-view';
import images from 'assets/images';
import { Props as IndicatorProps } from '../../library/indicator/TabBarIndicator';
import { fetchStreamsPending, fetchStreamsRefresh } from '../../redux/actions/streamActions';
import { connect } from "react-redux";
import { RootState } from "src/redux/reducers";
import numberFormatter from "../../library/utils/numberFormatter";
import palette from 'assets/palette';
import getLanguage from '../../library/utils/isoLanguages';

import {
    StreamsState,
    StreamsPendingState,
    StreamsErrorState,
    StreamsPageOffsetState,
    Stream,
    StreamsRefreshState
} from '../../redux/store/types';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { HomeScreenNavigationProps } from '../main/Home/HomeScreen';


interface StreamsProps {
    fetchStreamsPending: typeof fetchStreamsPending;
    fetchStreamsRefresh: typeof fetchStreamsRefresh;
    streams: StreamsState
    pending: StreamsPendingState;
    error: StreamsErrorState;
    pageOffset: StreamsPageOffsetState;
    refresh: StreamsRefreshState;
}


type State = NavigationState<{
    key: string;
}>;

type Route = {
    key: string;
};

class StreamsScreen extends React.Component<StreamsProps & HomeScreenNavigationProps> { // HomeScreenNavigationProps not sure what right prop type i need here ....

...
    _onPressCard = () => {
        this.props.navigation.navigate('ModalPlayer'); //Property 'navigation' does not exist on type ...
        this.props.navigate('ModalPlayer'); //undefined here
    }
...