Skip to main content

 

ScrollView Vs FlatList Vs SectionList Components in “React Native”

To display the menu items on the mobile screen and to offer a good UX, users should be able to scroll up and down the menu, you can use ScrollView which will load the items immediately after the component has been loaded so all data is stored in RAM.

The ScrollView component has only one rule. It must be bounded by a height in order to work. This means we need to make sure that all the parent views have a bounded high.

An app using this component would render all items in the list at once. 

The output of the code snippet is :

The FlatList component serves as an effective tool to render a large scrollable list of items.

Employing a technique known as lazy rendering: items are rendered as the user encounters them in the app and are removed when the user scrolls away from them.

So, the FlatList renders large lists without sacrificing app performance.

This results in faster rendering and great performance, that’s the distinction between FlatList and ScrollView.

The output of the code snippet is :

Much like the FlatList component, the SectionList also renders items lazily but goes a step further for rendering large lists by sections: allowing you to split the list using headers and separators.

The current presentation of the menu consists of an undivided list, to enhance clarity and organization, you could divide the list into sections using the SectionList. Each section would have its unique header that succinctly outlines the contents within that category.

The output of the code snippet is :

you can use these resources to discover more about these components:

ScrollView : https://reactnative.dev/docs/scrollview
FlatList : https://reactnative.dev/docs/flatlist.html
SectionList : https://reactnative.dev/docs/sectionlist

Feel free to explore the whole project code that I’m currently working on it in my GitHub repository.

https://github.com/farahoumezzine/Little-Lemon-Restaurant.git

Comments

Post a Comment

Popular posts from this blog

  Mastering Angular Basics In this blog, we will understand the Core Concepts of Angular What is Angular? A framework designed for building client-side using TypeScript It’s used for building dynamic, single-page applications (SPAs) What are single-page applications? It is a web application implementation that loads a single web document and then updates the content of its body as the user interacts with the application. Component It is a fundamental building block of an application. (every Angular application has at least one Root component ). They encapsulate a unit of functionality, including HTML, CSS, and TypeScript logic. app.component.ts : TypeScript file that contains the logic for the root/app component. app.component.html : HTML template file that defines the structure and content of the app component's view. app.component.css : CSS stylesheet file that contains the styles for the app component's appearance. Components are reusable A component includes a Type...
Post a Comment
Read more

PHP MySQL Connection management AND Database Operations

  PHP MySQL Connection management AND Database Operations The initial step involves establishing a connection to work with the database in PHP. PHP will therefore need to authenticate itself: we say that it establishes a connection with MySQL. To connect using PDO (PHP Data Objects), we need to instantiate the PDO class, passing the database source (server + database name) and a username and password as parameters to the constructor. Method 1: Using a Function <?php //PDO connexion function Connexion ( ) { $hostname = "localhost" ; $username = "The_name_of_your_user" ; $password = "your_password" ; $databasename = "The_name_of_your_DB" ; try { $conn = new PDO ( "mysql:host= $hostname ;dbname=The_name_of_your_DB" , $username , $password ); // set the PDO error mode to exception $conn -> setAttribute (PDO:: ATTR_ERRMODE , PDO:: ERRMODE_EXCEPTION ); echo "C...
Post a Comment
Read more
  Application Programming Interface  RESTful APIs Mobile applications can retrieve data from the user’s device application, an online source, or the database. L et’s start with  API , which stands for  application programming interface : It is a set of rules and protocols that allows different software applications to communicate with each other. The number of APIs globally is growing rapidly, with  Postman reporting typical growth of 39 percent in the last year . More simply , In a restaurant, when you’re ready to order, you have a menu to make your food selection. You choose your desired dish. After finalizing your order, the waiter takes note of it and then takes it to the chef. The latter then prepares your meal accordingly, and the waiter serves it to your table. This process is straightforward for you as a diner since you don’t need to concern yourself with the steps of how the food is cooked. In this scenario, the waiter functions as an intermediary, simi...
Post a Comment
Read more