-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Open
Labels
Description
Current behaviour
- An icon library is attached to the Provider of the RN Paper library.
- 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 |