ListItem not rendering data in React native - 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: 'tiago#gmail.pt',
avatarUrl:
'https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_960_720.png',
},
{
id: 2,
name: 'Lucas Silva',
email: 'lucas#gmail.com',
avatarUrl:
'https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png',
},
{
id: 3,
name: 'Andre Ferreira',
email: 'andre#gmail.pt',
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