Let me start up by saying that i'm just started learning React Native, and for that, i will try to be as explicite as possible.

Context:

i'm trying to create a simple sign in/sign up page, i have a home screen that contains 2 Inputs with React State (userName and password) that i need to pass to a service when i press on a button, so the code look like this :

function HomeScreen(props) {
  const [userName, onChangeUserNameText] = React.useState(null);
  const [password, onChangePasswordText] = React.useState(null);
  ...
  return (
        <TextInput 
          ...
          onChangeText={onChangeUserNameText}
          value={userName}
        />
        <TextInput
          ...
          onChangeText={onChangePasswordText}
          value={password}
        />
        <Button
          ...
          onPress={SignIn(userName, password)}
        />
    )

the SignIn(...) method is exported from another file that i called home.service that should handle the communiation between my home screen and the API calls, i also put some logs in that function.

Problem:

for some reason, whenever i load the application, or updated any of my inputs, the function that should be executed when i press on the sing in button is getting executed

on load

on Change Text

what am i missing here ?

Edit/Conclusion :

Tank you @Robin Zigmond, the porblem was as this gentelman said, in the way i called my functions in the onPress event:

<Button
    ...
    onPress={() => SignIn(userName, password)}
/>

CodePudding user response：

You need to add a callback, otherwise SignIn will keep executing:

function HomeScreen(props) {
  const [userName, onChangeUserNameText] = React.useState(null);
  const [password, onChangePasswordText] = React.useState(null);
  ...
  return (
        <TextInput 
          ...
          onChangeText={onChangeUserNameText}
          value={userName}
        />
        <TextInput
          ...
          onChangeText={onChangePasswordText}
          value={password}
        />
        <Button
          ...
          onPress={() => SignIn(userName, password)}
        />
    )
}