Styling FlatList changes its type

[bam-charlesbo]

Introduction

Hi everyone, Thanks for your work on this great library, I really enjoy using it. Especially installing it :) I'm concerned about a bad behaviour with TypeScript. Styling a FlatList is modifying its type and then returns type error with actual code. I found a fix a really dislike.

• Are you aware of a better way fixing it ?
• Or are you able to improve your type handling with a FlatList ?

Git repository to clone

To allow you to repro this bug : Here is the link to a public repo

Bug description

This code returns no error

const renderNote: ListRenderItem<Note> = ({item}) => {
  return (
      <Text>{item.text}</Text>
  );
};

export const Notes = ({notes}: NotesProps) => {
  return (
    <FlatList
      data={notes}
      keyExtractor={item => item.id}
      renderItem={renderNote}
    />
  );
};

This code does

• Once I try to style the FlatList with styled

• This new type is returned :

  const NotesStyle: StyledComponent<React.FlatListProps<unknown> & {
  theme?: Theme | undefined;
  as?: React.ElementType<any> | undefined;
  }, {}, {
  ref?: React.Ref<React.FlatList<unknown>> | undefined;
  }>

• The error under renderItem is :

  Type 'ListRenderItem<Note>' is not assignable to type 'ListRenderItem<unknown>'.
  Type 'unknown' is not assignable to type 'Note'.ts(2322)
  index.d.ts(3986, 5): The expected type comes from property 'renderItem' which is declared here on type 'IntrinsicAttributes & FlatListProps<unknown> & { theme?: Theme | undefined; as?: ElementType<any> | undefined; } & { ref?: Ref<...> | undefined; }'

• Error under item is : Object is of type 'unknown'.ts(2571)

Fix description

I found this fix, that I really dislike :

const NotesStyle = styled.FlatList({
  width: '100%',
}) as unknown as typeof FlatList;

Environment information

• react: 18.1.0
• @emotion/react: 11.10.4
• Package.json extract :

  "dependencies": {
  "@emotion/native": "^11.10.0",
  "@emotion/react": "^11.10.4",
  "prop-types": "^15.8.1",
  "react": "18.1.0",
  "react-native": "0.70.0"
  },
  "devDependencies": {
  "@babel/core": "^7.12.9",
  "@babel/runtime": "^7.12.5",
  "@react-native-community/eslint-config": "^2.0.0",
  "@types/jest": "^29.0.0",
  "@types/react": "^18.0.18",
  "@types/react-native": "^0.69.8",
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^26.6.3",
  "eslint": "^7.32.0",
  "jest": "^26.6.3",
  "metro-react-native-babel-preset": "^0.72.1",
  "react-test-renderer": "18.1.0",
  "typescript": "^4.8.2"
  },
  "jest": {
  "preset": "react-native"
  }

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[bam-charlesbo]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

I just edited my issue, and added a public repo. Hope it suits you this way.

Thanks for your time.

[Andarist]

It's a limitation of TypeScript. We can't "capture" and retain the generic nature of FlatList when we wrap it.

As a workaround you can use this patch:

diff --git a/components/Notes.tsx b/components/Notes.tsx
index 38e5661..418a358 100644
--- a/components/Notes.tsx
+++ b/components/Notes.tsx
@@ -24,9 +24,9 @@ export const Notes = ({notes}: NotesProps) => {
   );
 };

-const NotesStyle = styled.FlatList({
+const NotesStyle = styled(FlatList<Note>)({
   width: '100%',
-}) as unknown as typeof FlatList;
+});

 const NoteItemText = styled.Text({
   fontSize: 25,

[skudirka-tw]

This also applies to the SectionList component.

[skudirka-tw]

It's a limitation of TypeScript. We can't "capture" and retain the generic nature of FlatList when we wrap it.

As a workaround you can use this patch:

diff --git a/components/Notes.tsx b/components/Notes.tsx
index 38e5661..418a358 100644
--- a/components/Notes.tsx
+++ b/components/Notes.tsx
@@ -24,9 +24,9 @@ export const Notes = ({notes}: NotesProps) => {
   );
 };

-const NotesStyle = styled.FlatList({
+const NotesStyle = styled(FlatList<Note>)({
   width: '100%',
-}) as unknown as typeof FlatList;
+});

 const NoteItemText = styled.Text({
   fontSize: 25,

@Andarist I tried your solution. It looked fine in the IDE, no errors and type looks to be carried onto the component props. However, when I compile I get the following error:

unknown node of type "TSInstantiationExpression" with constructor "Object"