React Native Advanced Guide Save

React Native Advanced Guide Book (iOS & Android) - Be an Expert in 2024 πŸ”₯

Project README

React Native Advanced Guide Book

Alt text

  • This Guide Book was written by @anisurrahman072 (πŸ₯ CONNECT me in X)
  • It consists of 12 chapters & 70+ Advanced Topics that were written with deep R&D and took 5 months to complete in 2023. 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

🟣 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
Open Source Agenda is not affiliated with "React Native Advanced Guide" Project. README Source: anisurrahman072/React-Native-Advanced-Guide

Open Source Agenda Badge

Open Source Agenda Rating