import React from 'react'
import { ScrollView, View } from 'react-native'
import { List, ListItem, SearchBar } from 'react-native-elements'
import PropTypes from 'prop-types'

function PersonListView({colors, styles, list, handlePress}) {
  return (
    <View style={styles.container}>
      <SearchBar
        lightTheme
        placeholderTextColor={colors.tintColor}
        textColor={colors.tintColor}
        containerStyle={styles.searchBarContainer}
        inputStyle={styles.searchBarInput}
        icon={{color: colors.tintColor}}
        clearButtonMode='always'
        placeholder='Buscar'
      />
      <ScrollView style={styles.container}>
        <List containerStyle={styles.list}>
          {
            list.map((l, i) => (
              <ListItem
                roundAvatar
                avatar={{uri:undefined}}
                key={i}
                subtitle={l.subtitle}
                title={l.name}
                onPress={() => handlePress(l)}
              />
            ))
          }
        </List>
      </ScrollView>
    </View>
  )
}

PersonListView.propTypes = {
  colors: PropTypes.object.isRequired,
  styles: PropTypes.object.isRequired,
  list: PropTypes.array.isRequired,
  handlePress: PropTypes.func.isRequired,
}

export default PersonListView

import React from 'react'
import { ScrollView, View } from 'react-native'
import { List, ListItem, SearchBar } from 'react-native-elements'
import PropTypes from 'prop-types'

function PersonListView({colors, styles, list, handlePress}) {
  return (
    <View style={styles.container}>
      <SearchBar
        lightTheme
        placeholderTextColor={colors.tintColor}
        textColor={colors.tintColor}
        containerStyle={styles.searchBarContainer}
        inputStyle={styles.searchBarInput}
        icon={{color: colors.tintColor}}
        clearButtonMode='always'
        placeholder='Buscar'
      />
      <ScrollView style={styles.container}>
        <List containerStyle={styles.list}>
          {
            list.map((l, i) => (
              <ListItem
                roundAvatar
                avatar={{uri:l.photos.length > 0? l.photos[0].url : undefined}}
                key={i}
                subtitle={l.subtitle}
                title={l.name}
                onPress={() => handlePress(l)}
              />
            ))
          }
        </List>
      </ScrollView>
    </View>
  )
}

PersonListView.propTypes = {
  colors: PropTypes.object.isRequired,
  styles: PropTypes.object.isRequired,
  list: PropTypes.array.isRequired,
  handlePress: PropTypes.func.isRequired,
}

export default PersonListView

Add photo to avatar if possible
Add photo to avatar if possible
