diff --git a/src/components/CheckboxWithLabel.js b/src/components/CheckboxWithLabel.js index 146e37ceb730..b78a7a136158 100644 --- a/src/components/CheckboxWithLabel.js +++ b/src/components/CheckboxWithLabel.js @@ -7,7 +7,6 @@ import variables from '@styles/variables'; import Checkbox from './Checkbox'; import FormHelpMessage from './FormHelpMessage'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; -import refPropTypes from './refPropTypes'; import Text from './Text'; /** @@ -54,9 +53,6 @@ const propTypes = { /** The default value for the checkbox */ defaultValue: PropTypes.bool, - /** React ref being forwarded to the Checkbox input */ - forwardedRef: refPropTypes, - /** The ID used to uniquely identify the input in a Form */ /* eslint-disable-next-line react/no-unused-prop-types */ inputID: PropTypes.string, @@ -79,11 +75,10 @@ const defaultProps = { isChecked: false, value: false, defaultValue: false, - forwardedRef: () => {}, accessibilityLabel: undefined, }; -function CheckboxWithLabel(props) { +const CheckboxWithLabel = React.forwardRef((props, ref) => { const styles = useThemeStyles(); // We need to pick the first value that is strictly a boolean // https://github.com/Expensify/App/issues/16885#issuecomment-1520846065 @@ -106,7 +101,7 @@ function CheckboxWithLabel(props) { label={props.label} style={[styles.checkboxWithLabelCheckboxStyle]} hasError={Boolean(props.errorText)} - forwardedRef={props.forwardedRef} + ref={ref} accessibilityLabel={props.accessibilityLabel || props.label} /> ); -} +}); CheckboxWithLabel.propTypes = propTypes; CheckboxWithLabel.defaultProps = defaultProps; CheckboxWithLabel.displayName = 'CheckboxWithLabel'; -const CheckboxWithLabelWithRef = React.forwardRef((props, ref) => ( - -)); - -CheckboxWithLabelWithRef.displayName = 'CheckboxWithLabelWithRef'; - -export default CheckboxWithLabelWithRef; +export default CheckboxWithLabel;