How to push on top array react native năm 2024

Nowadays, displaying a list of data is a common function present in several types of mobile applications, such as social, contacts, e-commerce, news, and financial apps. When it comes to large amounts of data, the efficiency it’s displayed within your app is important for maintaining good performance.

In this article, I’ll walk you through using two methods of listing data in a React Native app: displaying the list with map and using the FlatList component.

Before we get started, if you don’t know how to set up a local development environment, the easiest way to do this is using Expo! Follow this guide to set it up on your machine. Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase. Once you initialize an Expo project, you can start editing your app.js file with the code from this blog post and run expo start to see it on the web, your physical device, or mobile simulator. You can also get started immediately in your browser using Expo’s tool.

The map method technically gives you more flexibility to customize your list the way you want with the React Native ScrollView component but it loads all the items every time which can be expensive.

FlatList is a React Native component that only loads items that are currently visible on the screen and it deletes items as they go off screen which is more optimal for large amounts of data. Furthermore, it provides scrolling features by default. You don’t need to use extra components like ScrollView to make list data scrollable. The FlatList component also comes with the following features automatically:

• Header section
• Footer section
• Horizontal scrolling
• Separator
• Pull to refresh
• Scroll loading
• Scroll to a specific position in the list
• Multiple column support

Under the hood, FlatList uses the ScrollView component to render scrollable elements. However, unlike generic ScrollView, FlatList displays data lazily to save memory and processing time.

Let’s begin with the first method of rendering list data in a React Native app using the map function.

Displaying a List in React Native with Map

For the first method, you can use the JavaScript map method to cycle through an array of data, compute each array item, and display it in a React Native app.

Though you can also go for the for loop or the forEach method to iterate through the array, the map method helps you easily create and return a new modified array.

Let’s take a sample of a list of personal data with name and ID:

Now to render all data on the app screen, you can loop through it and wrap it in a UI component using the below code:

Display list of data

If you run the above code locally or in this Snack, you’ll find that you can view a list of data that’s currently visible on the screen to the left. But you can’t see all the data because the list is not scrollable. Hence, to make a scrollable list of data, you also need to put the View component inside the ScrollView component.

Note: ScrollView must have a parent with a defined height.

The ScrollView is a generic React Native scrolling container that allows both vertical and horizontal direction scrolling. By default, it displays its children vertically in a column because the horizontal prop value is set to false. If you want your elements to be arranged horizontally in a single row, you can set the horizontal value to true.

I’m going to keep the default for this example so our data sits in a column.

If you amend your code in app.js with the above or run it on this Snack, you’ll see we are now able to scroll down the list to see all our data.

Customizing the Mapped List

If you want to further customize the view of the list item by adding a separator, update item feature, swiping gestures, and pagination, you’ll need to add them manually. The first way to list data in React Native using the map method is very flexible, so you can configure the list view based on your needs.

For instance, to insert separating lines between items you can just add another View component below each Text component and give it a height and background color like in this Snack.

Likewise, you can also configure ScrollView to allow paging through views with swiping gestures using the pagingEnabled props. And on iOS, you can set up the maximumZoomScale and minimumZoomScale props to add a zoom-in and -out feature in a ScrollView with a single item.

A React Native list seems like a great way to display a list of data with style as we wish, right? But as you notice, whatever feature you want to add to your list display, you’ll need to write more code for it from scratch.

And if you’re retrieving a massive amount of data, ScrollView doesn’t seem to be a better solution. This is because the map method with ScrollView loads all data to render every time the component renders, which affects the app’s performance. So, for infinite data, you might need to do extra work to handle data using the pagination method.

Want an easy solution? Here comes the FlatList component, which aims not just to ease the task of listing infinite data, but also to improve the app’s performance.

Displaying a List with a React Native FlatList

The FlatList component requires two props: data and renderItem. A data prop takes an array of data that needs to be rendered, and renderItem defines a function that takes data via parameters and returns a formatted component to be displayed on the screen.

The basic code to implement FlatList for the list of person data is as follows:

{item.name}} />

If you run the app with the above code, you might notice a warning that tells you to add unique keys to each list item. To resolve this issue, you first need to decide on a particular piece of data to use as a unique key, like ID or email address, and then specify it using the keyExtractor prop in FlatList.

The basic code to use FlatList with keyExtractor, data, and renderItem will look like this:

Customizing a React Native FlatList

FlatList, by default, provides several props that make it easy to enhance the list functions like pull-to-refresh, separator, header, and footer.

FlatList Separator

The ItemSeparatorComponent prop of FlatList adds a separator between each item in the list.

FlatList Empty List Component

Sometimes you might receive an empty list with no data. In that case, showing a blank screen won’t be a good idea. Hence, FlatList also has a separate ListEmptyComponent prop that takes a component and renders it when the data list is empty.

Header and Footer Components

The FlatList component also provides header and footer component support. If you want to add a component like a search bar, you can use the ListHeaderComponent prop, and for the end list loading component, you can use ListFooterComponent props to the FlatList.

Basic code for the header component prop written inline is as shown below:

And with the footer component prop added:

Now put it all together and it will look like this:

See how it looks on iOS, web, or android in this Snack.

React Native FlatList is Easier and Cheaper to Use

Displaying data using map or other loop methods may give you flexibility to customize the list the way you want, but as the amount of data grows, you also need to take you render on the visible screen.

FlatList makes handling complex and large amounts of list data easy and effortless. Also extra effort is not required to implement lazy loading in the React Native app — FlatList takes care of it by default. You can read more about the FlatList component in the Expo or React Native docs.

How do you push to the top of an array?

The unshift() method adds new elements to the beginning of an array. The unshift() method overwrites the original array.nullJavaScript Array unshift() Method - W3Schoolswww.w3schools.com › jsref › jsref_unshiftnull

How do you push an array in React native?

To push an object into an array in React, you can use the push() method. The push() method takes an element as its argument and adds it to the end of the array. To push an object, you can pass the object as the argument to the push() method.7 thg 3, 2022nullHow to push an object into an array in React - Quorawww.quora.com › How-do-you-push-an-object-into-an-array-in-Reactnull

How do you push an object to the front of an array?

When you want to add an element to the end of your array, use push() . If you need to add an element to the beginning of your array, use unshift() . If you want to add an element to a particular location of your array, use splice() .nullPush into an Array in JavaScript – How to Insert an Element into an ...www.freecodecamp.org › news › how-to-insert-an-element-into-an-array-i...null

How to push array in front in JavaScript?

The push() method adds elements to the end of an array, while unshift() adds them to the beginning. Additionally, push() returns the length of the array after adding elements, while unshift() does not.nullHow to Add Elements to JavaScript Arrays With the unshift() Methodblog.hubspot.com › website › javascript-unshiftnull