callstack / callstack/react-native-paper

Hardcoded Icons library for Appbar Backaction and Chip

Open
#4,760 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

### 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 (

{app}

);
}

function CustomIcon(props: any) {
return ;
}

```

### 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`
```

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

```

### Your Environment

| software | version
| --------------------- | -------
| react-native-paper | 5.14.5
| expo sdk | 52.0.39

Contributor guide

Open the contributing guide

Research direction

Start by reading src/components/MaterialCommunityIcon.tsx and src/components/Icon.tsx, then trace how Appbar BackAction and Chip render their icons through the provider settings. Confirm the affected components use the configured icon library rather than the hardcoded loader, and verify that both components display custom icons when the provider supplies one.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.