DEV Community: Ajmal Hasan

How to Use React Native Best Practices Agent Skills

Ajmal Hasan — Thu, 22 Jan 2026 05:07:14 +0000

Introduction

React Native performance optimization can be complex, with many pitfalls that affect FPS, bundle size, memory usage, and startup time. The react-native-best-practices skill package provides AI coding agents with comprehensive guidelines to automatically detect, suggest, and implement performance optimizations in React Native and Expo applications.

These best practices are packaged as Agent skills that integrate seamlessly into Cursor and other AI-powered coding agents.

When your agent reviews, optimizes, or develops a React Native codebase, it can automatically reference these patterns and suggest fixes based on proven optimization techniques from Callstack's "Ultimate Guide to React Native Optimization."

For detailed information, refer to the official announcement: Announcing: React Native Best Practices for AI Agents

What Are Agent Skills?

Agent skills are knowledge packages that enhance AI coding assistants with domain-specific expertise. Instead of manually searching documentation or remembering optimization patterns, your AI assistant can:

Automatically detect performance issues in your code
Suggest specific fixes based on proven patterns
Reference detailed guides when working on optimization tasks
Apply best practices without you having to prompt for each one

The react-native-best-practices skill contains:

1 main SKILL.md file with quick references and problem mappings
28 detailed reference files covering JavaScript, Native, and Bundling optimizations
Priority-ordered guidelines (CRITICAL → HIGH → MEDIUM impact)
Code examples showing incorrect vs. correct patterns

Installation

For Cursor

Install the skill package using npm:

npx add-skill callstackincubator/agent-skills

This command will:

Download the skill package
Install it into your agent's skill directory (typically .agents/skills/ or .windsurf/skills/)
Make it available for automatic reference during coding sessions

How It Works

Automatic Activation

The skill is automatically activated when your AI assistant detects tasks related to:

Performance Issues

"App feels slow/janky"
"Animation drops frames"
"List scroll is laggy"
"Too many re-renders"
"FPS is low"

Bundle & App Size

"Bundle size is too large"
"App size optimization"
"Reduce bundle size"
"Tree shaking issues"

Memory Problems

"Memory leaks"
"Memory growing over time"
"App crashes due to memory"

Startup Time

"Slow app startup"
"TTI (Time to Interactive) optimization"
"Cold start performance"

Native Modules

"Native module performance"
"Turbo Modules"
"Bridge overhead"
"Android 16KB alignment"

Specific Technologies

FlashList optimization
Hermes optimization
React Native profiling
Reanimated worklets

Example: Automatic Detection

You ask:

"My FlatList is scrolling slowly, how can I optimize it?"

The agent automatically:

Recognizes this as a performance issue
References js-lists-flatlist-flashlist.md from the skill
Suggests replacing FlatList with FlashList
Provides code examples and migration steps
Explains the performance benefits

You ask:

"My bundle size is 15MB, how can I reduce it?"

The agent automatically:

Detects bundle size optimization need
References multiple bundle-related skills:
- bundle-analyze-js.md (to analyze current bundle)
- bundle-barrel-exports.md (to fix barrel imports)
- bundle-tree-shaking.md (to enable tree shaking)
Provides step-by-step optimization plan
Shows before/after code examples

What's Included

Priority-Ordered Guidelines

The skill organizes optimizations by impact:

Priority	Category	Impact	Examples
1	FPS & Re-renders	CRITICAL	FlashList, React Compiler, atomic state
2	Bundle Size	CRITICAL	Barrel exports, tree shaking, R8
3	TTI Optimization	HIGH	Hermes mmap, native navigation
4	Native Performance	HIGH	Turbo Modules, threading
5	Memory Management	MEDIUM-HIGH	Memory leak detection
6	Animations	MEDIUM	Reanimated worklets

Reference Files

JavaScript/React (`js-*`)

js-lists-flatlist-flashlist.md - Replace ScrollView with virtualized lists
js-profile-react.md - React DevTools profiling
js-measure-fps.md - FPS monitoring
js-memory-leaks.md - JS memory leak detection
js-atomic-state.md - Jotai/Zustand patterns
js-concurrent-react.md - useDeferredValue, useTransition
js-react-compiler.md - Automatic memoization
js-animations-reanimated.md - Reanimated worklets
js-uncontrolled-components.md - TextInput optimization

Native (`native-*`)

native-turbo-modules.md - Building fast native modules
native-sdks-over-polyfills.md - Native vs JS libraries
native-measure-tti.md - TTI measurement
native-threading-model.md - Turbo Module threads
native-profiling.md - Xcode/Android Studio profiling
native-memory-leaks.md - Native memory leak detection
native-android-16kb-alignment.md - Google Play alignment

Bundling (`bundle-*`)

bundle-barrel-exports.md - Avoid barrel imports
bundle-analyze-js.md - JS bundle visualization
bundle-tree-shaking.md - Dead code elimination
bundle-r8-android.md - Android code shrinking
bundle-hermes-mmap.md - Disable bundle compression

Real-World Usage Examples

Example 1: Fixing Slow List Scrolling

Before (without skill):
You might manually search for "React Native list optimization" and try various solutions.

With skill:

// Agent automatically suggests:
// ❌ Current code
<ScrollView>
  {items.map(item => <Item key={item.id} />)}
</ScrollView>

// ✅ Optimized code
import { FlashList } from '@shopify/flash-list';

<FlashList
  data={items}
  renderItem={({ item }) => <Item item={item} />}
  estimatedItemSize={100}
/>

The agent explains:

Why FlashList is better than FlatList/ScrollView
How to estimate item sizes
Performance improvements (often 2-3x faster)

Example 2: Reducing Bundle Size

With skill, the agent automatically:

Analyzes your imports
Detects barrel exports
Suggests direct imports

// ❌ Barrel import (bundles everything)
import { Button, Card, Modal } from './components';

// ✅ Direct imports (only bundles what you use)
import Button from './components/Button';
import Card from './components/Card';

Example 3: Memory Leak Detection

You mention: "My app's memory keeps growing"

Agent automatically:

References js-memory-leaks.md
Suggests profiling steps
Identifies common leak patterns:
- Event listeners not cleaned up
- Timers/intervals not cleared
- Subscriptions not unsubscribed
Provides fix examples

Problem → Skill Mapping

The skill includes a built-in mapping so agents know which reference to use:

Problem	Agent References
App feels slow/janky	`js-measure-fps.md` → `js-profile-react.md`
Too many re-renders	`js-profile-react.md` → `js-react-compiler.md`
Slow startup (TTI)	`native-measure-tti.md` → `bundle-analyze-js.md`
Large app size	`bundle-analyze-app.md` → `bundle-r8-android.md`
Memory growing	`js-memory-leaks.md` or `native-memory-leaks.md`
Animation drops frames	`js-animations-reanimated.md`
List scroll jank	`js-lists-flatlist-flashlist.md`
TextInput lag	`js-uncontrolled-components.md`
Native module slow	`native-turbo-modules.md` → `native-threading-model.md`

Benefits

1. Automatic Pattern Recognition

No need to remember all optimization patterns. The agent recognizes issues and suggests fixes automatically.

2. Proven Solutions

Based on Callstack's comprehensive optimization guide, tested in real-world applications.

3. Context-Aware Suggestions

The agent understands your specific problem and provides relevant solutions, not generic advice.

4. Code Examples

Each skill includes before/after code examples, making implementation straightforward.

5. Priority Guidance

CRITICAL issues are addressed first, ensuring maximum impact.

6. Comprehensive Coverage

28 reference files cover JavaScript, Native, and Bundling optimizations.

Best Practices for Using the Skill

1. Be Specific About Problems

Instead of "my app is slow," say:

"My FlatList scrolls at 30 FPS"
"App startup takes 5 seconds"
"Bundle size is 20MB"

2. Let the Agent Analyze First

Ask the agent to:

"Analyze my codebase for performance issues"
"Check for barrel imports"
"Review my list components"

3. Follow the Suggestions

The agent provides prioritized fixes. Start with CRITICAL items first.

4. Measure Before and After

Use the profiling tools mentioned in the skills to verify improvements:

