CheckboxAndroid and CheckboxIOS use MaterialCommunityIcon instead of custom icon function from PaperProvider

[jahirfiquitiva]

Current behaviour

I have setup a custom icon in PaperProvider

import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
...
 <PaperProvider
	settings={{
		icon: props => <FontAwesomeIcon {...props} icon={props.name} />
	}}>
        // ...
  </PaperProvider>

But CheckboxAndroid and CheckboxIOS only use MaterialCommunityIcon instead of the icon function from the PaperProvider

react-native-paper/src/components/Checkbox/CheckboxAndroid.tsx

Line 135 in d6b6b66

<MaterialCommunityIcon

Expected behaviour

CheckboxAndroid and CheckboxIOS should use Icon instead of MaterialCommunityIcon for the check icons.

How to reproduce?

https://snack.expo.dev/@jahirfiquitiva/greedy-yellow-turkish-delight

Preview

What have you tried so far?

Your Environment

software	version
ios	17.0.1
android	x
react-native	0.72.6
react-native-paper	5.11.6
node	v18.18.2
npm or yarn	4.0.1
expo sdk	x.x.x

@lukewalczak

[artola]

@lukewalczak It seems that several components are not using the PaperProvider.settings.icon value. For example: RadioButtonIOS directly imports MaterialCommunityIcon and does not even try to use the value from the context.
Should not use this kind of block?

react-native-paper/src/components/Icon.tsx

Line 151 in 9162a1f

<SettingsConsumer>

[faljabi]

Any temp solution for this?

[rnigro-rwb]

The problem with doing this is that the icon names are embedded in the components themselves. In your example, there's no guarantee that FontAwesome6 has the same names for the icons that are used for "checked", "unchecked", and "indeterminate" states of the Checkbox. The workaround that I came up with was to patch the package. I did this when I upgraded to the latest version of react-native-vector-icons.

See #4646

[rnigro-rwb]

The problem with doing this is that the icon names are embedded in the components themselves. In your example, there's no guarantee that FontAwesome6 has the same names for the icons that are used for "checked", "unchecked", and "indeterminate" states of the Checkbox. The workaround that I came up with was to patch the package. I did this when I upgraded to the latest version of react-native-vector-icons.

See #4646

Actually, @onmotion has a solution that uses babel-plugin-module-resolver is much simpler.
#4471 (comment)