Doesn't work navigation with react-navigation and typescript in react-native project

I'm trying to use typescript whith my react-native project. This is my first time using typescript, so I understand the basics, but have some problems with third-party library such as react-navigation. There are parent(Screen_1) and nested(DataList) components in my project. The nested component fetch the data from rest api and display the list of items. In WebStorm TSLint underlines in red with error:

Property 'navigation' is missing in type '{}' but required in type 'Readonly'

Also, navigation to the page "Detail" from "Screen_1" does not work. Navigation scheme: MainScreen-->Screen_1-->ScreenDetail

I will be grateful if someone help me with my problem.

first_screen.tsx:

import React from 'react';
import {Component} from 'react';
import { AppUrls } from "../../config/urls";
import fetchList from '../../config/functions/fetchListData'
import { withNavigation, NavigationScreenProp} from 'react-navigation';
import { Text, View, Image, ImageBackground, TouchableHighlight, FlatList, Linking} from 'react-native';


interface Props {
    navigation: NavigationScreenProp<any,any>
}


interface DataJson {
    description: string,
    photo_url: string,
    price: string,
    slug: string,
    title: string
}

interface State {
    common_list: DataJson[]
}


export default class Screen_1 extends Component<Props> {
    render() {
        return (
            <View>
                <ImageBackground source={require("../../assets/screen/back.jpg")}>
                    <View>
                        <ImageBackground source={require("../../assets/screen/header.jpg")}>
                            <View>
                                <View><TouchableHighlight onPress={() => this.props.navigation.goBack()}><Image source={require("../../assets/common_screen/arow-icon.png")}/></TouchableHighlight></View>
                                <View><TouchableHighlight  onPress={ ()=> Linking.openURL(AppUrls.site_link) } ><Image source={require("../../assets/screen/logo.png")}/></TouchableHighlight></View>
                                <View><Text>TEXT TEXT TEXT</Text></View>
                            </View>
                        </ImageBackground>
                    </View>
                    <View>
                        <DataList/>
                    </View>
                    <View>
                    </View>
                 </ImageBackground>
             </View>
        )
    }
}

class DataList extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            data_list:[]
        }
    }
    async componentDidMount() {
        const data = await fetchList.fetchListData(AppUrls.api_url);
        this.setState({data_list:data});
    }

    render() {
        return (
            <View>
                <FlatList
                    data={this.state.common_data}
                    showsVerticalScrollIndicator={false}
                    renderItem={({item}) =>
                         <View>
                            <View>
                                <TouchableHighlight  onPress={() => this.props.navigation.navigate("Detail")}><Image source={{uri:"https://www.example.com/"+item.photo_url}}/></TouchableHighlight>
                            </View>
                            <View>
                                <View>
                                    <TouchableHighlight ><Text>{item.title} 
   </Text></TouchableHighlight>
                                </View>
                                <View>
                                     <Image source={require("../../assets/screen/icon.png")}/>
                                     <Text>{item.price}</Text>
                                </View>
                             </View>
                         </View>
                     }
                     keyExtractor={item => item.slug}
                  />
             </View>
         )
      }
 }

router.ts:

 import { createStackNavigator, createAppContainer } from 'react-navigation';
 import MainScreen from '../screens/main_screen'
 import Screen_1 from '../screens/first/first_screen'
 import Screen_2 from '../screens/second/second_screen'
 import Screen_3 from '../screens/third/third_screen'
 import ScreenDetail from '../screens/detail'

 const FirstScreenStack = createStackNavigator({
         Screen: {
             screen: Screen_1,
         },
         Detail: {
             screen: ScreenDetail,
        }
     },
    {
         initialRouteName: "Screen",
         mode: 'modal',
         headerMode: 'none',
     },

 );

const MainStack = createStackNavigator({
        Main: {
            screen: MainScreen,
        },
        FirstScreen: {
            screen: FirstScreenStack
        },
        SecondScreen: {
            screen: Screen_2,
        },
        ThirdScreen: {
            screen: Screen_3,
        },
    },
    {
        initialRouteName: "Main",
        mode: 'modal',
        headerMode: 'none',
    },
);