callstack / callstack/react-native-paper
Hardcoded Icons library for Appbar Backaction and Chip
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách đọc src/components/MaterialCommunityIcon.tsx và src/components/Icon.tsx, sau đó theo dõi cách Appbar BackAction và Chip render các icon của chúng thông qua cài đặt của provider. Xác nhận rằng các component bị ảnh hưởng sử dụng thư viện icon đã cấu hình thay vì loader được hardcode, đồng thời kiểm tra rằng cả hai component đều hiển thị icon tùy chỉnh khi provider cung cấp một icon.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- frontend, mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Đặc tả rõ ràng
- Mức phù hợp với người mới
- 48/100