WookieFPV/React-Native-Advanced-Guide

React Native Advanced Guide Book (iOS & Android) - Be an Expert in 2024 🔥

React Native Advanced Guide Book

• This Guide Book was written by Anis (🩵 CONNECT me in X)
• It consists of 12 chapters & 70+ Topics that were written with deep R&D and took me 5 months to complete.
• The guide was first published as 12 articles on (Medium).
• All the Articles were originally based on RN v0.71.

🩵 If you find this BOOK helpful, please give a STAR 🩵

Table of Contents (70+ TOPICS)

✅ 001 - Ultimate Guide on New Architecture in depth

    - Codegen (Native Code Generator)
    - JSI (JavaScript Interface)
    - Hermes Engine (New JS compiler)
    - Turbo Modules (New Native Modules)
    - Fabric (New Rendering Engine)
    - Yoga (Cross platform layout engine)

✅ 002 - Ultimate Guide on Debugging, Profiling & Advanced Optimization

    - iOS & Android Dev Menu
    - Chrome Dev Tools
    - Performance Monitor
    - FPS (Frame Per Second)
    - React Native four Threads
    - Flipper for JS Context tracking
    - Profiling iOS by Xcode Instruments
    - Android Profiler in Android Studio

✅ 003 - Ultimate Guide on Component (JS) Testing by RNTL with Jest setup

    - Brief intro with all types of RN testing
    - React Native Testing Library (RNTL) details
    - JEST setup & all it's config
    - API => Render(): “queries”, “update", “debug"
    - API => UserEvent()
    - API => FireEvent()
    - API => WaitFor()
    - API => Mocking(): "jest.fn()" & "jest.mock()"
    - Host & Composite components in RN

✅ 004 - Ultimate Guide on Hermes & Static Hermes

    - Bundle Release
    - Relation between Bundle & Hermes
    - Hermes Bytecode (.hbc)
    - How to enable Hermes ?
    - Oversure is Hermes working or not ?
    - Enabling Hermes in Old RN Versions
    - Static Hermes

✅ 005 - Ultimate Guide on How to Enable New Architecture

    - Development ENV to Enable New Architecture
    - Enable Hermes Instruction
    - Npx Commands for Android
    - Npx Commands for iOS
    - Confirm New Architecture in action

✅ 006 - Ultimate Guide on Performance Optimization

    - Use New Architecture
    - FlatList/ SectionList for List Performance
    - Unnecessary Console
    - Cache mechanism
    - Image resize, Cache Image & Fast loading Image
    - Schedule Animation & Native driver
    - Coding standard
    - Hermes Engine
    - Reselect with Redux
    - Monitor Memory usage
    - Fast Navigation

✅ 007 - Ultimate Guide on Virtualization (List of Items) Optimization

    - <VirtualizedList /> optimization
    - <FlatList /> optimization
    - <SectionList /> optimization
    - <ScrollView /> with Virtualization props

✅ 008 - Ultimate Guide on FlashList (Cell Re-Cycling) Optimization

    - Details about “RecyclerListView”
    - Why Cell Re-Cycling ?
    - Difference between "Blank Cell" & "Cell Re-cycling"
    - FlashList Implementation
    - All important props of FlashList
    - Check Performance of your FlashList
    - Reduce "Blank Space" techniques
    - How to Migrate from "FlatList" to "FlashList" ?

✅ 009 - Ultimate Guide on Nested Virtualization (Anti Pattern)

    - Nested VirtualizedLists Error
    - Anti Pattern Reason
    - SOLUTION code

✅ 010 - Ultimate Guide on Component Call (Anti Pattern)

    - Component Call => Functional way
    - Component Call => React way
    - Functional way creates silent ERROR!
    - Error analysis
    - Rules of React Hooks (Violation)
    - Error Solution

✅ 011 - Ultimate Guide on IN APP PURCHASE (iOS & Android)

    - Basic Flow of Payment Gateway
    - Sandbox Testing
    - How GOOGLE IAP & iOS IAP works ?
    - RevenueCat SDK
    - Implementation instruction (iOS & Android)

✅ 012 - Ultimate Guide on Higher Order Component, PROPS & Custom Hooks

    - Higher Order Component (HOC) pattern
    - Render Props pattern
    - Custom Hooks
    - Lifting state to Parent Component
    - When custom Hooks are better than HOC?
    - Custom Hooks replaced "Render props pattern"

🔥 C++ & JSI Module Guides coming soon → → Stay Tune 🚀

Endorsements

🟣 This Book - Featured on the Top RN Radio Podcast - ( by Jamon, Infinite Red )

🟣 RNTL Guide - Endorsed by Official Doc of RNTL - ( by Maciej, Callstack )

Contribution

• If you find any issues in the guidebook, please create a pull request (PR). Your PR will help the community 🚀
• Also, if you want to add more advanced guides to this repository, I will add you as a core contributor here 🔥

🎯 PUBLISHED RN SDK RELEASES R&D GUIDE 🚀

• I'm doing deep R&D on different RN SDK releases & new features
• Doing R&D on React Native Skia, React Native Screen, React Native, Expo, many more new features