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

Question

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')

Answer 1

You are using this.props in the functional component. It only works in class components. In your case, you can do is

const Login=(props)=>{

   const {navigation} = props; // add here 
   .....

   return( 
     <View>
        .....
        // change here, replace "this.props" to "props" only
       <Button onPress={()=> ValidateFields(userName, password, props)? navigation.navigate('Home') : Toast.show({
            text: resultLog})}> 
            <Text style={{color:'white'}}>Login</Text> 
        </Button>
     </View>
   );
}