callstack / callstack/react-native-paper

Hardcoded Icons library for Appbar Backaction and Chip

未关闭
#4,760 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

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

贡献指南

打开贡献指南

调研方向

首先阅读 src/components/MaterialCommunityIcon.tsx 和 src/components/Icon.tsx,然后跟踪 Appbar BackAction 和 Chip 如何通过 provider 设置渲染它们的图标。确认受影响的组件使用配置的图标库,而不是硬编码的 loader,并验证当 provider 提供自定义图标时,两个组件都能显示该图标。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
描述清楚
新手友好度
48/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。