state management

[ibrar-web]

checkbox only update state if we click box otherwise checkbox don't update state

[WrathChaos]

Hello @ibrar-web I don't exactly understand what do you mean. Do you want to update the checkbox with ref?

[VitorGbrl]

i think it is the same problem as the last issue (ref problem). is it hard to fix? @WrathChaos

[WrathChaos]

I will take a look at this today Sorry for late response tho

[WrathChaos]

Hey again @VitorGbrl There is a disable built-in state prop. Have you tried it? Otherwise, I really need a code example to fix this

[omniviewsports]

@WrathChaos

I have a login screen (see below for source code) where I am disabling a login button util 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']}> <LoginHeader /> <View.Column style={loginScreenStyles.loginContainer}> <Text style={loginScreenStyles.tagline}>{constants.auth.welcomeText}</Text> <LoginButton onPress={onLogin} disabled={!termsAccepted} /> <View.Row> <BouncyCheckbox onPress={setTermsAccepted} /> <EulaAgreement /> </View.Row> </View.Column> </View.Safe> ); };

[WrathChaos]

@WrathChaos

I have a login screen (see below for source code) where I am disabling a login button util 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> ); };

Please continue with your own issue :) Thank you