React-native-paper: RadioButton.Group does not support `0` as a value

[gregfenton]

Current behaviour

Cannot select a RadioButton inside of a RadioButton.Group whose value is 0

Expected behaviour

Should be able to select the value

Code sample

https://snack.expo.io/Vi2GImYP9

Try clicking the "First" and "Second" radio buttons. Notice that you cannot get "First" to become selected. This code is the example code from the docs, with the difference being that the value for the First button is {0} instead of {"0"}

Your Environment

| software | version
| --------------------- | -------
| react-native | 0.63.3
| react-native-paper | 4.3.0
| node | 14.13.1
| npm | 6.14.8
| yarn | 1.22.10
| expo | 39.0.2

See Snack link in the _Code Sample_ section above

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons
• npm
• yarn
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

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

• react-native (found: 16.13.1, latest: 0.63.3)
• react-native-paper (found: 14.13.1, latest: 4.3.0)
• yarn (found: 6.14.8, latest: 1.22.10)

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

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

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

• react-native (found: 16.13.1, latest: 0.63.3)
• yarn (found: 6.14.8, latest: 1.22.10)

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

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• npm
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

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

• yarn (found: 6.14.8, latest: 1.22.10)

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

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[gregfenton]

This github-action checking for versions is asking for things that are not in the template for bug reports...

Not sure why we should be asking for yarn and npm and react-native-vector-icons and ios and android and ...

especially if a version of expo is provided.

[github-actions[bot]]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

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

• expo (found: 39.0.2, latest: 39.0.3)

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

[gregfenton]

One workaround is to cast the numerical value to a string:

<View>
  <Text>First</Text>
  <RadioButton value={0.toString()} />
</View>
<View>
  <Text>Second</Text>
  <RadioButton value={1.toString()} />
</View>

but then that changes the nature of the data being returned to the change handler, and in a complicated forms-based application, that type of messing with data types can become quite cumbersome (think of a dynamically generated set of radio buttons & values rather than hand-coded ones).

[davwheat]

+1!

I have an app where we are using radio buttons to represent multiple items.

In our case we might have a subheading of "A" and a value of "200" and we want the value to be an object containing those two values, e.g. { class: "A", value: 200 }). At the moment we're using JSON.parse(...) and JSON.stringify(...) to achieve this, but it would be much better if we didn't have to, for simplicity.

Screenshot

[gregfenton]

Add to that use case: internationalization. If you want to display different labels based on l10n/i18n, then you likely want to generalize the values of your selections.

This is essentially why my codebase is using the array index (0 .. n) of the data being selected. We then look up the selection's value in an internationalized label table to fetch the appropriate display value. We store the index value (0..n) in the database as the "data" for the selection.

[RichardLindhout]

It's because the check in react-native-paper is not strict enough

https://github.com/callstack/react-native-paper/blob/master/src/components/RadioButton/utils.ts#L22

it should be:

  if (contextValue !== undefined && contextValue !== null) {

instead of

  if (contextValue) {

[RichardLindhout]

PR is up: https://github.com/callstack/react-native-paper/pull/2368