Create an Expandable ListView in React Native

In this article, we will delve into creating a Collapsible Accordion in Re­act Native. This pattern facilitates user inte­raction with a list of items by allowing them to expand or collapse­ each item to reveal or hide additional content.

Prerequisites

• Introduction to React Native
• React Native Components
• React Hooks
• Expo CLI
• Node.js and npm

Steps to Create a React Native Application

Step 1: Create a react native application by using this command

npx create-expo-app <<Project-Name>>

Step 2: After creating your project folder, i.e. “Project-Name” use the following command to navigate to it:

cd <<Project-Name>>

Project Structure

Example: This React Native example showcases an “Collapsible Accordion”. It utilizes various components such as FlatList, Touchable­Opacity, and state management through use­State. Each item in the list can be­ expanded with a simple tap to re­veal additional content. The styling is customize­d, featuring a de­sign with rounded corners, clear title­s, and well-structured information about JavaScript, Gee­ksforgeeks, and Python.

Javascript

// FileName: App.js

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

const ExpandableListItem = ({ item }) => {
    const [expanded, setExpanded] = useState(false);

    const toggleExpand = () => {
        setExpanded(!expanded);
    };

    return (
        <View style={styles.itemContainer}>
            <TouchableOpacity
                onPress={toggleExpand}
                style={styles.itemTouchable}
            >
                <Text style={styles.itemTitle}>
                    {item.title}
                </Text>
            </TouchableOpacity>
            {expanded && (
                <Text style={styles.itemContent}>
                    {item.content}
                </Text>
            )}
        </View>
    );
};

const ExpandableList = ({ data }) => {
    const renderItem = ({ item }) => (
        <ExpandableListItem item={item} />
    );

    return (
        <FlatList
            data={data}
            renderItem={renderItem}
            keyExtractor={(item) => item.id.toString()}
        />
    );
};

const App = () => {
    const data = [
        {
            id: 1,
            title: "What Is Javascript",
            content:
                `JavaScript (JS) is the most popular
                lightweight, interpreted compiled
                programming language. It can be used
                for both Client-side as well as
                Server-side developments. JavaScript
                also known as a scripting language
                for web pages.`,
        },
        {
            id: 2,
            title: "Geeksforgeeks",
            content:
                `A Computer Science portal for geeks.
                It contains well written, well thought
                and well explained computer science and
                programming articles`,
        },
        {
            id: 2,
            title: "What Is Python",
            content:
                `Python is a high-level, general-purpose,
                and very popular programming language.
                Python programming language (latest
                Python 3) is being used in web development,
                Machine Learning applications, along with
                all cutting-edge technology in Software
                Industry.`,
        },
        // ...more items
    ];

    return (
        <View style={styles.container}>
            <Text style={styles.header}>
                Geeksforgeeks
            </Text>
            <Text style={styles.subheader}>
                Expandable List View
            </Text>
            <ExpandableList data={data} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#f5f5f5",
        padding: 20,
    },
    header: {
        fontSize: 30,
        fontWeight: "bold",
        marginBottom: 20,
        color: "green",
        textAlign: "center",
    },
    subheader: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 20,
        textAlign: "center",
    },
    itemContainer: {
        marginBottom: 15,
        padding: 10,
        backgroundColor: "white",
        borderRadius: 10,
        elevation: 3,
    },
    itemTouchable: {
        borderRadius: 10,
        overflow: "hidden",
    },
    itemTitle: {
        fontSize: 18,
        fontWeight: "bold",
        color: "#333",
    },
    itemContent: {
        marginTop: 10,
        fontSize: 14,
        color: "#666",
    },
});

export default App;

Steps to Run:

To run react native application use the following command:

npx expo start

• To run on Android:

npx react-native run-android

• To run on Ios:

npx react-native run-ios

Output: