Handling lists may seem routine and tiring, but imagine improving this game into a more interactive experience. Yes, it’s possible with React Native SectionList. This framework’s multi-dimensional features make it a top choice for the top-rated React Native app development company. This article, provided with practical examples, aims to guide you in adding visually attractive list views. You will also gain the knowledge to personalize this feature further just like how a professional react native development company.
Key Preliminaries
Why emphasize this section? These are the foundational steps that you must address. Setting up the right environment is essential, ensuring that your project has a solid base to start with.
Additionally, organizing your project through the creation of a dedicated folder is needed for structured development. Hence, let’s walk through this section.
The Environment Configuration
Which tool comes to your mind when starting with a React Native project? Is it Expo CLI or React Native CLI? You have either of these two options to go with.
For the scope of this project, let’s go with React Native CLI. But that’s not all you’ll need.
Other software like Android Studio and the Visual Studio Code Editor should be in your toolkit.
Have you installed npm globally on your system yet? Also, it is needed.
And Node.js? It’s vital as it facilitates package management via npm.
Are you in line with the guidelines provided by React Native for your chosen version? Always ensure you adhere to them.
Designating a Folder for the Project
Wondering where to store your project assets? For this, you need to allocate a folder. Create and set aside a unique folder so that you don’t mess up with other files. This fosters simpler navigation across the project of React Native SectionList.
But how can you get this folder? Create a folder in your system as you typically would. Then, open the terminal from within this folder and execute the command: npx react-native init SectionList –version 0.72.3. This action builds the folder along with the files requisite for your project.
Note: In this instance, ‘SectionList’ is the project name, while ‘0.72.3’ denotes the specific React Native version used for the project.
Beginning the Coding Journey
For this section, the main focus is on the App.js file. Follow the given snippet from the source code and ensure you’re aligned with every development step.
Initial Component Imports
This code excerpt initiates the prime journey for the project. It leverages the SectionList component from the ‘react-native’ library.
‘React’ is integrated to utilize the capabilities of the React library, which serves as the foundation for your React Native project.
‘SectionList’ is to construct list views segmented into sections. It organizes and presents data in a structured, categorical manner.
Other elements like StyleSheet, Text, and View are components imported for design, layout, and aesthetic presentation of the app. With these imports, you lay the base.
Task Management and Structuring Data
In this segment of code, you introduce a function ‘App’. Within this function in use, set up a variable ‘newTaskData’ that holds task data. Here is the snippet given
It’s an array, and presently contains a single object.
This object holds a title key, defined as “New Tasks”, indicating the nature of the contained tasks. More critically, this object contains a data key, which is a nested array. And, it’s a repository of the enlisted tasks.
Each individual task is represented as an object with two properties: ‘id’ or a unique identifier for each task and ‘task’ or a textual description of the task, such as ‘Drink Water’ or ‘Sleep for 3 hours’.
As it stands, this data structure holds a list of five tasks, providing a clear view of the ‘New Tasks’ section.
Such a structured approach organizes the tasks in a clear manner.
Understanding the ‘completedTaskData’ Structure
Here, the code allocates tasks that have been accomplished. It is presented in the form of an array ‘completedTaskData’.
At its core, this array encloses an object.
The title, labeled as “Completed Tasks”, represents that the list has a number of tasks successfully completed.
Further, the ‘data’ is stored within this object. Also, there is an array of individual tasks. Each task entry consists of an ‘id’ and the ‘task’ description. The task spans a range of activities. It is from building a tutorial to sharing insights and various reading assignments.
In its entirety, ‘completedTaskData’ is a way to present a list of completed actions or activities.
Visualizing Task Status with SectionList
This snippet visualizes a task list. It is further split into two categories, “New Tasks” and “Completed Tasks”. Here, the ‘SectionList’ component allows you to make sections (New and Completed tasks) and a structured presentation.
The entire list under the ‘Container View’ is wrapped in a <View> component. The ‘styles.container’ gives this box visual properties, like size, padding, and possibly color.
Let’s interpret what’s inside the SectionList.
sections: Find two arrays of tasks (newTaskData for new tasks and completedTaskData for completed tasks) merged using the spread operator (…).
renderItem: This is a function used for rendering individual tasks. It displays task details (e.g., ‘Buy groceries’). Embed these details inside a Text component. The ‘styles.taskItem’ is for styling purposes.
renderSectionHeader: Every section (i.e., ‘New Tasks’ and ‘Completed Tasks’) has a header. This function ‘renderSectionHeader’ determines the appearance or look of this header.
keyExtractor: In a list, every item should have a unique identifier so React can keep track of them efficiently, especially during updates. Hence, in this case, the ‘keyExtractor’ extracts that unique identifier or the task’s id.
stickySectionHeadersEnabled: This is a built-in feature of the SectionList. When you scroll down the list, the section headers (like ‘New Tasks’) will stay fixed at the top of the screen. This is a way to ensure a better experience so that users always know which section they’re in.
Styles Overview
The ‘styles’ object outlines the design for various elements in the application
There are ‘container’, ‘taskItem’, and ‘taskTitle’. Use this property-value pair, you can ensure a clean presentation of tasks and their corresponding sections.
Executing the Entire Program
After writing the code, move forward and test the application.
Follow the below-mentioned steps.
- Go to your app directory in the terminal.
- Execute npm install followed by npx react-native run-android.
- Allow a few moments for the code to launch on your emulator.
Here is the project output in the form of a GIF.
Can you notice the two sections created in the gif? This is what you can build on completing this project. So, keep exploring and keep coding.
