react-native flatList renders blank screen - react-native-flatlist

Question

I'm really new to react-native.
I'm trying to do a flatList.
At first it worked but then I added the bottom tab bar and then it didn't work anymore.
I tried to go back and delete the bottom tab bar but I always have an error.
The Last one was "can't find data". And now without changing anything, I just have a blank screen.
My code :
// Helpers/membersData.js
export default data = [
{
id:1,
name: "Name",
firstname: "Firstname",
address: "some address",
zipcode : 75000,
city: "city",
phone: "",
email: "name.e#gmail.com"
},
{
id:2,
name: "Othername",
firstname: "Otherfirstname",
address: "Other address",
zipcode : 75000,
city: "City",
phone: "0600000000",
email: "name.first#gmail.com"
}
]
The flatList :
// Components/Members.js
import members from '../Helpers/membersData';
import React from 'react';
import { StyleSheet, View, FlatList} from 'react-native';
import MemberDetails from './MemberDetails';
class Members extends React.Component {
render() {
return (
<View style={styles.main_container}>
<FlatList
keyExtractor={(item) => item.id.toString()}
data={members}
renderItem={({item}) => <MemberDetails member={item}/>}
/>
</View>
)
}
}
const styles = StyleSheet.create ({
main_container: {
marginTop: 25,
marginLeft: 10
}
})
export default Members
The list details
// Components/MemberDetails.js
import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
class MemberDetails extends React.Component {
render() {
const member = this.props.member
return (
<View style={styles.main_container}>
<View style={{flexDirection: 'row'}}>
<Text>{member.name}</Text>
<Text style={{marginLeft:10}}>{member.firstname}</Text>
</View>
<View >
<Text >{member.address}</Text>
</View>
<View style={{flexDirection: 'row'}} >
<Text >{member.zipcode}</Text>
<Text style={{marginLeft:10}}>{member.city}</Text>
</View>
<Text>{member.phone}</Text>
<Text style={{marginLeft:10}}>{member.email}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
main_container: {
height: 190,
flexDirection: 'column',
alignItems: 'center'
},
})
export default MemberDetails
The App.js
//import Members from './Components/Members'
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import Members from './Components/Members'
import Homepage from './Components/Homepage'
import SubscriptionsList from './Components/SubscriptionsList'
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Accueil" component={Homepage} />
<Tab.Screen name="Membres" component={Members} />
<Tab.Screen name="Abonnements" component={SubscriptionsList} />
</Tab.Navigator>
</NavigationContainer>
);
}
I don't know what I did wrong.
I'd really appreciate some help.
Thanks !

Answer 1

use
export default [
{
id:1,
name: "Name",
firstname: "Firstname",
address: "some address",
zipcode : 75000,
city: "city",
phone: "",
email: "name.e#gmail.com"
},
{
id:2,
name: "Othername",
firstname: "Otherfirstname",
address: "Other address",
zipcode : 75000,
city: "City",
phone: "0600000000",
email: "name.first#gmail.com"
}
]