React-Native-Advanced-Guide
React-Native-Advanced-Guide copied to clipboard
React Native Advanced Guide Book (iOS & Android) - Be an Expert in 2024 π₯
React Native Advanced Guide Book
- 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
π£ 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 π₯