FPS monitoring
Bundle analysis
Memory profiling
TTI measurement

Integration with Your Workflow

During Code Review

The agent automatically flags:

ScrollView usage (should be FlashList)
Barrel imports
Missing memoization
Inline styles (if using Unistyles)

During Development

The agent suggests:

Better component patterns
Performance optimizations
Memory-efficient implementations

During Optimization

The agent provides:

Step-by-step optimization plans
Measurement tools
Before/after comparisons

Troubleshooting

Skill Not Activating?

Check Installation

   ls .agents/skills/react-native-best-practices/
   # or
   ls .windsurf/skills/react-native-best-practices/

Use Specific Keywords
- "performance"
- "optimization"
- "bundle size"
- "memory leak"
- "FPS"
Be Explicit
- "Use react-native-best-practices to optimize this"
- "Check this code against performance best practices"

Skill Suggestions Not Relevant?

The skill is designed for React Native/Expo apps. For other frameworks, different skills may be needed.

Conclusion

The react-native-best-practices agent skill transforms your AI coding assistant into a React Native performance expert. By automatically detecting issues and suggesting proven optimizations, it helps you:

Build faster apps with better FPS and responsiveness
Reduce bundle sizes for faster downloads
Prevent memory leaks that cause crashes
Optimize startup time for better user experience

Install it once, and your agent will continuously help you write performant React Native code.

Additional Resources

Official Announcement: Announcing: React Native Best Practices for AI Agents
Source Guide: Based on Callstack's Ultimate Guide to React Native Optimization
Skill Repository: callstackincubator/agent-skills
Installation: npx add-skill callstackincubator/agent-skills

Happy Optimizing! 🚀

Lightning-Fast In-App Debugging with React Native BugBubble

Ajmal Hasan — Mon, 05 Jan 2026 07:05:58 +0000

If you want real-time visibility into network calls, WebSocket events, console logs, and analytics without leaving your app, @lokal-dev/react-native-bugbubble is a lightweight drop-in debugger for React Native.

DEMO

Why BugBubble?

Floating debug bubble you can drag and tap to open the debugger UI.
Tracks network, WebSocket, console, and analytics events out of the box.
Zero native setup; pure JS/TS with sensible defaults.
Configurable log limits, button position, and per-signal tracking.

Installation

yarn add @lokal-dev/react-native-bugbubble
# or
npm install @lokal-dev/react-native-bugbubble

Minimal Integration

Add the component at your app root so it mounts once:

import { BugBubbleProvider } from '@components/global/BugBubbleProvider';

export default function App() {
  return (
    <>
      <YourApp />
      <BugBubbleProvider />
    </>
  );
}

Configuring the Debugger

You can tune log limits, bubble position, and tracking switches:

import { BugBubble } from '@lokal-dev/react-native-bugbubble';

const IS_BUG_BUBBLE_ENABLED = Keys.ENV !== 'production';

/**
 * BugBubble configuration options
 */
const bugBubbleConfig = {
  maxLogs: 100, // Maximum number of logs to store
  floatingButtonPosition: {
    top: 150,
    right: 30,
  },
  trackingOptions: {
    enabled: true,
    options: {
      console: true, // Track console logs
      network: true, // Track network requests
      websocket: true, // Track websocket connections
      analytics: true, // Disable analytics tracking
    },
  },
  ignoreUrls: [/symbolicate/, /generate_204/, /clients3\.google\.com/], // optional: hide unwanted urls
};

export const BugBubbleProvider = () => {
  if (!IS_BUG_BUBBLE_ENABLED) {
    return null;
  }

  return <BugBubble config={bugBubbleConfig} />;
};

Notes:

Config is read on mount; remount to change it.
Disabling a log type hides its tab and stops interceptors for that type.

Manual Logging (Optional)

If you need to log custom events:

import { BugBubbleLogger } from '@lokal-dev/react-native-bugbubble';

BugBubbleLogger.logAnalytics('user_login', { method: 'email' });
BugBubbleLogger.logNetwork('POST', 'https://api.example.com/users', 201);
BugBubbleLogger.logWebSocket('message', 'wss://api.example.com/ws', { ping: true });
BugBubbleLogger.logConsole('warn', 'Deprecated API used');

When to Use It

QA builds to inspect API traffic without remote tools.
Investigating flaky WebSocket or console noise in CI-only environments.
Lightweight alternative to heavier remote debuggers.

For full API details and examples, see the project repo: react-native-bugbubble on GitHub.

Knip: Dead Code Detector for JavaScript & TypeScript Projects

Ajmal Hasan — Tue, 23 Dec 2025 19:51:53 +0000

Every mature codebase has dead code. That utility function someone wrote "just in case." The component from a feature that was scrapped. The npm package installed for a spike that never went anywhere.

ESLint can catch unused variables and imports within a file, but what about:

Files that are never imported anywhere?
Exported functions that no one uses?
Dependencies in package.json you forgot to remove?
Types and interfaces defined but never referenced?

This is where Knip comes in.

What Knip Detects

Category	Description
🗂️ Unused Files	Source files that aren't imported anywhere
📦 Unused Dependencies	Packages in `package.json` that aren't used
📤 Unused Exports	Functions, classes, types exported but never imported
🔧 Unused Dev Dependencies	Dev packages that aren't needed
❓ Unlisted Dependencies	Packages used in code but missing from `package.json`
🔗 Unresolved Imports	Imports pointing to non-existent modules

Getting Started

Installation

# npm
npm install -D knip

# yarn
yarn add -D knip

# pnpm
pnpm add -D knip

Basic Usage

Just run it:

npx knip

That's it! Knip will analyze your project and output all the unused code it finds.

Configuration

For most projects, Knip works out of the box. But for complex setups (monorepos, custom entry points, etc.), you'll want a config file.

Create knip.json in your project root:

{
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "entry": ["src/index.ts", "src/App.tsx"],
  "project": ["src/**/*.{ts,tsx}"],
  "ignore": [
    "**/__tests__/**",
    "**/__mocks__/**",
    "**/node_modules/**"
  ],
  "ignoreDependencies": [
    "prettier",
    "husky"
  ]
}

Key Configuration Options

Option	Description
`entry`	Entry point files where Knip starts tracing
`project`	Files to analyze
`ignore`	Files/patterns to skip
`ignoreDependencies`	Dependencies to skip (useful for config-only packages)
`ignoreExportsUsedInFile`	Don't report exports used only in the same file

React Native Example

For React Native projects, you'll need to account for native tooling and development dependencies:

{
  "$schema": "https://unpkg.com/knip@5/schema.json",
  "entry": ["src/App.tsx", "index.js"],
  "project": ["src/**/*.{ts,tsx}"],
  "ignore": [
    "**/__tests__/**",
    "**/__mocks__/**",
    "android/**",
    "ios/**"
  ],
  "ignoreDependencies": [
    "@react-native/metro-config",
    "@react-native/typescript-config",
    "@react-native/babel-preset",
    "patch-package",
    "husky",
    "reactotron-react-native"
  ],
  "ignoreExportsUsedInFile": true
}

Real-World Results

I ran Knip on a production React Native app, and here's what it found:

Unused files (73)
src/components/map/index.tsx
src/components/views/NotificationMenuButton.tsx
src/models/requests/auth/authRequests.ts
src/utils/helpers/contactHelper.ts
... and 69 more

Unused dependencies (1)
@react-native-firebase/perf

Unused devDependencies (4)
@babel/preset-env
@testing-library/jest-native
@types/react-native-get-random-values
eslint-plugin-react-you-might-not-need-an-effect

Unlisted dependencies (2)
credit-card-type  src/features/paymentMethods/addNewCard/index.tsx

Unused exports (74)
translations        src/config/localization/languages.ts
defaultAddressForm  src/features/addressBook/addressTypes.ts
... and more

73 unused files! That's potentially thousands of lines of dead code that:

Increases bundle size
Confuses new developers
Creates maintenance burden
Shows up in search results, wasting time

iOS Bridging Header Setup for React Native

Ajmal Hasan — Tue, 16 Dec 2025 18:51:43 +0000

