import React , { useMemo , useCallback , } from 'react' ; import { FlatList , StyleSheet , View , } from 'react-native' ; import { Text , CoinItem , RestoreButton , } from 'components' ; import { ReferralCoinItem } from 'containers' ; import { palette , typography , } from 'constants/style' ; import { LocalizedStrings } from 'constants/translations' ; interface Props { items : Coin [ ] ; purchase : ( productId : string ) => void ; restore : ( ) => void ; } const CoinList = ( { items , purchase , restore , } ) => { const Header = useMemo ( ( ) => ( < React . Fragment > < View style = { styles . header } > < Text style = { styles . description } > { LocalizedStrings . COIN_DESCRIPTION } < /Text> < /View> < ReferralCoinItem / > < /React.Fragment>), []); const renderItem = useCallback ( ( { item } ) => ( < CoinItem item = { item } purchase = { purchase } / > ) , [ purchase ] ) ; const keyExtractor = ( item ) => `coin-${ item . id }` ; return ( < FlatList data = { items } renderItem = { renderItem } keyExtractor = { keyExtractor } showsVerticalScrollIndicator = { false } showsHorizontalScrollIndicator = { false } style = { styles . container } contentContainerStyle = { styles . contentContainer } ListHeaderComponent = { Header } ListFooterComponent = { < RestoreButton restore = { restore } / > } />); } ; const styles = StyleSheet . create ( { container : { backgroundColor : palette . gray [ 100 ] , } , contentContainer : { paddingVertical : 6 , } , header : { justifyContent : 'center' , alignItems : 'center' , padding : 16 , } , description : { ... typography . body2 , textAlign : 'center' , } , } ) ; export default React . memo ( CoinList ) ;