iOS implementation does not respect value prop about react-native-checkbox HOT 9 OPEN

Any work around for this? This problem makes it basically not usable if one have any custom logic for the checkbox.

from react-native-checkbox.

Any work around for this? This problem makes it basically not usable if one have any custom logic for the checkbox.

I ended up making a custom wrapper around this component with a state that basically sets a timer for 0ms after the click, and if the provided value hasn’t changed, it changes the state back to the value. If you’re interested, let me know and I can post the code for it when I have time later.

Seems a really cool work around, thanks for the help.

You’re welcome! Let me know if you have any issues implementing it, and I can post my code as I’d have to modify it a bit to take out some static values specific to my organization.

from react-native-checkbox.

Any work around for this? This problem makes it basically not usable if one have any custom logic for the checkbox.

I ended up making a custom wrapper around this component with a state that basically sets a timer for 0ms after the click, and if the provided value hasn’t changed, it changes the state back to the value. If you’re interested, let me know and I can post the code for it when I have time later.

from react-native-checkbox.

Any work around for this? This problem makes it basically not usable if one have any custom logic for the checkbox.

I ended up making a custom wrapper around this component with a state that basically sets a timer for 0ms after the click, and if the provided value hasn’t changed, it changes the state back to the value. If you’re interested, let me know and I can post the code for it when I have time later.

Seems a really cool work around, thanks for the help.

from react-native-checkbox.

Can confirm that on Android the checkbox becomes unchecked as well, despite value being set to true.

from react-native-checkbox.

Can confirm that on Android the checkbox becomes unchecked as well, despite value being set to true.

True. It works on android very well.

from react-native-checkbox.

Any work around for this? This problem makes it basically not usable if one have any custom logic for the checkbox.

I ended up making a custom wrapper around this component with a state that basically sets a timer for 0ms after the click, and if the provided value hasn’t changed, it changes the state back to the value. If you’re interested, let me know and I can post the code for it when I have time later.

can you share the code sir? thanks

from react-native-checkbox.

can you share the code sir? thanks

from react-native-checkbox.

@hieutn290120 and @rizkiiansyah sorry for not getting back sooner. The code is really nothing special, but here you go (remember to change the color values):

import React, { useState, useRef, useEffect } from 'react';
import CheckBox from '@react-native-community/checkbox';
import propTypes from 'prop-types';

function Checkbox(props) {
	const { id, value, onChange, boxHeight } = props;
	const [state, setState] = useState(value);
	const refreshHandler = useRef();
	const valueRef = useRef();
	valueRef.current = value;

	useEffect(() => {
		return () => {
			clearTimeout(refreshHandler.current);
		};
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [])

	useEffect(() => {
		if (value !== state) {
			setState(value);
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [value])

	function valueChanged(newValue) {
		clearTimeout(refreshHandler.current);
		setState(newValue);
		if (onChange) {
			onChange({ id: id, value: newValue })
		}
		refreshHandler.current = setTimeout(() => {
			checkValue(newValue);
		}, 0);
	}
	
	function checkValue(newValue) {
		if (newValue !== valueRef.current) {
			setState(valueRef.current);
		}
	}

	// *** TODO: CHANGE THESE TO YOUR COLOR VALUES!
	var color_a = '#FF0000';
	var color_b = '#00FF00';

	return (
		<CheckBox
			disabled={ false }
			value={ state }
			onValueChange={(newValue) => valueChanged(newValue)}
			tintColors={{
				true: color_a,
				false: color_b
			}}
			boxType='square'
			tintColor={ color_b }
			onCheckColor={ color_a }
			onTintColor={ color_a }
			animationDuration={ 0.2 }
			onAnimationType='one-stroke'
			offAnimationType='stroke'
			style={{
				height: boxHeight || 20
			}}
		/>
	);
};

Checkbox.propTypes = {
	id: propTypes.oneOfType([
		propTypes.string,
		propTypes.number
	]),
	value: propTypes.bool,
	onChange: propTypes.func,
	boxHeight: propTypes.number
};

Checkbox.defaultProps = {
	value: false,
	boxHeight: 20
};

export default Checkbox;

Usage is as follows:

	<Checkbox
		id='checkbox_a'
		value={ checkboxAValue  }
		onChange={ (filter) => changeFilter({ id: filter.id, value: filter.value }) }
		boxHeight={ Typography.body_2.fontSize }
	/>

I hope that helps!

from react-native-checkbox.