A bridging header allows Swift code to access Objective-C libraries and native modules. Here's how to set it up.

Setup Steps

Step 1: Create the Bridging Header File

Right-click on your project folder in Xcode
Select New File from Template
Choose Header file

Step 2: Configure the File

Click Header file template
Name it: YourAppName-Bridging-Header.h
Select all targets (main app, development, production)
Click Create

Step 3: Set the Bridging Header Path

For each target:

Go to Build Settings
Search for "Objective-C Bridging Header"
Set path: YourAppName/YourAppName-Bridging-Header.h

Step 4: Import Your Headers

Open the bridging header and import what you need:

// React Native Config
#import "RNCConfig.h"

// Google Maps
#import <GoogleMaps/GoogleMaps.h>

// Your custom modules
#import "CustomNativeModule.h"

Step 5: Use in AppDelegate.Swift

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, 
                     didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // Access environment variables
        if let apiKey = RNCConfig.env(for: "API_KEY") {
            GMSServices.provideAPIKey(apiKey)
        }

        // Initialize Firebase
        FirebaseApp.configure()

        return true
    }
}

Step 6: Clean and Build

Clean: Cmd + Shift + K
Build: Cmd + B
Run: Cmd + R

Project Structure

YourAppName/
├── ios/
│   ├── YourAppName/
│   │   ├── AppDelegate.swift
│   │   ├── YourAppName-Bridging-Header.h  ✅
│   │   └── Info.plist
│   └── Pods/
└── package.json

Found this helpful? Drop a ❤️ below! 🚀

ReactNative #iOS #Swift #MobileDevelopment

Stop Fighting React Native Dependency Hell — Use This Microsoft Tool

Ajmal Hasan — Mon, 08 Dec 2025 14:18:07 +0000

The Problem Every React Native Dev Knows

You've been there. You run yarn install, everything looks fine, then boom — runtime crashes, red screens, or mysterious build failures. The culprit? Incompatible package versions.

React Native's ecosystem moves fast. Package A needs React Native 0.81, but Package B was last tested on 0.79. Figuring out which versions play nice together? A nightmare.

Enter `@rnx-kit/align-deps`

Microsoft built a tool that solves this: align-deps. It automatically checks and fixes your dependencies to ensure they're compatible with your React Native version.

Quick Setup (2 minutes)

1. Install it:

yarn add @rnx-kit/align-deps --dev

2. Add these scripts to package.json:

{
  "scripts": {
    "check-dependencies": "rnx-align-deps",
    "fix-dependencies": "rnx-align-deps --write"
  }
}

3. Initialize for your RN version:

npx rnx-align-deps --init app

4. Fix any issues:

yarn fix-dependencies

That's it. The tool scans your dependencies and adjusts versions to ones known to work together.

Upgrading React Native? Here's Your Toolkit

Upgrading React Native involves two things: dependencies and native files. You need different tools for each.

Step 1: Align Your Dependencies

Use align-deps to update all your JS dependencies to compatible versions:

npx @rnx-kit/align-deps --requirements react-native@0.81 --write

This updates all your React Native-related packages to versions known to work with RN 0.81. No more guessing which version of react-native-screens or react-native-reanimated, etc you need.

Step 2: Update Native Files (iOS/Android)

Dependencies are only half the battle. React Native upgrades often require changes to native files like AppDelegate.swift, build.gradle, Podfile, etc.

👉 Use the React Native Upgrade Helper

This tool shows you a visual diff of all native file changes between your current version and your target version.

How to use it:

Go to react-native-community.github.io/upgrade-helper
Select your current RN version (e.g., 0.79.0)
Select your target RN version (e.g., 0.81.0)
Review the diff and apply changes to your ios/ and android/ folders

Pro Tip: Use Both Together

Task	Tool
Update JS dependencies	`@rnx-kit/align-deps`
Update native files	Upgrade Helper

This combo makes React Native upgrades dramatically less painful.

What align-deps Actually Does

When I ran fix-dependencies on my project, it:

⬇️ Downgraded some packages to stable, compatible versions
🔓 Added flexibility (^) to some pinned versions
📋 Generated config tracking which "capabilities" my app uses

For example, it changed:

react-native-modal: ^14.0.0-rc.1 → ^13.0.0 (stable over RC)
react-native-screens: 4.16.0 → ^4.11.1 (known compatible)

Should You Use It?

Yes, if:

You maintain a production React Native app
You've wasted time debugging version conflicts
You want safer React Native upgrades
You work in a team and need consistent dependencies

Maybe not if:

You need bleeding-edge package versions
You have a simple app with few dependencies

⚠️ Important: Always Review Changes

The tool modifies your package.json automatically. Always:

Review the diff (git diff package.json)
Test your app thoroughly
Check if any downgraded packages break features you need

Resources

📚 align-deps Documentation
🔄 React Native Upgrade Helper

Have you tried these tools? Did they help or cause issues? Drop a comment below! 👇

Debugging Native Code in React Native: A Step-by-Step Guide (Android & iOS)

Ajmal Hasan — Sun, 07 Dec 2025 18:06:21 +0000

As React Native developers, we're comfortable with JavaScript debugging—Chrome DevTools, console logs, the usual suspects. But native code? That's where things get intimidating.

Here's what I learned about debugging Kotlin/Swift code in React Native apps, and why it's not as scary as you think.

Why Bother with Native Debugging?

Third-party library crashes: That cryptic native error? Step through the actual code to see what's breaking.
Custom native modules: Debug your bridge code properly instead of littering it with log statements.
Performance issues: JavaScript profiling won't show native rendering bottlenecks.
Platform-specific bugs: That Android 12-only crash? See exactly where and why it fails.

The Debugging Tools

Android Studio (Kotlin/Java)

Android Studio is your IDE for the Android native side. It's built on IntelliJ, so if you've used WebStorm or other JetBrains tools, the interface will feel familiar.

Key debugging shortcuts:

F8 - Step Over (execute current line, move to next)
F7 - Step Into (dive into function call)
Shift+F8 - Step Out (finish current function, return to caller)
F9 - Resume (continue until next breakpoint)
Cmd+F8 - Toggle breakpoint

Xcode (Swift/Objective-C)

Xcode is Apple's IDE for iOS development. It has powerful debugging tools, though the keyboard shortcuts differ from Android Studio.

Key debugging shortcuts:

F6 - Step Over
F7 - Step Into
F8 - Step Out
Control button (or Ctrl+Cmd+Y) - Continue/Resume
Cmd+\ - Toggle breakpoint

Setting Up: My Practice Code

To really learn debugging, I added sample code to both platforms with common patterns you'll encounter. Here's what I created:

Android (MainActivity.kt)

private fun debugBreakpointDemo() {
    val userName = "ReactNativeDev"
    val userAge = 28
    val isActive = true

    val items = listOf("Apple", "Banana", "Cherry", "Date", "Elderberry")

    for ((index, item) in items.withIndex()) {
        Log.d("BreakpointDemo", "Item $index: $item")

        if (index == 2) {
            val specialItem = item.uppercase()
            Log.d("BreakpointDemo", "Special item found: $specialItem")
        }
    }

    val result = performCalculation(10, 20)
    Log.d("BreakpointDemo", "Calculation result: $result")
}

private fun performCalculation(a: Int, b: Int): Int {
    val sum = a + b
    val multiplied = sum * 2
    return multiplied
}

iOS (AppDelegate.swift)

func debugBreakpointDemo() {
    let userName = "ReactNativeDev"
    let userAge = 28
    let isActive = true

    let items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

    for (index, item) in items.enumerated() {
        print("Item \(index): \(item)")

        if index == 2 {
            let specialItem = item.uppercased()
            print("Special item found: \(specialItem)")
        }
    }

    let result = performCalculation(a: 10, b: 20)
    print("Calculation result: \(result)")
}

func performCalculation(a: Int, b: Int) -> Int {
    let sum = a + b
    let multiplied = sum * 2
    return multiplied
}

Hands-On: Your First Native Debugging Session

Let me walk you through a practice session. This is how I learned, and it demystified native debugging completely.

Step 1: Set Your First Breakpoint

Android Studio:

