ListItem not rendering data in React native

Question

hi im trying to render some user info in my react native page and i dont know why it should render something like this:

list

but instead my output is

list

so my FlatList is working but my ListItem is no rendering any data someone could help me? i dont know if it is a bug with reactnativeelements or so

User data

export default [
{
    id: 1,
    name: 'Tiago Almeida',
    email: '[email protected]',
    avatarUrl:
        'https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_960_720.png',
},
{
    id: 2,
    name: 'Lucas Silva',
    email: '[email protected]',
    avatarUrl:
        'https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png',
},
{
    id: 3,
    name: 'Andre Ferreira',
    email: '[email protected]',
    avatarUrl:
        'https://cdn.pixabay.com/photo/2018/05/19/22/03/man-3414477_960_720.png',
},];

and this is my main page

export default props => {
    function getActions(user) {
        return (
            <>
                <Button
                    onPress={() => props.navigation.navigate('UserForm', user)}
                    type='clear'
                    icon={<Icon name='edit' size={25} color='orange' />}
                />
            </>
        )
    }

    function getUserItem({ item: user }) {
        return (
            <ListItem
                leftAvatar={{ source: { uri: user.avatarUrl } }}
                key={user.id}
                tittle={user.name}
                subtitle={user.email}
                bottomDivider
                rightElement={getActions(user)}
                onPress={() => props.navigation.navigate('UserForm', user)}


            />
        )

    }

    return (
        <View>
            <FlatList
                keyExtractor={user => user.id.toString()}
                data={users}
                renderItem={getUserItem}
            />
        </View>
    )
};

Answer 1

At the top in your imports write,

import { ListItem, Avatar } from 'react-native-elements';

After that Change your code to this

You don't need getActions

Instead write like this,

 const getUserItem = ({ item: user }) => (
    <ListItem
      bottomDivider
      onPress={() => props.navigation.navigate('UserForm', user)}>
      <Avatar source={{ uri: user.avatarUrl }} />
      <ListItem.Content>
        <ListItem.Title>{user.name}</ListItem.Title>
        <ListItem.Subtitle>{user.email}</ListItem.Subtitle>
      </ListItem.Content>
      <ListItem.Chevron
        name="edit"
        size={25}
        color="orange"
        onPress={() => props.navigation.navigate('UserForm', user)}
      />
    </ListItem>
  );

  return (
    <View>
      <FlatList
        keyExtractor={(user) => user.id.toString()}
        data={users}
        renderItem={getUserItem}
      />
    </View>
  );

Working Example here