It’s a known fact that the performance of FlatList slows down when you have a huge chunk of data. Shopify introduced an alternative to FlatList named FlashList which fixes the shortcomings of FlatList. FlashList is fast and performant when compared to FlatList. It increases the performance in both Android and iOS platforms. After all, FlashList…
FlatList is one of the most used components in react native. It helps to render a list of items smoothly. Having a drag and reorder feature in FlatList helps users to arrange the items as they wish. This feature is very useful when the user wants to change the priority of items in the list….
Sometimes, you may want to generate random colors in your react native project. This short tutorial helps you to generate random colors and set them as background colors in react native. You can generate a random color using the following function in JavaScript. In the following react native example, there’s a FlatList with items that…
When you use components such as FlatList, you may get few warnings in react native. Even though these warnings may not appear as crucial it’s always better to fix those warnings. One such warning you may come across is given below. Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to…
Everyone knows the importance of the FlatList component in react native apps. FlatList helps us to huge amounts of data in the most user-friendly way. In this blog post, let’s check how to add a scroll to bottom functionality to FlatList. If you are looking for how to add the scroll to top option in…
FlatList is one of the most popular components used in react native mobile apps. It helps you to show your data to users in a convenient and scrollable way. A scroll to the top option will be a nice feature for FlatList with so much data. It helps users to return to the top of…
FlatList is one of the most popular components used in react native mobile apps. It helps you to show your data to users in a convenient and scrollable way. A scroll to the top option will be a nice feature for FlatList with so much data. It helps users to return to the top of…
If you have worked with any apps with social feeds then you might have faced this issue. The images you receive from the server will have different heights and widths. As a mobile app developer, you may need to show them neatly with a fixed width and dynamic height. Let’s see how to display images…
If you have worked with any apps with social feeds then you might have faced this issue. The images you receive from the server will have different heights and widths. As a mobile app developer, you may need to show them neatly with a fixed width and dynamic height. Let’s see how to display images…
In this blog post, I will explain how to add a footer to your FlatList component in react native. If you are looking for how to add a header to your FlatList then check out my previous blog post. In some scenarios, adding a footer, which appears at the bottom of the FlatList component is…
If your react native app shows a good amount of data to the user then most probably, you would be using the FlatList component. FlatList is an enhanced component to render data in lists. In this blog post, I am writing about how to make the header component of FlatList sticky. First of all, how…
By default, the behavior of the FlatList component of react native is to scroll. But, in some unusual situations, you may want to disable scrolling in react native FlatList. This blog post goes through how to disable scrolling in FlatList. As you know, FlatList inherits the props of the ScrollView component. Hence you can use…
