Account screen not render properly

React Native
1

Hello,

I am learning react native and i am stack in Account screen. The problem is not render the first part (Profile part).

import React from ‘react’;
import { FlatList, StyleSheet, Text, View } from ‘react-native’

import Screen from ‘…/components/Screen’;
import ListItem from ‘…/components/ListItem’;
import Icon from ‘…/components/Icon’;
import colors from ‘…/config/colors’;
import ListItemSeparator from ‘…/components/ListItemSeparator’;

const menuItems = [
{
title: “My Listings”,
icon: {
name: “format-list-bulleted”,
backgroundColor: colors.primary,
},
},
{
title: “My Messages”,
icon: {
name: “email”,
backgroundColor: colors.secondary,
},
}
];

function AccountScreen(props) {
return (


<ListItem
title={“Mosh Hamedani”}
subTitle={“[email protected]”}
image={require(‘…/assets/mosh.jpg’)}
/>


<FlatList
data={menuItems}
keyExtractor={menuItems => menuItems.title}
ItemSeparatorComponent={ListItemSeparator}
renderItem={({ item }) => (
<ListItem
IconComponent={}
title={item.title}
/>
)}
/>

<ListItem
title={“Log Out”}
IconComponent={}
/>

);
}

const styles = StyleSheet.create({
screen: {
backgroundColor: colors.light,
},
container: {
marginVertical: 20,
}
})

export default AccountScreen;

this my AccountScreen file code. This code render rest of the things render perfectly except the first part.

Thanks in advance… :slight_smile:

reactNativeAccountScreen
reactNativeAccountScreen447×895 15.9 KB

2

I’m not on my computer, but it seems that you need to put the jsx inside a View tag.

E.g:

return (
    <View>
       {/* your ListItems and Flatlist
             elements will go here */}
    </View>
);
3

I have the same issue too, also used learning code!

4

This solution is not working for me.

5

Can you please share your screen’s component code?

Please put it in the code block for better readability.