Зміст курсу

Foundations of React Native

Rendering Data Lists

Theory

FlatList and SectionList are components in React Native used for rendering lists of data. Both components are efficient for handling large lists and are optimized for performance. The key difference lies in how they handle data and their use cases.

FlatList

Why Use FlatList

Dynamic Data Rendering: Ideal for rendering large sets of dynamic data efficiently. Renders only the items that are currently visible on the screen, ensuring performance;
Memory Efficiency: Memory-efficient as it doesn't load the entire dataset into memory at once;
Lazy Loading: Implements lazy loading, meaning it only loads the data needed for the visible items.

Working with FlatList

data: An array of data to be rendered;
renderItem: A function that renders an individual item;
keyExtractor: A function to extract a unique key for each item;
onEndReached (optional): A callback function that is called when the end of the list is reached;
onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

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

// Some data
const data = [
  { key: "1", title: "Windler and Waters", address: "803 Kozey Rapid" },
  { key: "2", title: "Paucek and Sons", address: "7361 Austin Road" },
  { key: "3", title: "Moore, Spencer and Rau", address: "1496 Wilbert Groves" },
];

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Companies:</Text>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>Name: {item.title}</Text>
            <Text style={styles.text}>Address: {item.address}</Text>
          </View>
        )}
        keyExtractor={(item) => item.key}
        // Additional props for customization
      />
    </View>
  );
};

export default App;

Code Description

Line 2: Import FlatList from react-native.
Lines 15-25: FlatList Renders a flat list with data, using the provided renderItem function and other props for customization.
- data: Specifies the array of data that the FlatList will render. In this case, it's the data array containing company information.
- renderItem: Specifies a function that takes an item from the data array and renders it. In this case, it's rendering a View with nested Text components for the company's name and address.
- keyExtractor: Specifies a function to extract a unique key for each item in the list. This is crucial for efficient rendering and updating of the list. In this case, it uses the key property from each item.

Result

SectionList

Why Use SectionList

Organized Data: Useful when the data naturally falls into sections (e.g., categories, dates). Each section can have its own header;
Improved Readability: Provides a structured and organized way to present data, improving readability;
Dynamic Sections: Allows dynamic updates to both sections and data, making it suitable for dynamic content;
Customizable Headers: Supports custom section headers through the renderSectionHeader prop.

Working with SectionList

sections: An array of sections, where each section has a data array and optional renderItem and renderSectionHeader functions;
renderItem: A function that renders an individual item;
renderSectionHeader: A function that renders the section header;
keyExtractor: A function to extract a unique key for each item;
onEndReached (optional): A callback function that is called when the end of the list is reached;
onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

import React from "react";
import { SectionList, View, Text, StyleSheet } from "react-native";

// Some data
const sectionsData = [
  {
    title: "Companies",
    data: ["Windler and Waters", "Paucek and Sons", "Moore, Spencer and Rau"],
  },
  {
    title: "Employers",
    data: ["Clay Labadie DVM", "Shelley Tillman IV", "Harvey Howell"],
  },
];

const App = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={sectionsData}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </View>
  );
};

export default App;

Code Description

Line 2: Import SectionList from react-native.
Lines 19-30: SectionList Renders a sectioned list with headers and items.
- sections: Specifies an array of sections where each section has a title and data property. In this case, it's the sectionsData array containing information about companies and employers.
- keyExtractor: Specifies a function to extract a unique key for each item in the list. Similar to FlatList, this is crucial for efficient rendering and updating of the list.
- renderItem: Specifies a function that takes an item from the data array within each section and renders it. In this case, it's rendering a View with a Text component for each item.
- renderSectionHeader: Specifies a function that takes a section and renders its header. In this case, it's rendering a Text component for the section title.

Result

Both FlatList and SectionList render sets of data. Choose between them based on your specific use case: use FlatList for a simple flat list and SectionList when you need to organize data into sections with headers.

In Practice

