VOOZH about

URL: https://www.geeksforgeeks.org/react-native/create-an-expandable-listview-in-react-native/

⇱ Create an Expandable ListView in React Native - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

Create an Expandable ListView in React Native

Last Updated : 2 Aug, 2024

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

👁 Image

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.

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:

Comment

Explore