SwarajDashDev

Insight

When users tap a list item, the next screen often shows a spinner while data loads. By prefetching the required query before navigation, the target screen can render instantly with cached data, delivering a smoother experience. React Query stores the result in its cache, so the subsequent useQuery call becomes a cache hit and skips the network round‑trip.

Example

// ListScreen.tsx
import { useNavigation } from '@react-navigation/native';
import { useQueryClient, useQuery } from '@tanstack/react-query';
import { fetchUserDetails } from './api';

SwarajDashDev

Insight

When a screen mounts, it’s tempting to kick off data processing or layout calculations immediately. However, doing so while the UI is still animating can cause frame drops and a janky feel. React Native’s InteractionManager lets you schedule work to run after all ongoing interactions (animations, gestures, navigation transitions) have completed. By offloading heavy tasks to this queue, you ensure the user sees fluid transitions before the CPU is taxed.

Example

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

export default function StatsScreen() {
  const [stats, setStats] = useState<number[] | null>(null);

SwarajDashDev

Insight

When a screen transition or a gesture animation starts, React Native runs JavaScript on the same thread that drives UI updates. Heavy synchronous work—like parsing large JSON, heavy calculations, or intensive state updates—can block the UI thread, causing jank. InteractionManager lets you schedule a callback that runs after all ongoing interactions have completed, ensuring the UI remains responsive during critical moments.

Example

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

export default function Dashboard() {
  const [stats, setStats] = useState(null);

SwarajDashDev

Insight

React Native’s new architecture introduces TurboModules, a thin C++ bridge that lets you expose native code with near‑zero overhead. A common myth is that you must rewrite large parts of your app to benefit; in reality you can incrementally replace performance‑critical functions. TurboModules are lazy‑loaded, type‑safe, and work seamlessly with TypeScript, so you get native speed where it matters most while keeping the rest of your JavaScript unchanged.

Example

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

export interface DeviceInfoSpec extends TurboModule {
 getBatteryLevel(): Promise;

SwarajDashDev

Insight

When a screen transition or animation starts, any synchronous JavaScript work can block the UI thread, causing jank. React Native's InteractionManager lets you schedule heavy tasks to run after all ongoing interactions finish. This is perfect for things like data parsing, image processing, or heavy state updates that aren't needed until the user can actually see the result.

Example

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

export default function ProfileScreen() {
  const [profile, setProfile] = useState(null);

SwarajDashDev

Insight

When a screen mounts, React Native often runs layout, data fetching, and animation simultaneously. If you kick off a CPU‑intensive task right away, the UI thread competes for time and you’ll notice jank. InteractionManager lets you schedule work to run only after all ongoing interactions—such as navigation transitions or gestures—have finished, keeping the frame budget clean.

Example

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

export default function HeavyScreen() {
  const [result, setResult] = useState<number | null>(null);

SwarajDashDev

Insight

Expo's EAS Update turns the traditional app‑store release cycle on its head. Instead of bundling every change into a new binary, you can ship JavaScript, images, and fonts directly to devices that already have the native shell installed. This works best for bug fixes, UI tweaks, or feature flags that don’t require native module changes. Because the update is fetched at runtime, you retain the ability to roll back instantly by publishing a previous manifest.

Example

// eas.json – enable OTA for the "production" channel
{
  "cli": { "version": ">= 3.0.0" },
  "build": { "production": { "distribution": "store" } },
 "submit": { "production": {} },

SwarajDashDev

Insight

Expo Config Plugins let you inject native changes—like permissions, Gradle tweaks, or Info.plist entries—directly from app.json/app.config.js. The plugin runs during the pre‑build step, so your managed workflow stays intact and OTA updates remain possible. This approach bridges the gap between pure managed apps and fully ejected projects, giving you the best of both worlds.

Example

// plugins/addCameraPermission.ts
import { ConfigPlugin, AndroidManifest } from '@expo/config-plugins';

const withCameraPermission: ConfigPlugin = (config) => {
  return AndroidManifest.withAndroidManifest(config, (manifest) => {

SwarajDashDev

Insight

Expo's BackgroundFetch API lets you schedule lightweight tasks that run while your app is in the background or terminated. It's perfect for pulling remote data, refreshing auth tokens, or pre‑caching content. Unlike push notifications, the OS decides the exact timing, so keep the work short (< 30 s) and idempotent.

Example

import * as BackgroundFetch from 'expo-background-fetch';
import * as TaskManager from 'expo-task-manager';

const FETCH_TASK = 'background-sync';

SwarajDashDev

Insight

Expo's expo-updates module lets you push JavaScript and asset changes without a store release. When paired with EAS Build and EAS Update, you can ship a new bundle, let the client download it in the background, and apply it on the next foreground launch – all without disrupting the current session. The key is to enable fallbackToCacheTimeout and trigger a silent reload only when the new bundle is ready.

Example

// app.json (or eas.json) – enable OTA
{
  "expo": {
    "updates": {
      "fallbackToCacheTimeout": 0,