onValueChange in ToggleButton.Group is called with null

Recreated from https://github.com/callstack/react-native-paper/issues/2452 as the last one was closed without any comment.

Current behaviour

onValueChange in ToggleButton.Group is called with null

Expected behaviour

I think it is fine to call it with null. In that case the TypeScript types need to be changed. We could also introduce a defaultValue prop which is used when no toggle button is selected.

Code sample

Snack

import * as React from 'react';
import { ToggleButton } from 'react-native-paper';

const MyComponent = () => {
  const [value, setValue] = React.useState('left');

  return (
    <ToggleButton.Group
      onValueChange={value => {setValue(value); alert(value);}}
      value={value}>
      <ToggleButton icon="format-align-left" value="left" />
      <ToggleButton icon="format-align-right" value="right" />
    </ToggleButton.Group>
  );
};

export default MyComponent;

Your Environment

software	version
ios or android	android
react-native	0.63.4
react-native-vector-icons	8.1.0
react-native-paper	4.7.2

[PunainenAurinko]

I think the problem here is the ‘correct behavior’ of being able to deselect the toggle value. I think we need to have an option of preventing the deselect (and the resulting null value) from happening. I want the tap on the already selected item to do nothing (to not deselect the value). I am switching between views on toggle button taps, and deselecting the value switches to a next view, which is very confusing.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-vector-icons (found: 7.1.0, latest: 8.1.0)
• react-native-paper (found: 4.5.0, latest: 4.7.2)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?