making a virtualized list with a separate file in react - reactjs

Question

I created a to do list app in app.js and a virtualized list in VirtualizedList.js but none of the virtualized list code is displaying although I imported it into app.js properly.
Here is the VirtualizedList.js code.
import React from 'react';
import { SafeAreaView, View, VirtualizedList, StyleSheet, Text,
StatusBar } from 'react-native';
const DATA = [];
const getItem = (data, index) => ({
id: Math.random().toString(12).substring(0),
title: `Item ${index+1}`
});
const getItemCount = (data) => 50;
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
const App = () => {
return (
<SafeAreaView style={styles.container}>
<VirtualizedList
data={DATA}
initialNumToRender={4}
renderItem={({ item }) => <Item title={item.title} />}
keyExtractor={item => item.key}
getItemCount={getItemCount}
getItem={getItem}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight,
},
item: {
backgroundColor: '#f9c2ff',
height: 100,
justifyContent: 'center',
marginVertical: 7,
marginHorizontal: 24,
padding: 20,
},
title: {
fontSize: 25,
},
});
export default App;
This is how I imported VirtualizedList into app.js:
import VirtualizedList from '/Users/myname/Applications/todo-
app/src/components/VirtualizedList';

Answer 1

Normally you would export default your list in VirtualizedList.js and you would import them in your App.js (renderer) as a normal object. But I would have to see the code to be sure