Hermes, JSI, Fabric, Yoga, Turbo Module, Codegen — All in one 🔥 — I have found tons of articles on the internet about the new architecture of React Native, but the problem is they were too brief and lacked sufficient information. This made it hard to understand it clearly. Finally, I have gathered all the info from the official documentation of React Native…

iOS + Android — RevenueCat made it really simple 🔥 — Before Start 💁‍♂️ For your information, I found the RevenueCat SDK integration in React Native app very easy once I learned some terms, how “In App Purchase” works, and the steps I needed to follow in sequence. …

I found that the React Native official documentation missed some details about the Hermes bytecode and how to ensure that Hermes was enabled correctly. Let me explain it in an easy way so that you can optimize your app’s performance with respect to the Hermes engine. Let’s take a look…

IOS & Android — Be a Sr. React Native Engineer today 🔥 — This guide covers all the basics of React Native code optimization. This guide is suitable for React Native developers of every level: beginner, intermediate, and senior. However, if you already know how to optimize your code at the code level, you can read my advanced optimization article on React Native…

Fast & Performant React Native List — No more blank cells 🔥 — Let’s see an index of what we will learn from this article: Introduction to “FlashList” What is “RecyclerListView” ? What is “Cell Recycling” ? Benefits of “RecyclerListView” & “FlashList” Difference between “Virtualization” & “Cell Recycling” concepts Basic implementation of FlashList Important Props of FlashList How to write a performant FlashList…

ERROR “ VirtualizedLists should never be nested inside plain ScrollViews”. — React Native provides some components for rendering large lists of data efficiently: <FlatList> and <SectionList>. These components are based on the VirtualizedList component, which implements a virtualization technique to improve memory consumption and performance. Virtualization means that only the items that are currently visible on the screen (or within a…

Optimize list performance — FlatList, SectionList, VirtualizedList, ScrollView (All in one) 🔥 — What is Virtualization? In this guide, we will discuss list virtualization (also known as windowing). This is the idea of rendering only visible rows of content in a dynamic list instead of the entire list. The rows rendered are only a small subset of the full list with what is visible (the window)…

Use React way instead of Functional way of calling a Component. — Basically, there are two ways of calling a Component inside your JSX code. They are: Functional way & React way. Suppose you have a component named as “SoccerCard”. You can reuse this “SoccerCard” component in different screens in your React Native App. Let’s see the “SoccerCard” component looks like below:

Componentization from React Standard — Analysis with code 🔥 — I have shared my 5 years of experience in componentization of React and React Native in this article. If you read this article carefully and understand each example, you will become an expert in React + Native Component, children rendering, and Custom Hooks. …