I am currently exploring how to create an API in React Native with TypeScript without using the class extends component. However, I am struggling to figure out how to access and send props from one 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, navigation)? 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, navigation:any){
await Auth.LoginUser({nick:userName, password: password}, navigation);
//...
}
export default Login;
AuthService.tsx (I'm trying to receive props and then use dispatch for Redux...)
export const Auth={
LoginUser,
}
interface IAuthData{
nick : string,
password : string
};
async function LoginUser(AuthData:IAuthData, navigation: any){
try{
console.log(navigation);
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){
navigation.dispatch(//...code here);
}
}catch(err){
console.error(err);
}
}
When attempting to press the Login Button, an error message is displayed:
undefined is not an object (evaluating '_this.props')