CODEWITHSUNDEEP
typescriptreact-nativestyled-componentsreact-native-flatlist
Julius Bangert
Julius Bangert

Reputation: 71

React Native FlatList, Styled Components and Typescript

I have a historic ongoing battle with styled-components , FlatList and typescript ... Up until now I've been able to make it work with the following :

const StyledList = styled(FlatList as new () => FlatList<ItemType>)<CustomProps>(props => ({
  .......
}));

This worked fine until I did a recent project upgrade and it's broken this approach. I now have the following dependency versions:

"typescript": "~4.3.5"

"styled-components": "^5.3.3"

"react-native": "0.64.3"

The errors are like this :

Property 'data' does not exist on type 'IntrinsicAttributes & { ref?: Ref<FlatList< ItemType >> | undefined; key?: Key | null | undefined; } & { theme?: DefaultTheme | undefined; } & { ...; } & { ...; }'.

Can anyone offer any insight into this please? What might have changed in recent versions of styled-components or react-native to prevent the original workaround from working?

Upvotes: 5

Views: 913

Answers (2)

Ankit Jain
Ankit Jain

Reputation: 326

It's been a while but I found a way to make it work with custom props as well as retain original behaviour.

type FlatListContainerProps<T> = FlatListProps<T> & {
  $noBorder?: boolean;
};

const ExtendedFlatList = <T,>({ $noBorder, ...props }: FlatListContainerProps<T>) => {
  return <FlatList {...props} />;
};

export const FlatListContainer = styled(ExtendedFlatList)<FlatListContainerProps<any>>`
  border-radius: 20px;
  border-width: ${({ $noBorder }: FlatListContainerProps<any>) => ($noBorder ? 0 : "1px")};
  border-color: #f2f2f2;
  background-color: "green";
` as unknown as typeof ExtendedFlatList;

I hope this is helpful.

Upvotes: 0

Felipe
Felipe

Reputation: 89

import { FlatList, FlatListProps } from 'react-native';
    
const List = styled(FlatList as new (props: FlatListProps<ItemType>) => FlatList<ItemType>)``;

It works for me.

Upvotes: 6

Related Questions