onPress TS Error

[omniviewsports]

@WrathChaos

I have a login screen (see below for source code) where I am disabling a login button until the user accepts a EULA agreement by clicking the checkbox. The code works, but I get the following TS error:

Type 'boolean | (() => void)' is not assignable to type '((checked: boolean) => void) | undefined'. Type 'boolean' is not assignable to type '(checked: boolean) => void'.

Any advice on how I can fix this?

//useToggle.ts
import { useCallback, useState } from "react";
export const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = useCallback(() => setState((prevState) => !prevState), []);
  return [state, toggle];
};

//LoginScreen.tsx
export const LoginScreen = (): JSX.Element => {
  const [termsAccepted, setTermsAccepted] = useToggle();
  return (
    <View.Safe style={loginScreenStyles.container} edges={["left", "right"]}>
      <View.Column style={loginScreenStyles.loginContainer}>
        {constants.auth.welcomeText}

        <View.Row></View.Row>
      </View.Column>
    </View.Safe>
  );
};

[WrathChaos]

Hello @omniviewsports Thank you for using the library :)

Actually I cannot even see the usage of react-native-bouncy-checkbox in the example code. Do I miss anything?

[omniviewsports]

@WrathChaos (sorry, for some reason that part did not paste - here is the code).

index.txt

[WrathChaos]

@omniviewsports I am sorry but I will not download this file because of security reasons :)

[omniviewsports]

@WrathChaos for some reason, when I paste the source code, the BouncyCheckBox component does not show up. Accordingly, the parameters I pass to the component are

• onPress{setTermsAccepted}
• size={12}

The component is wrapped by a View and followed by a text component that recites the EULA agreement.

[WrathChaos]

Hmm, I guess I got it why you're having this error. It is because react-native-bouncy-checkbox has its own check state system built-in.

You want to control it with useToggle hook. So you need to use disableBuiltInState props to control your own whole check system for the checkbox button :)

Please check this doc part: https://github.com/WrathChaos/react-native-bouncy-checkbox#synthetic-press-functionality-with-manual-check-state

You will see how to use it. Also, there is a separated example for this one either.

@omniviewsports