SwarajDashDev

Insight

In React Native, UI thread contention is a common cause of janky animations, especially when you start expensive calculations or network calls immediately after a navigation event. InteractionManager lets you schedule work to run only after all ongoing interactions—animations, gestures, transitions—have completed, freeing the UI thread for a smooth frame rate.

Example

import { InteractionManager } from 'react-native';
import { useEffect } from 'react';

export function Screen() {
 useEffect(() => {

SwarajDashDev

Insight

SQLite is the go‑to embedded database for many mobile apps, but its synchronous API can become a bottleneck when you need real‑time sync and complex queries. WatermelonDB, built on top of SQLite, moves heavy data processing to a background thread and offers built‑in lazy loading, making it ideal for large, sync‑heavy datasets. The trade‑off is a steeper learning curve and extra bundle size, but the UI stays buttery smooth even with thousands of records.

Example

import { Database } from '@nozbe/watermelondb';
import SQLiteAdapter from '@nozbe/watermelondb/adapters/sqlite';
import { mySchema } from './schema';
import { Task } from './models/Task';

SwarajDashDev

Insight

A monorepo lets you keep shared UI components, types, and utilities in one place, reducing duplication between a React Native app and its web counterpart. By adding react-native-web and configuring Metro alongside Webpack, the same component can render natively on iOS/Android and as HTML/CSS in the browser. The trick is to abstract platform‑specific differences with Platform.select or conditional imports, so the component stays thin and testable.

Example

// packages/ui/src/Button.tsx
import { Platform, TouchableOpacity, Text } from 'react-native';

export const Button = ({ title, onPress }: { title: string; onPress: () => void }) => (
 

SwarajDashDev

Insight

A feature‑centric layout groups UI, logic, and tests together, reducing the cognitive load when navigating a large project. In a monorepo, each feature can expose a thin public API, letting other apps or packages import only what they need without pulling the entire codebase. This pattern also aligns well with code‑splitting tools and makes onboarding new developers faster because the folder name tells you the purpose of every file.

Example

// packages/auth/src/index.ts
export { default as LoginScreen } from './ui/LoginScreen';
export { login } from './model/loginSlice';
export type { LoginPayload } from './model/types';

SwarajDashDev

Insight

React Native’s classic bridge serializes data and incurs a round‑trip cost for every native call. With the JavaScript Interface (JSI) and TurboModules, you can expose native functions as direct JavaScript objects, eliminating the bridge overhead and achieving near‑native latency. This is especially valuable for high‑frequency operations like animation frames, sensor streams, or cryptographic calculations.

Example

// src/native/MathTurboModule.ts
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
 add(a: number, b: number): number;

SwarajDashDev

Insight

React 18 introduced useSyncExternalStore to provide a reliable subscription model for external data sources. In React Native, you can exploit this hook to keep UI components in sync with Reanimated worklets that run on the UI thread. By exposing a tiny store that both the JS thread and the worklet can read, you avoid the classic "state lag" when animating based on async data.

Example

// store.ts
import { EventEmitter } from 'events';
export const uiStore = new EventEmitter();
export let value = 0;
export const setValue = (v: number) => {

SwarajDashDev

Insight

When a component triggers a costly operation—like parsing a large JSON payload or calculating layout—doing it immediately can block the UI thread and cause noticeable jank. React Native's InteractionManager lets you schedule such work to run after all ongoing interactions (animations, gestures, navigation transitions) have finished. This keeps animations smooth and preserves a responsive feel, especially on lower‑end devices.

Example

import { InteractionManager } from 'react-native';
import { useEffect, useState } from 'react';

export default function HeavyList() {
  const [data, setData] = useState<string[]>([]);

SwarajDashDev

Insight

The traditional React Native bridge serializes data between JavaScript and native threads, adding measurable latency—especially for high‑frequency calls like sensor streams or cryptographic work. JSI (JavaScript Interface) removes that bottleneck by exposing native objects directly to the JavaScript engine, allowing zero‑copy calls. When you register a JSI module, its methods run on the same thread as the JS runtime, delivering near‑native speed while keeping the familiar JS API.

Example

// MyTimerModule.cpp (C++)
#include <jsi/jsi.h>
using namespace facebook::jsi;

void installTimer(Runtime& rt) {

SwarajDashDev

Insight

When a mobile app ships with several feature‑rich screens, the initial JavaScript bundle can become bloated, leading to slower cold starts. While Metro’s inline requires help, a more granular approach is to lazily load the heavy screens only when the user navigates to them. React Native now supports React.lazy combined with Suspense (experimental) to split code at the component level, keeping the start‑up bundle lean.

Example

// src/navigation/AppNavigator.tsx
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Suspense } from 'react';
import LoadingScreen from '../components/LoadingScreen';

SwarajDashDev

Insight

A single source of truth for UI components dramatically reduces maintenance overhead when you ship both a mobile app (React Native) and a web companion (Next.js). By placing shared components in a packages/ui folder and using Yarn workspaces, you can resolve the same TypeScript paths in both environments. The key is to keep platform‑specific imports (react-native vs react-dom) abstracted behind a thin shim that re‑exports the appropriate primitives.

Example

// packages/ui/src/Button.tsx
import { Platform, TouchableOpacity, Text } from 'react-native';

export const Button = ({ title, onPress }: { title: string; onPress: () => void }) => (
  <TouchableOpacity onPress={onPress} style={{ padding: 12, backgroundColor: '#0066ff' }}>