import React , { useCallback } from 'react' ; import { FlatList , StyleSheet , } from 'react-native' ; import { LoadingIndicator } from 'components' ; import { TagItem } from 'containers' ; interface Props { items : Tag [ ] ; isLoading : boolean ; } const TagList = ( { items , isLoading , } ) => { const renderItem = useCallback ( ( { item } ) => ( < TagItem item = { item } / > ) , [ ] ) ; const keyExtractor = useCallback ( ( item ) => `tag-${ item . id }` , [ ] ) ; return ( < FlatList data = { items } renderItem = { renderItem } keyExtractor = { keyExtractor } contentContainerStyle = { styles . container } ListFooterComponent = { isLoading ? < LoadingIndicator / > : null } />); } ; const styles = StyleSheet . create ( { container : { paddingTop : 8 , paddingBottom : 50 , } , } ) ; export default React . memo ( TagList ) ;