Open android/app/src/main/java/.../MainActivity.kt
Find the line val userName = "ReactNativeDev"
Click the gray gutter area to the left of the line number
A red dot appears—that's your breakpoint

Xcode:

Open ios/YourApp/AppDelegate.swift
Find the line let userName = "ReactNativeDev"
Click the gray gutter to the left
A blue arrow appears—that's your breakpoint

Step 2: Run in Debug Mode

Android Studio:

Click the bug icon 🪲 in the toolbar (or press Shift+F9)
The app launches and immediately pauses at your breakpoint
The IDE highlights the current line in blue

Xcode:

Press Cmd+R or click the Play button
The app pauses at your breakpoint
The current line is highlighted with a green overlay

Step 3: Explore the Variables Panel

This is where the magic happens. Look at the bottom of your IDE.

You'll see a "Variables" panel showing:

userName = "ReactNativeDev"
userAge = <not initialized yet>
isActive = <not initialized yet>

Why aren't the others initialized? Because breakpoints pause before executing the line. The line is about to run but hasn't yet.

Step 4: Step Over (F8 or F6)

Press F8 (Android Studio) or F6 (Xcode) a few times. Watch as:

userName appears in variables
Next step: userAge appears
Next step: isActive appears
The list items gets created

You're executing line by line. This is stepping over—you execute the current line and move to the next one without diving into function internals.

Step 5: Step Into a Function (F7)

Keep stepping until you reach the line:

val result = performCalculation(10, 20)

Now instead of pressing F8/F6, press F7.

Boom! You're now inside the performCalculation function. The IDE jumped you to its definition. This is stepping into—diving into the implementation of a function call.

Step over a couple of times inside this function. Watch sum and multiplied appear in the variables panel.

Step 6: Step Out (Shift+F8 or F8)

You've seen enough inside performCalculation. Press Shift+F8 (Android Studio) or F8 (Xcode).

The function completes, and you're back where you called it from. The result variable now contains the return value (60). This is stepping out—finishing the current function and returning to the caller.

Step 7: Resume Execution (F9 or Continue Button)

Press F9 (Android Studio) or click the Continue button (Xcode) to let the app run normally until it hits another breakpoint (or finishes).

Advanced Techniques I Use Daily

Conditional Breakpoints

Right-click a breakpoint and add a condition. For example, only break when index == 2 in a loop. This saved me hours when debugging issues that only occurred on the 100th iteration.

Android Studio: Right-click breakpoint → More → Condition
Xcode: Right-click breakpoint → Edit Breakpoint → Condition

Expression Evaluation

While paused, you can evaluate any expression on the fly.

Android Studio:

Select an expression in code
Right-click → Evaluate Expression (or Alt+F8)
Try: items.filter { it.startsWith("A") }

Xcode:

In the debug console, type: po items.filter { $0.hasPrefix("A") }
po means "print object"

Call Stack Navigation

The call stack shows how you got to the current line. Click any frame to jump to that context and see its variables. Invaluable when you're deep in a chain of function calls.

Watch Variables

Add variables to your watch list to track them across function calls. They persist even when out of scope.

Android Studio: Right-click variable → Add to Watches
Xcode: Right-click variable → Watch "variableName"

Real-World Example: Debugging a Crash

Last week, my app crashed when users tapped a button. JavaScript logs showed nothing. Here's how native debugging saved me:

Android Studio: Set breakpoint in onClick handler
Run in debug mode, tap the button
Step through the native code
Found the crash: accessing an ArrayList index that didn't exist
The issue: JavaScript sent wrong array length to native

Without stepping through with breakpoints, I'd have spent hours adding log statements and rebuilding.

Tips from the Trenches

Start simple: Don't try to debug react-native core libraries on day one. Practice with your own simple native code first.

Use both IDEs: I have both Android Studio and Xcode open when working on RN. Debug both platforms regularly—they have different bugs.

Combine with JS debugging: Use both Chrome DevTools for JS and native debuggers. Some bugs span both layers.

Read the call stack: When you hit a breakpoint, spend time reading the call stack. Understanding how you got there is as important as where you are.

Don't fear native code: It's just code. Kotlin and Swift are actually quite pleasant languages. The debugging process is identical to JavaScript debugging, just different tools.

Practice Challenge

Here's what I recommend: spend 30 minutes today just stepping through the sample code I showed above. Don't try to fix anything, just explore:

Set breakpoints in loops
Step into and out of functions
Watch variables change
Evaluate expressions
Add conditional breakpoints

This low-pressure practice builds the muscle memory. When you hit a real bug, you'll know exactly what to do.

Resources That Helped Me

Conclusion

Native debugging isn't scary—it's empowering. As React Native developers, we shouldn't fear diving into the native layer. These tools are powerful, learnable, and absolutely essential for professional RN development.

The difference between a good RN developer and a great one? Great ones are comfortable in all three worlds: JavaScript, Android native, and iOS native.

Start small, practice deliberately, and soon you'll wonder how you ever developed without native debugging.

Happy debugging! 🐛🔍

What native debugging techniques have you found helpful? Share your experiences in the comments below!

How I Reduced My React Native 0.81 APK Size by 50% (Without Breaking Anything)

Ajmal Hasan — Fri, 05 Dec 2025 21:38:01 +0000

A large APK size can slow down downloads, increase install drop-offs, and impact user experience — especially in regions with slower internet connections.

In this post, I'll walk you through the exact steps I used to reduce a production React Native 0.81 app's APK size by ~50%, while maintaining full functionality and security.

📊 The Results

Before	After	Reduction
~85 MB	~42 MB	~50%

🛠️ Step 1: Build Only for arm64-v8a Architecture

Most optimization guides tell you to split APKs by CPU architecture. But here's the thing: if your minSdkVersion is 29+ (Android 10+), you only need arm64-v8a.

Why? Because:

✅ All Android 10+ devices support 64-bit (arm64-v8a)
✅ Google Play Store requires 64-bit support
✅ 95%+ of active Android devices use arm64-v8a
❌ armeabi-v7a is for 32-bit devices (pre-2014)
❌ x86/x86_64 is for Intel devices (<1% market share)

Implementation

In your android/app/build.gradle:

// Enable separate builds per CPU architecture
def enableSeparateBuildPerCPUArchitecture = true

android {
    // ... existing config ...

    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // No universal APK needed
            include "arm64-v8a"  // Only modern 64-bit devices
        }
    }
}

> 💡 Pro tip: Set universalApk false to skip building a fat universal APK — it's unnecessary when targeting a single architecture.

🌍 Step 2: Keep Only Necessary Languages

Your app probably only supports a few languages, but by default, Android bundles resources for ALL languages from your dependencies (like Google Play Services).

Implementation

In android/app/build.gradle, inside defaultConfig:

defaultConfig {
    // ... existing config ...

    // Keep only necessary languages to reduce APK size
    resConfigs "ar", "en", "fr"  // Add your supported languages
}

This single line can remove several megabytes of unused language resources!

📦 Step 3: Enable Resource Shrinking & PNG Compression

Enable these in your release build type:

buildTypes {
    release {
        signingConfig signingConfigs.release
        debuggable false
        minifyEnabled true          // Code shrinking (already enabled)
        shrinkResources true        // Remove unused resources
        crunchPngs true             // Extra PNG compression
        zipAlignEnabled true        // Memory optimization
        proguardFiles getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro"
    }
}

What Each Does:

Option	Benefit
`minifyEnabled true`	Removes unused code, obfuscates names
`shrinkResources true`	Removes unused drawables, layouts, etc.
`crunchPngs true`	Additional PNG compression
`zipAlignEnabled true`	Optimizes APK for memory-mapped reading

🔐 Step 4: Optimize ProGuard Rules

ProGuard (or R8) is powerful but can break your app if not configured correctly. Here's a comprehensive, battle-tested configuration for React Native 0.81:

`android/app/proguard-rules.pro`

# ========== STANDARD OPTIMIZATIONS ==========
-optimizationpasses 3
-allowaccessmodification
-overloadaggressively
-repackageclasses ''
-dontusemixedcaseclassnames
-dontpreverify

