react native - SectionList y Typescript
¿Cuál es la manera correcta de escribir SectionList? Me he encontrado con un error donde esto funciona (del ejemplo de la documentación):
<SectionList
renderItem={({item, index}) => <Text key={index}>{item}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={ticksData}
keyExtractor={(item, index) => item + index}
/>;
Pero esto no:
const renderSectionHeader=({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
);
return (
<SectionList
renderItem={({item, index}) => <Text key={index}>{item}</Text>}
renderSectionHeader={renderSectionHeader}
sections={ticksData}
keyExtractor={(item, index) => item + index}
/>;
Obtengo este error:
Los tipos de la propiedad 'renderSectionHeader' son incompatibles. El tipo '({ section: { title } }: { section: { title: any; }; }) => Element' no se puede asignar al tipo '(info: { section: SectionListData; }) => ReactElement'. Los tipos de los parámetros '__0' e 'info' son incompatibles. El tipo '{ section: SectionListData; }' no se puede asignar al tipo '{ section: { title: any; }; }'. Los tipos de la propiedad 'section' son incompatibles. El tipo 'SectionListData' no se puede asignar al tipo '{ title: any; }'. Falta la propiedad 'title' en el tipo 'SectionListData'.
Respuesta #1
Tuve el mismo problema, llegué a esta respuesta pero aún no había solución, así que aquí está la mía:
import { SectionList, SectionListData } from 'react-native';
interface IHeader {
section: SectionListData<{ title: string }>
}
const renderSectionHeader=({section: {title}}: IHeader) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
);
