How to access, send props in const type views - React Native?

I'm learning the way to creating an API react native with typescript without using the class extends component.Actually, I don't know how to access and send the props from const view to another function:

App.tsx

import React, {useState} from 'react';import { NavigationContainer, StackActions } from '@react-navigation/native';import Navigator from './Components/Navigator';import { Root } from 'native-base';import * as Font from 'expo-font';import AppLoading  from 'expo-app-loading';import {Provider} from 'react-redux';import {createStore} from 'redux';import rootReducer from './Store/Reducers/Reducers';const store = createStore(rootReducer);export default class App extends React.Component {  constructor(props) {    super(props);   this.state = { loading: true };}async componentDidMount() {   await Font.loadAsync({   Roboto: require('native-base/Fonts/Roboto.ttf'),   Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'), }); this.setState({ loading: false });}render(){  if (this.state.loading) {    return (<Root><AppLoading /></Root>    );  }  else {    return (<Provider store={store}><Root><NavigationContainer><Navigator/></NavigationContainer></Root></Provider>              );  } }}

Navigator.tsx

import React from 'react'import { createStackNavigator } from '@react-navigation/stack'import Login from '../Views/Login'import Home from '../Views/Home'const Stack = createStackNavigator();const Navigator= () =>{  return (<Stack.Navigator><Stack.Screen name="Login" component={Login}  options={{headerShown:false}}/><Stack.Screen name="Home" component={Home} options={{title:'Home.'}}/></Stack.Navigator>  );}export default Navigator;

Login.tsx (I'm trying to send props on Button function...)

import React, {useState} from 'react'import {Text, TextInput, View, Image } from 'react-native'import {Button, Toast, Content} from 'native-base'import {Auth} from '../Services/Auth/AuthService'const Login=({navigation})=>{   const [userName, setUserName] =useState('');   const [password, setPassword] =useState('');   const [resultLog, setResultLog] = useState('');   return( <View><TextInput placeholder="Username..." defaultValue={userName} onChangeText={txt=> setUserName(txt)} /><TextInput placeholder="Password..." defaultValue={password} onChangeText={txt=> setPassword(txt)}  secureTextEntry={true}/><Button primary style={{width:115, height:45, marginBottom:15}} onPress={()=> ValidateFields(userName, password, this.props)? navigation.navigate('Home') : Toast.show({            text: resultLog})}> <Text style={{color:'white'}}>Login</Text> </Button><Button bordered  onPress={()=> navigation.navigate('Register')}> <Text style={{color:'red'}}>Register </Text> </Button></View>   );}async function ValidateFields(userName:string, password:string, props:any){   await Auth.LoginUser({nick:userName, password: password}, props);   //...}export default Login;

AuthService.tsx (I'm trying to receive props and after use dispatch for redux...)

export const Auth={    LoginUser,}interface IAuthData{   nick : string,   password : string};async function LoginUser(AuthData:IAuthData, props: any){  try{      console.log(props);      let response = await fetch('http://localhost/user/Login/authentication',                                                                     {method: 'POST',                                                                    headers: {                                                                    Accept: 'application/json','Content-Type': 'application/json'                                                                    },                                                                    body: JSON.stringify(AuthData)      });      let json = await response.json();            if(response.status==200){          props.dispatch(//...code here);      }  }catch(err){     console.error(err);  }}

When I press the Login Button, I get the error:

undefined is not an object (evaluating '_this.props')