# Remove debug logging in production (keeps error logs)
-assumenosideeffects class android.util.Log {
    public static *** d(...);
    public static *** v(...);
    public static *** i(...);
    public static *** w(...);
}

# Keep crash reporting info
-keepattributes SourceFile,LineNumberTable
-renamesourcefileattribute SourceFile
-keepattributes Signature, *Annotation*

# ========== REACT NATIVE CORE ==========
-keep class com.facebook.hermes.** { *; }
-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.react.** { *; }
-keep class com.facebook.jni.** { *; }
-keep class com.facebook.soloader.** { *; }

# Bridge & Native Modules
-keep public class * extends com.facebook.react.bridge.NativeModule { *; }
-keep class com.facebook.react.bridge.** { *; }
-keepclassmembers class * { 
    @com.facebook.react.bridge.ReactMethod *; 
}
-keepclassmembers class * {
    @com.facebook.proguard.annotations.DoNotStrip *;
}

# UI Manager & View System
-keep @com.facebook.react.uimanager.annotations.ReactProp class * { *; }
-keep @com.facebook.react.uimanager.annotations.ReactPropGroup class * { *; }
-keep class * extends com.facebook.react.uimanager.ViewManager { *; }
-keep class com.facebook.react.uimanager.** { *; }

# TurboModules (New Architecture)
-keep class com.facebook.react.turbomodule.** { *; }
-keep class com.facebook.react.animated.** { *; }
-keep class com.facebook.react.common.** { *; }

# ========== COMMON LIBRARIES ==========
# Reanimated
-keep class com.swmansion.reanimated.** { *; }
-keep class com.swmansion.** { *; }
-dontwarn com.swmansion.**

# SVG
-keep public class com.horcrux.svg.** { *; }

# Fast Image
-keep class com.dylanvann.fastimage.** { *; }

# Firebase
-keep class com.google.firebase.** { *; }
-dontwarn com.google.firebase.**

# OkHttp
-keep class okhttp3.** { *; }
-keep interface okhttp3.** { *; }
-dontwarn okhttp3.**
-dontwarn okio.**### Why This Works:

-optimizationpasses 3 — Multiple optimization passes for maximum shrinkage
Log removal — Strips debug/verbose/info/warning logs (keeps errors for debugging)
-keepattributes SourceFile,LineNumberTable — Preserves stack traces for crash reporting
Comprehensive -keep rules — Protects all React Native internals and common libraries

✅ Step 5: Verify Hermes is Enabled

Hermes is React Native's optimised JavaScript engine. It should be enabled by default in RN 0.81, but verify in your android/gradle.properties:

hermesEnabled=true
Hermes provides:

✅ Faster app startup
✅ Smaller JS bundle size
✅ Lower memory usage

🧪 Testing Your Build

After applying all optimisations:

Clean previous builds

cd android && ./gradlew clean

Build release APK

./gradlew assembleRelease

Check APK size

ls -lh app/build/outputs/apk//release/.apk---

📋 Complete Checklist

[ ] Set enableSeparateBuildPerCPUArchitecture = true
[ ] Include only arm64-v8a architecture (if minSdk 29+)
[ ] Set universalApk false
[ ] Add resConfigs for your supported languages
[ ] Enable shrinkResources true
[ ] Enable crunchPngs true
[ ] Enable zipAlignEnabled true
[ ] Add comprehensive ProGuard rules
[ ] Verify Hermes is enabled
[ ] Test on real devices before release!

🎯 Summary

Optimization	APK Size Impact
Single architecture (arm64-v8a)	-30-40%
Resource shrinking	-5-10%
Language filtering	-2-5%
ProGuard optimizations	-5-10%
PNG compression	-1-3%

⚠️ Important Notes

Always test on real devices after applying these optimizations
Keep error logs — don't strip Log.e() for production debugging
Firebase Crashlytics still works — we preserved SourceFile,LineNumberTable
Play Store accepts single-architecture APKs — they'll deliver the right one to users

Hope this helps you ship a lighter, faster React Native app! 🚀

Got questions or improvements? Drop them in the comments! 👇

Found this useful? Follow me for more React Native optimization tips!

Setting Up SonarQube Locally for React Native & MERN Projects

Ajmal Hasan — Sat, 08 Nov 2025 16:12:05 +0000

As a React Native and MERN developer, I recently integrated SonarQube into my local workflow using Docker. Here's a straightforward guide to get you started.

What is SonarQube?

SonarQube automatically scans your code to find:

Bugs and potential errors
Security vulnerabilities
Code smells (maintainability issues)
Test coverage gaps
Duplicate code

Prerequisites

Install Docker Desktop:

brew install --cask docker

Open Docker Desktop from Applications and make sure it's running.

Setup Steps (project👨‍💻)

1. Create Docker Compose File

Create docker-compose.yml in your project root:

services:
  sonarqube:
    image: sonarqube:community
    container_name: sonarqube-local
    ports:
      - "9000:9000"
    environment:
      - SONAR_ES_BOOTSTRAP_CHECKS_DISABLE=true
    volumes:
      - sonarqube_data:/opt/sonarqube/data
      - sonarqube_extensions:/opt/sonarqube/extensions
      - sonarqube_logs:/opt/sonarqube/logs
    networks:
      - sonarqube-network

volumes:
  sonarqube_data:
  sonarqube_extensions:
  sonarqube_logs:

networks:
  sonarqube-network:
    driver: bridge

2. Add Scripts to package.json

{
  "scripts": {
    "sonar": "sonar-scanner",
    "sonar:start": "docker-compose up -d",
    "sonar:stop": "docker-compose stop",
    "sonar:down": "docker-compose down",
    "sonar:logs": "docker-compose logs -f sonarqube"
  }
}

3. Create SonarQube Configuration

Create sonar-project.properties:

# Project identification
sonar.projectKey=my-app
sonar.projectName=My App
sonar.projectVersion=1.0.0

# Source code location
sonar.sources=src
sonar.tests=__tests__

# Exclude directories
sonar.exclusions=\
  **/node_modules/**,\
  **/android/**,\
  **/ios/**,\
  **/vendor/**,\
  **/coverage/**,\
  **/__mocks__/**,\
  **/build/**,\
  **/*.spec.ts,\
  **/*.spec.tsx,\
  **/*.test.ts,\
  **/*.test.tsx,\
  **/assets/**,\
  **/*.config.js,\
  **/*.config.ts,\
  **/*.config.mjs,\
  **/babel.config.js,\
  **/metro.config.js,\
  **/jest.config.js,\
  **/jest-setup.ts

