Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

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-demo
App.js
import { 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.DataSource existed because ListView itself had no way of efficiently detecting which rows changed – FlatList solves this via React's own key-based diffing.
  • renderRow (ListView) corresponds to renderItem (FlatList) – both receive the current data and return JSX.
  • FlatList only renders visible rows ("virtualized"), ListView ALWAYS renders the entire list immediately.

5. Outputs

Ausgabe
A vertical list with five rows ("Apple", "Pear", "Cherry", "Grape", "Mango"), each separated from the next by a thin gray line.

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.