Все було зрозуміло?

Секція 2. Розділ 9

Зміст курсу

Foundations of React Native

Rendering Data Lists

Theory

FlatList

Why Use FlatList

Dynamic Data Rendering: Ideal for rendering large sets of dynamic data efficiently. Renders only the items that are currently visible on the screen, ensuring performance;
Memory Efficiency: Memory-efficient as it doesn't load the entire dataset into memory at once;
Lazy Loading: Implements lazy loading, meaning it only loads the data needed for the visible items.

Working with FlatList

data: An array of data to be rendered;
renderItem: A function that renders an individual item;
keyExtractor: A function to extract a unique key for each item;
onEndReached (optional): A callback function that is called when the end of the list is reached;
onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

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

// Some data
const data = [
  { key: "1", title: "Windler and Waters", address: "803 Kozey Rapid" },
  { key: "2", title: "Paucek and Sons", address: "7361 Austin Road" },
  { key: "3", title: "Moore, Spencer and Rau", address: "1496 Wilbert Groves" },
];

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Companies:</Text>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.text}>Name: {item.title}</Text>
            <Text style={styles.text}>Address: {item.address}</Text>
          </View>
        )}
        keyExtractor={(item) => item.key}
        // Additional props for customization
      />
    </View>
  );
};

export default App;

Code Description

Line 2: Import FlatList from react-native.
Lines 15-25: FlatList Renders a flat list with data, using the provided renderItem function and other props for customization.
- data: Specifies the array of data that the FlatList will render. In this case, it's the data array containing company information.
- renderItem: Specifies a function that takes an item from the data array and renders it. In this case, it's rendering a View with nested Text components for the company's name and address.
- keyExtractor: Specifies a function to extract a unique key for each item in the list. This is crucial for efficient rendering and updating of the list. In this case, it uses the key property from each item.

Result

SectionList

Why Use SectionList

Organized Data: Useful when the data naturally falls into sections (e.g., categories, dates). Each section can have its own header;
Improved Readability: Provides a structured and organized way to present data, improving readability;
Dynamic Sections: Allows dynamic updates to both sections and data, making it suitable for dynamic content;
Customizable Headers: Supports custom section headers through the renderSectionHeader prop.

Working with SectionList

sections: An array of sections, where each section has a data array and optional renderItem and renderSectionHeader functions;
renderItem: A function that renders an individual item;
renderSectionHeader: A function that renders the section header;
keyExtractor: A function to extract a unique key for each item;
onEndReached (optional): A callback function that is called when the end of the list is reached;
onRefresh (optional): A callback function that is called when the user pulls the list down to refresh it.

Example

import React from "react";
import { SectionList, View, Text, StyleSheet } from "react-native";

// Some data
const sectionsData = [
  {
    title: "Companies",
    data: ["Windler and Waters", "Paucek and Sons", "Moore, Spencer and Rau"],
  },
  {
    title: "Employers",
    data: ["Clay Labadie DVM", "Shelley Tillman IV", "Harvey Howell"],
  },
];

const App = () => {
  return (
    <View style={styles.container}>
      <SectionList
        sections={sectionsData}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item}</Text>
          </View>
        )}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />
    </View>
  );
};

export default App;

Code Description

Line 2: Import SectionList from react-native.
Lines 19-30: SectionList Renders a sectioned list with headers and items.
- sections: Specifies an array of sections where each section has a title and data property. In this case, it's the sectionsData array containing information about companies and employers.
- keyExtractor: Specifies a function to extract a unique key for each item in the list. Similar to FlatList, this is crucial for efficient rendering and updating of the list.
- renderItem: Specifies a function that takes an item from the data array within each section and renders it. In this case, it's rendering a View with a Text component for each item.
- renderSectionHeader: Specifies a function that takes a section and renders its header. In this case, it's rendering a Text component for the section title.

Result

In Practice

Все було зрозуміло?

Секція 2. Розділ 9