# Test exclusions
sonar.test.exclusions=\
  **/node_modules/**,\
  **/coverage/**

# Language
sonar.language=ts

# Encoding
sonar.sourceEncoding=UTF-8

# TypeScript specific
sonar.typescript.node=node

# Coverage report paths
sonar.javascript.lcov.reportPaths=coverage/lcov.info
sonar.coverage.exclusions=\
  **/__tests__/**,\
  **/__mocks__/**,\
  **/*.test.ts,\
  **/*.test.tsx,\
  **/*.spec.ts,\
  **/*.spec.tsx

# Disable external issues
sonar.typescript.internal.typescriptLocation=node_modules/typescript

# Host URL
sonar.host.url=http://localhost:9000

# Authentication token (add after generating)
# sonar.login=your-token-here

4. Update .gitignore

Add to your .gitignore:

# SonarQube
.scannerwork/
.sonarqube/

5. Start SonarQube

# Start Docker Desktop first
open -a Docker

# Start SonarQube server
yarn sonar:start

# Wait 1-2 minutes, then check logs
yarn sonar:logs

6. Generate Authentication Token

Open http://localhost:9000
Login with admin / admin
Change password when prompted
Go to Profile Icon → My Account → Security
Generate token:
- Name: local-scanner
- Type: Global Analysis Token
Copy the token immediately!

7. Add Token to Configuration

Edit sonar-project.properties and uncomment the last line:

sonar.login=your-generated-token-here

8. Install Sonar Scanner

npm install --save-dev @sonar/scan
# or
yarn add -D @sonar/scan

9. Run Your First Scan

# Run tests with coverage
yarn test --coverage

# Run SonarQube analysis
yarn sonar

View results at http://localhost:9000

Daily Usage

# Start server (if not running)
yarn sonar:start

# After making code changes
yarn test --coverage && yarn sonar

# View results at http://localhost:9000

# Stop server when done
yarn sonar:stop

Configuration for Different Projects

For Node.js/Express Backend:

sonar.sources=src
sonar.tests=src
sonar.test.inclusions=**/*.test.js,**/*.spec.js

For React Native:

sonar.sources=src
sonar.tests=__tests__
sonar.exclusions=**/android/**,**/ios/**

Common Issues

Docker not running:

open -a Docker
# Wait 30 seconds, then retry

Port 9000 in use:

lsof -i :9000
# Kill the process or change port in docker-compose.yml

Authentication error:

# Verify token in sonar-project.properties
cat sonar-project.properties | grep sonar.login

What Gets Analyzed

Code quality issues
Potential bugs
Security vulnerabilities
Test coverage
Duplicate code
Complexity metrics

Key Benefits

✅ Catch bugs before production

✅ Improve code maintainability

✅ Track test coverage

✅ Enforce coding standards

✅ Identify security issues early

Useful Commands

yarn sonar:start   # Start server
yarn sonar:stop    # Stop server
yarn sonar:down    # Stop and remove containers
yarn sonar:logs    # View logs
yarn sonar         # Run analysis

That's it! Keep SonarQube running in the background and scan your code regularly to maintain high-quality standards.

Resources:

🧹 How I Freed Up Half My Mac Storage Safely as a React Native Developer

Ajmal Hasan — Sun, 19 Oct 2025 16:40:59 +0000

As a React Native developer, I constantly build for both iOS and Android, which means my machine takes a beating from Xcode, simulators, Gradle builds, node modules, and caches.

Recently, I noticed that my 512GB SSD was nearly full — and when I checked, Xcode alone was consuming over 85 GB! 😱

So, I decided to do a full cleanup.
After running a few terminal commands and deleting unneeded build data, I freed up half my disk space. Here’s what I did 👇

💣 The Hidden Storage Hogs

🧩 1. Xcode Build Data & Indexes

These files rebuild every time you open or compile a project — so it’s completely safe to delete them.

rm -rf ~/Library/Developer/Xcode/DerivedData

📦 2. Old Archives

Old .xcarchive files pile up with every TestFlight or App Store build.

rm -rf ~/Library/Developer/Xcode/Archives/*

🔍 3. DeviceSupport Files

Every time you connect an iPhone or test a new iOS version, Xcode downloads symbol data.

rm -rf ~/Library/Developer/Xcode/iOS\ DeviceSupport/*

📱 4. Simulator Devices & Cache

Each simulator keeps its own storage, logs, and app data.

rm -rf ~/Library/Developer/CoreSimulator/Devices/*
rm -rf ~/Library/Developer/CoreSimulator/Caches/*

You can also remove unused runtimes from
Simulator → Settings → Runtimes or
Window → Devices and Runtimes → Delete unused devices.

⚡ 5. Xcode Cache

Recreated automatically after you relaunch Xcode.

rm -rf ~/Library/Caches/com.apple.dt.Xcode

⚙️ React Native & Node Cleanup

🌀 6. Metro & Watchman Caches

watchman watch-del-all 2>/dev/null
rm -rf ~/Library/Caches/metro*
rm -rf ~/Library/Metro

📦 7. npm / yarn / pnpm Cache

npm cache clean --force
yarn cache clean
pnpm store prune

💡 8. Project `node_modules` (Optional)

rm -rf node_modules && npm install

🍫 CocoaPods (for iOS builds)

Caches dependencies that can be safely redownloaded.

rm -rf ~/Library/Caches/CocoaPods
rm -rf ~/.cocoapods

🤖 Android / Java Cleanup

⚙️ 9. Gradle Caches & Build Artifacts

rm -rf ~/.gradle/caches
rm -rf ~/.gradle/daemon
rm -rf ~/.android/build-cache

Delete unused AVDs (emulators) from
Android Studio → Device Manager
and unused system images via SDK Manager.

🧰 10. Other Optional Cleanups

# Homebrew cleanup
brew cleanup -s

# CocoaPods Specs repo
rm -rf ~/.cocoapods/repos

# Xcode docs
rm -rf ~/Library/Developer/Shared/Documentation/*

🧩 Project-Level Cleanup Command (Run on projects that you are not working on)

For day-to-day development cleanup, I also added this handy script inside my package.json:

"scripts": {
  "cleanBuild": "rm -rf .jso node_modules Gemfile.lock && cd ios && rm -rf build Pods .xcode.env.local Podfile.lock && cd .. && cd android && rm -rf build .gradle && cd app && rm -rf development build .cxx && cd .. && cd .."
}

Now I can simply run:

npm run cleanBuild

yarn cleanBuild

to completely wipe build artifacts for both iOS and Android.

✅ The Results

After deleting:

DerivedData (85+ GB)
Old simulator data (10+ GB)
CocoaPods and Gradle caches

My system went from almost full to over 50% free space.
Xcode now opens faster, simulators load instantly, and builds are cleaner.

🧠 Pro Tip: Automate It

Create a file named clean-dev-space.sh and add all the commands above.
Then simply run:

bash clean-dev-space.sh

🚀 Final Thoughts

If you’re a React Native developer juggling iOS and Android, your Mac silently collects tens of gigabytes of temporary build data every month.
Cleaning up regularly not only saves space but also improves build speed and performance.

I freed up half my storage with a few terminal commands — and now my Mac feels brand new again. ✨

React Native ESLint 9 Setup: Complete Guide with VSCode Integration, Husky Pre-commit Hooks, Prettier, and CI/CD

Ajmal Hasan — Wed, 24 Sep 2025 20:06:11 +0000

📦 Install All Dependencies

# Core ESLint dependencies
yarn add --dev eslint @eslint/js globals typescript-eslint

# React and React Native plugins
yarn add --dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native

# Prettier integration
yarn add --dev prettier eslint-config-prettier

# Husky and lint-staged for pre-commit hooks
yarn add --dev husky lint-staged

# Additional helpful tools
yarn add --dev @types/node

🛠️ File Creation (Step by Step)

1. Create ESLint Configuration

File: eslint.config.mjs

import js from '@eslint/js';
import globals from 'globals';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginReactNative from 'eslint-plugin-react-native';

export default [
  {
    ignores: ['node_modules/**', 'android/**', 'ios/**', 'build/**', 'dist/**']
  },
  js.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        __DEV__: 'readonly',
        __dirname: 'readonly',
        __filename: 'readonly',
      },
      ecmaVersion: 'latest',
      sourceType: 'module',
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    plugins: {
      'react-hooks': pluginReactHooks,
      'react-native': pluginReactNative,
    },
    rules: {
      // React Native
      'react-native/no-unused-styles': 'error',
      'react-native/split-platform-components': 'error',
      'react-native/no-inline-styles': 'warn',
      'react-native/no-color-literals': 'warn',
      'react-native/no-single-element-style-arrays': 'error',

      // React Hooks
      'react-hooks/rules-of-hooks': 'error',
      'react-hooks/exhaustive-deps': 'off', // Disabled for ESLint 9 compatibility

      // React
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
      'react/display-name': 'off',

      // General
      'no-console': 'warn',
      'no-debugger': 'error',
      'no-unused-vars': 'off',
      'prefer-const': 'error',
      'no-var': 'error',
      'no-duplicate-imports': 'error',
      'max-lines': ['warn', { max: 300, skipBlankLines: true }],
    },
    settings: {
      react: { version: 'detect' },
    },
  },
];

2. Create Prettier Configuration

File: .prettierrc.js

module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'all',
  printWidth: 100,
  bracketSpacing: true,
  arrowParens: 'avoid',
};

3. Create Prettier Ignore

File: .prettierignore

node_modules
android
ios
build
dist
coverage
*.snap
*.md
*.json
*.lock
*.log
.DS_Store
eslint.config.mjs

4. Update Package.json Scripts

Add to package.json:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "lint:check": "eslint . --max-warnings 0",
    "prettier": "prettier --write .",
    "prettier:check": "prettier --check .",
    "format": "prettier --write . && eslint . --fix",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

5. Setup Husky Pre-commit Hooks

# Initialize husky
yarn prepare

# Add pre-commit hook
npx husky add .husky/pre-commit "npx lint-staged"

# Add pre-push hook (optional)
npx husky add .husky/pre-push "yarn lint:check"

6. Create VSCode Settings

File: .vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": ["."],
  "typescript.preferences.organizeImportsIgnoreCase": false,
  "typescript.preferences.includePackageJsonAutoImports": "on",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

7. Create VSCode Extensions Recommendations

File: .vscode/extensions.json

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss"
  ]
}

8. Create GitHub Actions Workflow

File: .github/workflows/lint.yml

name: Code Quality

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'yarn'
      - run: yarn install --frozen-lockfile
      - run: yarn lint:check
      - run: yarn prettier:check

⚡ Quick Setup Commands

# 1. Install everything
yarn add --dev eslint @eslint/js globals typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-native prettier eslint-config-prettier husky lint-staged @types/node

# 2. Initialize husky
yarn prepare

# 3. Setup pre-commit hooks
npx husky add .husky/pre-commit "npx lint-staged"
npx husky add .husky/pre-push "yarn lint:check"

# 4. Run initial format
yarn format

🎯 VSCode Integration Features

Auto-fix on save: ESLint fixes applied automatically
Format on save: Prettier formatting on file save
Import organization: Auto-organize imports on save
Real-time linting: Inline error/warning indicators
Quick fixes: Ctrl/Cmd+. for fix suggestions

📋 Essential VSCode Extensions

Install these extensions for full functionality:

ESLint (dbaeumer.vscode-eslint)
Prettier (esbenp.prettier-vscode)
TypeScript Importer (pmneo.tsimporter)

🔧 Usage

Lint all files: yarn lint
Fix auto-fixable issues: yarn lint:fix
Check for any issues: yarn lint:check
Format all files: yarn prettier
Format and fix: yarn format

⚠️ Known Issues

react-hooks/exhaustive-deps disabled due to ESLint 9 compatibility
Will be re-enabled when plugin updates for ESLint 9

🚀 Post-Setup

Delete any old .eslintrc.* files
Restart VSCode for settings to take effect
Run yarn format to format existing code
Commit changes to trigger pre-commit hooks

This setup provides a complete, production-ready linting environment with VSCode integration and automated quality checks.

Additionally integrate SonarQube for code report:
https://dev.to/ajmal_hasan/setting-up-sonarqube-locally-for-react-native-mern-projects-3hgn

☁️📲 React Native OTA Updates: AWS-Powered Hot Updates with S3 & Lambda@Edge

Ajmal Hasan — Fri, 13 Jun 2025 10:47:36 +0000

Build Lightning-Fast Over-the-Air Updates for Your Mobile App

Introduction

Hot Updater is a powerful alternative to react-native-codepush that provides self-hostable Over-The-Air (OTA) update capabilities for React Native applications. Unlike traditional app store updates, Hot Updater allows you to instantly update your JavaScript bundle, enabling rapid deployment of bug fixes and feature updates without waiting for app store approval.

Why Choose Hot Updater?

Key Features

Self-Hosting: Maintain complete control over your update infrastructure and data
Multi-Platform Support: Seamless compatibility with both iOS and Android platforms
Intuitive Web Console: User-friendly interface for managing and monitoring updates
Robust Version Control: Advanced app versioning with semantic versioning support
Forced Updates: Push critical security updates when immediate deployment is necessary
Flexible Deployment: Support for multiple environments and channels

In this comprehensive guide, we'll walk through setting up Hot Updater using the AWS S3 Storage + Lambda@Edge Function provider for storing React Native bundles in the cloud. Hot Updater supports multiple providers as shown below.

Prerequisites

Before beginning the setup process, ensure you have the following requirements met:

System Requirements

Node.js: Version 20 or later (recommended for optimal performance)
React Native Development Environment: Properly configured for your target platforms

AWS Requirements

AWS Account: Sign up at AWS if you don't have an existing account
AWS CLI: Install the AWS CLI and configure your credentials with appropriate permissions

Additional Tools

Package Manager: Yarn or npm
Code Editor: VS Code or your preferred IDE

Step-by-Step Setup Guide

Phase 1: AWS Configuration

For detailed AWS setup, you can follow either:

Video Tutorial: Step-by-step configuration video
Written Guide: AWS provider documentation

Configuration Screenshots Reference

The following screenshots demonstrate the AWS setup process:

Phase 2: Configuration Files Generation

Once the AWS setup is complete, the system will automatically generate essential configuration files:

Generated Files

.env file: Contains AWS credentials and configuration keys (reference)
hot-updater.config.ts: Main configuration file (reference)

Important Note: Keep the automatically generated code intact, even when using dotenv. This applies even if you're using react-native-config for multiple scheme or flavoring setups.

Phase 3: Project Integration

Step 1: Add Required Plugins

Follow the official documentation to add necessary plugins to your project:

Babel, Repack, and Expo Plugin Setup

Step 2: Native Code Integration

Integrate native code components:

Native Code Setup Guide

Step 3: Verification (Optional)

If you want to verify your setup:

Verification Steps

Phase 4: Fingerprint Configuration

Create Fingerprint File

In your project's root directory, create a fingerprint.json file:

{
  "ios": {},
  "android": {}
}

Install Dependencies

Run the following commands to install dependencies:

yarn && cd ios && pod install && cd ..

Phase 5: App Integration

Wrap Your App Component

Modify your App.tsx file according to the official wrapping guide:

import { getUpdateSource, HotUpdater } from '@hot-updater/react-native';
import React from 'react';
import { Text, View } from 'react-native';
import Config from 'react-native-config';

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'teal', // Change to "pink" for testing
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <Text>{Config.env}-- 555</Text>
      <Text>{__DEV__ ? 'Development Mode' : 'Release Mode'}</Text>
      <Text>Fingerprint: {HotUpdater.getFingerprintHash()}</Text>
      <Text>Channel: {HotUpdater.getChannel()}</Text>
      <Text>App Version: {HotUpdater.getAppVersion()}</Text>
      <Text>Bundle Id: {HotUpdater.getBundleId()}</Text>
      <Text>Min Bundle Id: {HotUpdater.getMinBundleId()}</Text>
    </View>
  );
};

export default HotUpdater.wrap({
  source: getUpdateSource('https://do1f2fjq14bee.cloudfront.net/api/check-update', {
    updateStrategy: 'fingerprint', // or "appVersion"
  }),
  requestHeaders: {
    // Add custom request headers if needed
  },
  fallbackComponent: ({ progress, status }) => (
    <View
      style={{
        flex: 1,
        padding: 20,
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
      }}
    >
      {/* You can add a splash image here for better UX */}
      <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
        {status === 'UPDATING' ? 'Updating...' : 'Checking for Update...'}
      </Text>
      {progress > 0 ? (
        <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
          {Math.round(progress * 100)}%
        </Text>
      ) : null}
    </View>
  ),
})(App);

