React Native Keychain onPress function error

Question

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.

Answer 1

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]
        )}
      />