Hardcoded Icons library for Appbar Backaction and Chip

[JacobDel]

Current behaviour

1. An icon library is attached to the Provider of the RN Paper library.
2. The library is ignored in RN Paper components like BackAction in the Appbar or Chip Only when explicitly calling the Icon component will it show the custom Icons

Expected behaviour

Always fetch icons from the attached icon library

How to reproduce?

import React, {useContext} from 'react';
import {Platform} from 'react-native';
import {Provider as PaperProvider} from 'react-native-paper';
import {Icon} from '@shared/assets/themes/IconTheme';
import {ThemeContext} from '@shared/assets/themes/themeContext';

export default function WithReactPaperWrapper(app: any) {
  const {theme} = useContext(ThemeContext);
  return (
    <PaperProvider
      settings={{
        icon: CustomIcon,
      }}
      theme={theme}>
      {app}
    </PaperProvider>
  );
}

function CustomIcon(props: any) {
  return <Icon {...props} />;
}

Solution

This is a snippet from node_modules/react-native-paper/src/components/MaterialCommunityIcon.tsx Where it shows that it isn't fetching from the custom Icons.

const loadIconModule = () => {
  try {
    return require('@react-native-vector-icons/material-design-icons').default;
  } catch (e) {
    try {
      return require('@expo/vector-icons/MaterialCommunityIcons').default;
    } catch (e) {
      try {
        return require('react-native-vector-icons/MaterialCommunityIcons')
          .default;
      } catch (e) {
        return null;
      }
    }
  }
};

The snippet should be replaced by the snippet from node_modules/react-native-paper/src/components/Icon.tsx

      <SettingsConsumer>
        {({ icon }) => {
          return icon?.({
            name: s,
            color: iconColor,
            size,
            direction,
            testID,
          });
        }}
      </SettingsConsumer>

Your Environment

software	version
react-native-paper	5.14.5
expo sdk	52.0.39