Single Environment Setup

If you're not using multiple environments, you can proceed directly with these steps:

Build and Deploy Process

Create Release Build: Simulator Testing Guide
Update Fingerprint Hash: Fingerprint Management
Deploy Updates: Deployment Guide
Manage Updates: Console Management

Multiple Environment Setup

For projects requiring multiple environments (development, staging, production), follow these additional configurations:

Package.json Scripts Configuration

Add the following scripts to your package.json for streamlined environment management:

{
  "scripts": {
    "setDevelopment": "ENVFILE=.env.development",
    "setStaging": "ENVFILE=.env.staging",
    "setProduction": "ENVFILE=.env.production",

    "aos:dev-release": "yarn setDevelopment && react-native run-android --mode=developmentrelease",
    "aos:prod-release": "yarn setProduction && react-native run-android --mode=productionrelease",

    "hot-updater-console": "yarn hot-updater console",
    "check_fingerprint_hash": "yarn hot-updater fingerprint",
    "fingerprint_update": "yarn hot-updater fingerprint create",
    "channel_update_production": "yarn hot-updater channel set production",
    "channel_update_development": "yarn hot-updater channel set development",

    "update_ios_dev": "yarn installAll && yarn setDevelopment && npx hot-updater deploy -p ios -c development -f",
    "update_ios_prod": "yarn installAll && yarn setProduction && npx hot-updater deploy -p ios -c production -f",
    "update_android_dev": "yarn channel_update_development && yarn setDevelopment && npx hot-updater deploy -p android -c development -f",
    "update_android_prod": "yarn channel_update_production && yarn setProduction && npx hot-updater deploy -p android -c production -f"
  }
}

Script Parameters Explanation

For detailed understanding of deployment parameters (-p, -c, -f, etc.), refer to the deployment documentation.

Deployment Process (to deploy new changes)

Running Deploy Commands

When executing deploy commands, you should see output similar to this:

First set channel as per particular env(if using), then run deploy command

yarn channel_update_production && yarn update_android_prod

Another Update Strategy (Note: we are using Fingerprint):

The "App Version" update strategy in hot-updater allows you to target specific native app versions when deploying updates. Unlike the fingerprint strategy, which compares hash values to check for native code changes, this strategy applies updates only to the app version specified with the -t (or --target-app-version) option during the hot-updater deploy command.

Troubleshooting Fingerprint Issues

If you encounter a fingerprint error like:

■ Fingerprint mismatch. 'hot-updater fingerprint create' to update fingerprint.json

Solution: Run the fingerprint update command:

yarn fingerprint_update

AWS S3 Verification

After successful deployment, your AWS S3 bucket should contain the deployed bundles:

Management Console

Accessing the Console

Launch the management console using:

yarn hot-updater-console

The console provides a comprehensive interface for managing your deployments:

Console Features

Update Management: Deploy, rollback, and delete updates
Version Control: Track all deployed versions
Channel Management: Manage different deployment channels
Analytics: Monitor update adoption and performance

Troubleshooting

Common Issues and Solutions

Updates Not Appearing in Release Build

If updates aren't showing in your release build, verify that:

Channel Configuration: Ensure the channel is correctly set
Hash Verification: Confirm the fingerprint hash matches between deployment and app
Network Connectivity: Check internet connection and CloudFront distribution

Reference: GitHub Issue #417

Fingerprint Mismatch Errors

This typically occurs when:

App fingerprint doesn't match deployed bundle fingerprint
Multiple environments are using conflicting fingerprints

Solution: Update fingerprints using the provided scripts.

AWS Permissions Issues

Ensure your AWS credentials have the necessary permissions for:

S3 bucket operations
CloudFront distribution management
Lambda@Edge function deployment

Best Practices

Security Considerations

Credential Management: Store AWS credentials securely using environment variables
Access Control: Implement proper IAM policies for restricted access
HTTPS Enforcement: Always use HTTPS for update endpoints

Performance Optimization

Bundle Size: Keep JavaScript bundles as small as possible
Caching Strategy: Leverage CloudFront caching for improved performance
Incremental Updates: Use fingerprint strategy for efficient updates

Monitoring and Maintenance

Regular Monitoring: Check console regularly for update adoption rates
Rollback Strategy: Always have a rollback plan for critical updates
Testing: Thoroughly test updates in staging environments before production deployment

Conclusion

Hot Updater with AWS S3 and Lambda@Edge provides a robust, scalable solution for React Native OTA updates. This setup gives you complete control over your update infrastructure while maintaining the flexibility to support multiple environments and deployment strategies.

The self-hosted approach ensures data privacy and eliminates dependency on third-party services, making it an excellent choice for enterprise applications or projects with specific compliance requirements.

By following this comprehensive guide, you should have a fully functional Hot Updater setup that enables rapid deployment of JavaScript bundle updates without going through traditional app store approval processes.

Using react-native-vector-icons in React Native

Ajmal Hasan — Sun, 04 May 2025 15:08:01 +0000

react-native-vector-icons is a library that lets you integrate a variety of icons into your React Native app, improving design and user experience. It supports popular icon sets like FontAwesome, Material Icons, and Ionicons. Explore available icons here.

Step 1: Install the Library

Install via npm or Yarn:

npm install react-native-vector-icons

yarn add react-native-vector-icons

Available Icon Sets

Icon libraries available include:

AntDesign (298 icons)
Entypo (411 icons)
EvilIcons (70 icons)
Feather (286 icons)
FontAwesome 5 (1,598 free icons)
Ionicons (1,338 icons)
MaterialIcons (2,189 icons)
MaterialCommunityIcons (6,596 icons)

Explore other sets here.

Step 2: Configure Fonts

Android Setup

In android/app/build.gradle, add the fonts:

react {
  project.ext.vectoricons = [
      iconFontNames: ['MaterialCommunityIcons.ttf', 'FontAwesome.ttf', 'AntDesign.ttf']
  ]
  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
}

iOS Setup

In Info.plist, add the fonts:

<key>UIAppFonts</key>
<array>
    <string>MaterialCommunityIcons.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>AntDesign.ttf</string>
</array>

Also, in react-native.config.js, disable iOS auto-linking:

module.exports = {
  'react-native-vector-icons': {
    platforms: {
      ios: null,
    },
  },
};

Run the command:

npx react-native-asset

Step 3: Use Icons in Your Components

Import and use icons like this:

import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const MyComponent = () => (
  <Icon name="home" size={30} color="#900" />
);

You can replace MaterialCommunityIcons with other icon sets as needed.

Conclusion

By integrating react-native-vector-icons, you can enhance your app with a wide range of high-quality icons. The setup process is simple and involves configuring a few files for Android and iOS.

DEV Community: Ajmal Hasan

How to Use React Native Best Practices Agent Skills

Introduction

What Are Agent Skills?

Installation

For Cursor

How It Works

Automatic Activation

Performance Issues

Bundle & App Size

Memory Problems

Startup Time

Native Modules

Specific Technologies

Example: Automatic Detection

What's Included

Priority-Ordered Guidelines

Reference Files

JavaScript/React (js-*)

Native (native-*)

Bundling (bundle-*)

Real-World Usage Examples

Example 1: Fixing Slow List Scrolling

Example 2: Reducing Bundle Size

Example 3: Memory Leak Detection

Problem → Skill Mapping

Benefits

1. Automatic Pattern Recognition

2. Proven Solutions

3. Context-Aware Suggestions

4. Code Examples

5. Priority Guidance

6. Comprehensive Coverage

Best Practices for Using the Skill

1. Be Specific About Problems

2. Let the Agent Analyze First

3. Follow the Suggestions

4. Measure Before and After

Integration with Your Workflow

During Code Review

During Development

During Optimization

Troubleshooting

Skill Not Activating?

Skill Suggestions Not Relevant?

Conclusion

Additional Resources

Lightning-Fast In-App Debugging with React Native BugBubble

Why BugBubble?

Installation

Minimal Integration

Configuring the Debugger

Manual Logging (Optional)

When to Use It

Knip: Dead Code Detector for JavaScript & TypeScript Projects

What Knip Detects

Getting Started

Installation

Basic Usage

Configuration

Key Configuration Options

React Native Example

Real-World Results

iOS Bridging Header Setup for React Native

Setup Steps

Step 1: Create the Bridging Header File

Step 2: Configure the File

Step 3: Set the Bridging Header Path

Step 4: Import Your Headers

Step 5: Use in AppDelegate.Swift

Step 6: Clean and Build

Project Structure

ReactNative #iOS #Swift #MobileDevelopment

Stop Fighting React Native Dependency Hell — Use This Microsoft Tool

The Problem Every React Native Dev Knows

Enter @rnx-kit/align-deps

Quick Setup (2 minutes)

Upgrading React Native? Here's Your Toolkit

Step 1: Align Your Dependencies

Step 2: Update Native Files (iOS/Android)

JavaScript/React (`js-*`)

Native (`native-*`)

Bundling (`bundle-*`)

Enter `@rnx-kit/align-deps`

`android/app/proguard-rules.pro`