Skip to content

Hardcoded Icons library for Appbar Backaction and Chip #4760

@JacobDel

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions