In this article, we will delve into creating a Collapsible Accordion in React Native. This pattern facilitates user interaction 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, TouchableOpacity, and state management through useState. Each item in the list can be expanded with a simple tap to reveal additional content. The styling is customized, featuring a design with rounded corners, clear titles, and well-structured information about JavaScript, Geeksforgeeks, and Python.
// 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: