hyochan / hyochan/react-native-masonry-list
TypeScript: Type 'unknown' is not assignable to type 'IntrinsicAttributes'
- Dominant language
- TypeScript
- Stars
- 437
- Forks
- 58
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
When using the MasonryList component in a TypaScript project, the `renderItem` prop param `item` is not being typed as the elements given to the data prop array, but it is type 'unknown' so when rendering the item, ts raises this problem.
If I use `FlatList` or `ScrollView` instead, I don't get this warning.
**To Reproduce**
Steps to reproduce the behavior:
1. Create TypeScript project.
2. Define this constants:
```
interface PostPreviewProps {
id: string;
imgUrl: string;
}
const posts: PostPreviewProps[] = [
{
id: '1',
imgUrl: 'https://img.freepik.com/free-photo/delicious-donuts_144627-6267.jpg?t=st=1708687137~exp=1708690737~hmac=f9cf5f46c098a440e9581533fe07c587d300dfc22b44d0cc7cdb1b6810503314&w=1480',
},
{
id: '2',
imgUrl: 'https://img.freepik.com/free-photo/vertical-shot-fox-walking-rocks-forest_181624-31966.jpg?t=st=1708686685~exp=1708690285~hmac=b7d67c6f8bf2576069aaa00308da904b12ae956275498340427b94165f880a60&w=996',
},
];
```
3. Define the following component to render the item:
```
function PostPreview(props: PostPreviewProps): JSX.Element {
return (
);
}
```
5. Render the following:
```
(
)}
/>
```
6. See ts problem
**Expected behavior**
The `item` param from the `renderItem` callback should have type `PostPreviewProps`, since the data value (posts) is an array of such item type. Both `FlatList` and `ScrollView` do this automatically, but this `MasonryList` component says `item` is type `unknown`, which causes the `ts` problem reported when passed item as props to the `PostPreview` component.
**Screenshots**
Contributor guide
Assessment
This issue has not been assessed yet.