React Native Keychain onPress function error-CodePudding

I've created an async const function for login purposes and after the credentials are set locally via the setGenericPassword method, the app navigates to the home screen. I want to execute this login function whenever the user presses on a specific button, marked as 'Log in'. This is the error I'm getting when I try to execute the function with the button:

Promise-returning function provided to attribute where a void return was expected.

Async function code:

const login = async () => {
  try {
    await Keychain.setGenericPassword(firstName, lastName, options);
  } catch (error) {
    console.log(error);
  }
  navigation.navigate(SCREEN_NAMES.App.HomeStack.Home);
};

Button:

<Button
  disabled={firstName === "" || lastName === "" || email === ""}
  type="filled"
  size="large"
  text="Log in"
  style={{ width: 160, height: 48, margin: 24 }}
  onPress={() => login()}
/>

Unfortunately, I wasn't able to troubleshoot this issue myself, if anyone has any suggestions I would highly appreciate it.

CodePudding user response：

Solved by using the useCallback Hook:

<Button
        disabled={firstName === '' || lastName === '' || email === ''}
        type='filled'
        size='large'
        text='Log in'
        style={{ width: 160, height: 48, margin: 24 }}
        onPress={useCallback(
          () => {
            login()
          },
          [firstName, lastName]
        )}
      />