WARN "We can not support a function callback..."

[Brma1048]

Description

We expected no console warning with minimal Checkbox.Group usage.

CodeSandbox/Snack link

no link

Steps to reproduce

export const CheckboxScreen = () => {
   const [values, setValues] = useState(['test']);

   return (
      <View>
         <Checkbox.Group onChange={v => setValues(v)} defaultValue={values}>
            <Checkbox value={'test'}>Test</Checkbox>
         </Checkbox.Group>
         <Text>{values}</Text>
      </View>
   );
};

NativeBase Version

3.4.7

Platform

• [X] Android
• [ ] CRA
• [ ] Expo
• [X] iOS
• [ ] Next

Other Platform

No response

Additional Information

We are getting following warning "WARN We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320" when clicking the checkbox in the group. Without checkbox group there is no warning. Is this an issue or are we doing something wrong?

Versions:

• react-native: 0.67.4

[soemarko]

Any update on this?

[soemarko]

this can be worked around by using the onChange of the individual checkboxes and the value of the group component (don't use onChange in the group)

In this case how do we get the value of the checkboxes? The interface only gives out whether the checkbox is selected or not. InterfaceCheckbox.onChange?: (isSelected: boolean) => void

[iway1]

@soemarko I'm keeping track of the values in a useState based on what happens in the onChange

const [values, setValues] = useState([]);

function onValChange(name: string, value: boolean) {
  const newValues = values.filter(n=>n !== name);
  if(value) {
    setValues([...newValues, name]);
  } else {
    setValues(newValues);
  }
}

return (
  <Checkbox.Group value={value}>
    <Checkbox
      onChange={(value)=>{
        onValChange('fieldOne', value);
      }}
      value='fieldOne'
    />
    <Checkbox 
      onChange={(value)=>{
        onValChange('fieldTwo', value);
      }}
      name="fieldTwo"
    />
  </Checkbox.Group>
)

It's pretty gross but it works. Could create a reusable component that handles the janky stuff so you only have to do it once, at least.

TBH nativebase team should probably reconsider how these components are implemented, if it's taking 10 months to fix something as basic and critical as showing the correct values and calling onChange with those values, something is off. probably has to do with the fact that they're building the lib on top of react-spectrum which they aren't able to make changes too.

The UI does not even stay in sync with the actual state values that are being passed to onChange, this component is pretty broken for even common use cases right now.

[soemarko]

It's pretty gross but it works.

It doesn't for me. The warning still appears even without the onChange on the Group. I'm looking into a different checkbox component.

[soemarko]

    "native-base": "^3.4.23",
    "react": "18.2.0",
    "react-native": "0.71.6",

[iway1]

@soemarko oh sorry yeah it doesn't silence the warning it just functions how we want it too... I just did this for the warning:

LogBox.ignoreLogs([
  'We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320',
]);

[mchjohn]

Should we abandon native base?

[vakson-cpu]

Use onToggle instead of onValueChange.

[soemarko]

I've switched to https://github.com/WrathChaos/react-native-bouncy-checkbox instead. Simple, worked as expected. Barely need to look at the docs to use it.

Maybe NativeBase should look into implementing something a long that line. It's just a checkbox, I was that close to just use 2 icons and bind it to a boolean.

[twocs]

This issue was "closed this as completed in https://github.com/adobe/react-spectrum/pull/2304[on Jan 11, 2022](https://github.com/adobe/react-spectrum/issues/2320#event-5869838105)"

❯ yarn why @react-aria/checkbox
yarn why v1.22.19
[1/4] 🤔  Why do we have the module "@react-aria/checkbox"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "@react-aria/checkbox@3.9.1"
info Reasons this module exists
   - "native-base#@react-native-aria#checkbox" depends on it
   - Hoisted from "native-base#@react-native-aria#checkbox#@react-aria#checkbox"
info Disk size without dependencies: "188KB"
info Disk size with unique dependencies: "1.9MB"
info Disk size with transitive dependencies: "4.35MB"
info Number of shared dependencies: 16
✨  Done in 0.28s.

native-base is dependent on specific versions of @react-stately that have been superseded years ago

    "@react-stately/checkbox": "3.0.3",
    "@react-stately/collections": "3.3.0",
    "@react-stately/combobox": "3.0.0-alpha.1",
    "@react-stately/radio": "3.2.1",
    "@react-stately/slider": "3.0.1",
    "@react-stately/tabs": "3.0.0-alpha.1",
    "@react-stately/toggle": "3.2.1",

As for @react-spectrum (which contains @react-stately) there have been a number of subsequent releases:

- @react-stately/checkbox@3.4.2
- @react-stately/collections@3.8.0
- @react-stately/combobox@3.5.1
- @react-stately/radio@3.8.1
- @react-stately/slider@3.3.2
- @react-stately/tabs@3.4.1

Indeed on March 4, 2023 @mfarhankasmani made an update to solve this exact issue by updating @react-stately/checkbox to version 3.4.0 (also memoizes the function).

fix: CheckBox.Group bugs #5073 #5686 https://github.com/GeekyAnts/NativeBase/commit/ffbc6023565485d99734383d2c575aaa72d7f767

[jerryOluranti]

Similar warning here using the Switch component.

"native-base": "^3.4.28",
"react-native": "0.72.5"

[jhuee]

same issue "native-base": "^3.4.28", "react-native": "0.73.6",

[Khayo99]

No componente switch resolvi meu problema, utilizando onToggle passando um setState

[jovimoura]

same issue "native-base": "^3.4.28", "react-native": "0.74.1"