ListView Component in React Native (Deprecated)
ListView Component
~9 Min. Lesezeit Zuletzt aktualisiert am August 8, 2026
ListView was React Native's original list component – today marked "deprecated" and removed from React Native itself. It still appears in this reference because you might run into it in older code/older tutorials and should know how to REPLACE it.
1. Description
ListView needed a separate ListView.DataSource helper class and, unlike modern alternatives, rendered ALL items immediately, with no virtualization – a performance problem for long lists. Since React Native 0.60 it's been removed entirely; the official replacement is FlatList (its own topic in this reference).
2. Short example: the historical approach
// This is what it USED to look like (no longer runnable in current React Native):
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
const dataSource = ds.cloneWithRows(['Apple', 'Pear', 'Cherry']);
<ListView
dataSource={dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>3. Complete project: the modern migration
npx create-expo-app listview-migration-demo
cd listview-migration-demoimport { FlatList, Text, View, StyleSheet } from 'react-native';
const FRUITS = ['Apple', 'Pear', 'Cherry', 'Grape', 'Mango'];
export default function App() {
return (
<View style={styles.container}>
<FlatList
data={FRUITS}
keyExtractor={(item) => item}
renderItem={({ item }) => (
<Text style={styles.row}>{item}</Text>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1, paddingTop: 60, paddingHorizontal: 16 },
row: { fontSize: 18, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: '#e5e7eb' },
});4. Explanation
ListView.DataSourceexisted becauseListViewitself had no way of efficiently detecting which rows changed –FlatListsolves this via React's own key-based diffing.renderRow(ListView) corresponds torenderItem(FlatList) – both receive the current data and return JSX.FlatListonly renders visible rows ("virtualized"),ListViewALWAYS renders the entire list immediately.
5. Outputs
Achtung: Do NOT use ListView in new projects – it simply no longer exists in current React Native versions. This topic only exists to help you correctly place and migrate old code from tutorials or existing projects.