hyochan / hyochan/react-native-masonry-list

TypeScript: Type 'unknown' is not assignable to type 'IntrinsicAttributes'

Open
#69 2 comments 1 reaction 0 assignees View on GitHub
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**
Captura de pantalla 2024-04-03 a las 16 03 52
Captura de pantalla 2024-04-03 a las 16 08 09

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.