my FlatList renderITem item type is unknown

[hamed]

I have created my FlatList Like this:

import {createBox} from '@shopify/restyle';
import React, {memo} from 'react';
import {FlatList as NSFlatList} from 'react-native';

import type {Theme} from './theme';

const NSFlatListBox =
  createBox<Theme, React.ComponentProps<typeof NSFlatList>>(NSFlatList);

type Props = React.ComponentProps<typeof NSFlatListBox>;

export const FlatList = memo(({children, ...otherProps}: Props) => (
  <NSFlatListBox
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    {...otherProps}>
    {children}
  </NSFlatListBox>
));

but when I use it, it displays renderITem item type as unknown

[Rafael Hernandez]

+1 I am seeing the same issue.

[gyllenfrans]

It's a generic component, so you'll have to treat it as such

import { createBox } from "@shopify/restyle";
import React, { memo } from "react";
import {
  FlatList as NSFlatList,
  FlatListProps as NSFlatListProps,
} from "react-native";
import { Theme } from "./theme";

const NSFlatListBox = createBox<Theme, NSFlatListProps<any>>(NSFlatList);

type Props<T extends any> = NSFlatListProps<T>;

const _FlatList = <T extends unknown>({
  children,
  ...otherProps
}: Props<T>) => (
  <NSFlatListBox
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    {...otherProps}
  >
    {children}
  </NSFlatListBox>
);

export const FlatList: typeof _FlatList = memo(_FlatList) as any;

Types works statically here, though I haven't tested it runtime

[Marek Fořt]

Thanks @gyllenfrans for the answer here, that should, indeed, be correct. For additional questions, please use https://github.com/Shopify/restyle/discussions. If you think you encountered a bug, you can create another issue with reproduction steps.