DEV Community: PEAKIQ

React Native Vision Camera: Reusable Component Guide

PEAKIQ — Thu, 11 Jun 2026 12:04:35 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/building-a-reusable-vision-camera-component-in-react-native

Building a Reusable Vision Camera Component in React Native

react-native-vision-camera is the go-to camera library for React Native in 2025 — but wiring up photo capture, video recording, and barcode scanning in every screen gets repetitive fast.

This guide walks through building a single reusable VisionCamera component that handles all three, exposed via a clean ref API. Published on peakiq.in.

What We're Building

A single VisionCamera component that:

Takes photos with configurable flash
Records video with a start/stop ref API
Optionally scans barcodes in real time
Accepts an overlay slot for custom UI
Clamps zoom between device min and max
Handles missing camera devices gracefully

Dependencies

npm install react-native-vision-camera react-native-vision-camera-barcode-scanner

Make sure you have camera and microphone permissions configured in both AndroidManifest.xml and Info.plist.

The Handle Interface

We expose three imperative methods via forwardRef so the parent screen can control the camera without prop drilling:

export interface VisionCameraHandle {
  takePhoto: (options?: { flash?: 'on' | 'off' | 'auto' }) => Promise<string>;
  recordAsync: () => Promise<{ uri: string; codec: string }>;
  stopRecording: () => Promise<void>;
}

takePhoto resolves with the file path of the captured image
recordAsync starts recording and resolves with the video URI when stopped
stopRecording signals the recorder to finalize and save

Component Props

interface Props {
  style?: StyleProp<ViewStyle>;
  zoom?: number;
  maxZoom?: number;
  isActive?: boolean;
  overlay?: React.ReactNode;
  flash?: 'on' | 'off' | 'auto';
  onMountError?: (error: Error) => void;
  onCameraReady?: () => void;
  onBarCodeRead?: (barcode: { value: string; type: string }) => void;
  enableBarcode?: boolean;
  enableVideo?: boolean;
}

enableBarcode and enableVideo are opt-in — outputs are only registered when needed, which keeps the camera pipeline lean.

Full Implementation

import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { View, StyleProp, ViewStyle, Text, StyleSheet } from 'react-native';
import {
  Camera,
  useCameraDevice,
  usePhotoOutput,
  useVideoOutput,
} from 'react-native-vision-camera';
import { useBarcodeScannerOutput } from 'react-native-vision-camera-barcode-scanner';

export interface VisionCameraHandle {
  takePhoto: (options?: { flash?: 'on' | 'off' | 'auto' }) => Promise<string>;
  recordAsync: () => Promise<{ uri: string; codec: string }>;
  stopRecording: () => Promise<void>;
}

interface Props {
  style?: StyleProp<ViewStyle>;
  zoom?: number;
  maxZoom?: number;
  isActive?: boolean;
  overlay?: React.ReactNode;
  flash?: 'on' | 'off' | 'auto';
  onMountError?: (error: Error) => void;
  onCameraReady?: () => void;
  onBarCodeRead?: (barcode: { value: string; type: string }) => void;
  enableBarcode?: boolean;
  enableVideo?: boolean;
}

const VisionCamera = forwardRef<VisionCameraHandle, Props>(
  (
    {
      style,
      zoom = 1,
      maxZoom,
      isActive = true,
      overlay,
      flash = 'off',
      onMountError,
      onCameraReady,
      onBarCodeRead,
      enableBarcode = false,
      enableVideo = false,
    },
    ref,
  ) => {
    const device = useCameraDevice('back');
    const photoOutput = usePhotoOutput();
    const videoOutput = useVideoOutput({ enableAudio: enableVideo });
    const recorderRef = useRef<any>(null);

    const barcodeOutput = useBarcodeScannerOutput({
      barcodeFormats: ['all-formats'],
      onBarcodeScanned: (barcodes) => {
        if (!enableBarcode) return;
        const first = barcodes[0];
        if (first) {
          onBarCodeRead?.({
            value: first.rawValue ?? '',
            type: first.format ?? '',
          });
        }
      },
      onError: (error) => {
        console.warn('Barcode scanner error', error);
      },
    });

    useImperativeHandle(
      ref,
      () => ({
        takePhoto: async (options) => {
          const { filePath } = await photoOutput.capturePhotoToFile(
            { flashMode: options?.flash ?? flash },
            {},
          );
          return filePath;
        },

        recordAsync: () => {
          return new Promise(async (resolve, reject) => {
            try {
              const recorder = await videoOutput.createRecorder({});
              recorderRef.current = recorder;

              await recorder.startRecording(
                (filePath, reason) => {
                  resolve({ uri: `file://${filePath}`, codec: 'mp4' });
                },
                (error) => {
                  reject(error);
                },
              );
            } catch (e) {
              reject(e);
            }
          });
        },

        stopRecording: async () => {
          try {
            await recorderRef.current?.stopRecording();
            recorderRef.current = null;
          } catch (error) {
            console.info(error);
          }
        },
      }),
      [photoOutput, videoOutput, flash],
    );

    if (!device) {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>No camera device found</Text>
        </View>
      );
    }

    const resolvedMaxZoom = maxZoom ?? device.maxZoom;
    const clampedZoom = Math.min(Math.max(zoom, device.minZoom), resolvedMaxZoom);

    const outputs = [
      photoOutput,
      ...(enableVideo ? [videoOutput] : []),
      ...(enableBarcode ? [barcodeOutput] : []),
    ];

    return (
      <View style={{ flex: 1 }}>
        <Camera
          style={[StyleSheet.absoluteFill, style]}
          device={device}
          isActive={isActive}
          zoom={clampedZoom}
          outputs={outputs}
          onStarted={onCameraReady}
          onError={(error) => onMountError?.(new Error(error.message))}
        />
        {overlay}
      </View>
    );
  },
);

VisionCamera.displayName = 'VisionCamera';

export default VisionCamera;

Key Design Decisions

Conditional outputs array

Outputs are only added to the camera pipeline when the corresponding feature is enabled:

const outputs = [
  photoOutput,
  ...(enableVideo ? [videoOutput] : []),
  ...(enableBarcode ? [barcodeOutput] : []),
];

This avoids unnecessary processing — a photo-only screen won't pay the cost of video or barcode initialization.

Zoom clamping

Zoom is clamped between the device's reported minZoom and maxZoom values, with an optional maxZoom prop override:

const resolvedMaxZoom = maxZoom ?? device.maxZoom;
const clampedZoom = Math.min(Math.max(zoom, device.minZoom), resolvedMaxZoom);

Recorder ref

The active recorder instance is stored in a useRef so stopRecording can access it without closing over stale state:

const recorderRef = useRef<any>(null);

Usage Example

import { useRef } from 'react';
import VisionCamera, { VisionCameraHandle } from './VisionCamera';

const ScannerScreen = () => {
  const cameraRef = useRef<VisionCameraHandle>(null);

  const handleCapture = async () => {
    const path = await cameraRef.current?.takePhoto({ flash: 'auto' });
    console.log('Photo saved at:', path);
  };

  return (
    <VisionCamera
      ref={cameraRef}
      enableBarcode
      onBarCodeRead={({ value, type }) => console.log(type, value)}
      onCameraReady={() => console.log('Camera ready')}
      overlay={<ScannerOverlay />}
    />
  );
};

What to Build Next

Add front camera support by accepting a cameraPosition prop ('back' | 'front')
Expose zoom gesture handling via react-native-gesture-handler
Add a captureMode prop to switch between photo and video mode declaratively
Integrate with a global media store to manage captured files

Published on peakiq.in — React Native guides, component patterns, and tutorials.

React Native hitSlop: Enhance Tappable Area for Small Buttons

PEAKIQ — Sun, 07 Jun 2026 04:28:01 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/react-native-hitslop-make-tiny-taps-easy

React Native `hitSlop` Explained — Improve Touch Area for Small Buttons

Small buttons are a UX problem. Users miss them. They tap again. They get frustrated.
hitSlop solves this without touching your layout. Published on peakiq.in.

What is `hitSlop`?

hitSlop is a prop available on touchable components like Pressable, TouchableOpacity, and TouchableHighlight. It expands the tappable area of a component beyond its visual bounds — invisibly.

No extra padding. No layout shifts. Just a larger touch target.

How It Works

You can pass hitSlop in two ways:

As a number — expands the touch area equally on all four sides:

hitSlop={10}

As an object — expands each side independently:

hitSlop={{ top: 10, right: 16, bottom: 10, left: 16 }}

Think of it as invisible padding around the touch target that only exists for the finger, not the layout.

Example: Close Button

A close button is a classic case — small icon, easy to miss.

import { Pressable, Text } from 'react-native';

export function CloseButton({ onPress }) {
  return (
    <Pressable
      onPress={onPress}
      hitSlop={10}
      style={{ padding: 4 }}
      accessibilityLabel="Close"
      accessibilityRole="button"
    >
      <Text>✕</Text>
    </Pressable>
  );
}

Even if the user taps slightly outside the icon, the press still registers. The visual size stays the same.

When to Use `hitSlop`

hitSlop is most useful when:

The button is visually small (icon-only buttons, close icons, inline links)
You cannot increase padding without breaking the layout
You want to meet the recommended 44×44dp minimum touch target size (Apple HIG / Material Design)
You need better accessibility without restructuring your component tree

Why It Matters

Reduces missed taps on small UI elements
Improves usability without any visual or layout changes
Works on both iOS and Android
Takes two seconds to add and immediately improves the feel of your app

Quick Reference

// Equal expansion on all sides
<Pressable hitSlop={12} onPress={onPress}>

// Per-side expansion
<Pressable hitSlop={{ top: 8, right: 16, bottom: 8, left: 16 }} onPress={onPress}>

Published on peakiq.in — React Native guides, tips, and tutorials.

SonarQube for React & React Native: Improve Code Quality

PEAKIQ — Sun, 07 Jun 2026 04:23:11 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/level-up-your-react-react-native-code-quality-with-sonarqube-a-deep-dive

A practical 2025 deep dive into static analysis, security scanning, and code smell detection — beyond what ESLint and Prettier can do. Published on peakiq.in.

Why SonarQube in React & React Native Projects?

Linters like ESLint and formatters like Prettier are great — but they only scratch the surface. SonarQube brings a deeper layer of quality assurance:

Deep static analysis beyond standard lint rules
Security vulnerability detection across your entire codebase
Code smell detection that flags maintainability issues early
Visual dashboards showing test coverage, technical debt, and maintainability scores

It's not about replacing your current tools — it's about supercharging them.

Setting Up SonarQube Locally on macOS

Step 1: Install and Launch SonarQube

brew install sonar
sonar start

Visit http://localhost:9000 and log in with admin / admin.

You now have a running SonarQube server on your machine.

Step 2: Install the Sonar Scanner

The Sonar Scanner is the CLI tool that connects your project code to the SonarQube server:

brew install sonar-scanner

Step 3: Add the Configuration File

At the root of your React or React Native project, create the properties file:

touch sonar-project.properties

Then add the following configuration:

sonar.projectKey=my-awesome-app
sonar.projectName=My Awesome App
sonar.sources=src
sonar.exclusions=**/__tests__/**,**/*.test.js,**/*.spec.tsx
sonar.language=js
sonar.sourceEncoding=UTF-8
sonar.javascript.lcov.reportPaths=coverage/lcov.info

Run the Analysis

First, build and test your app to generate coverage output (especially if you use Jest):

npm run test -- --coverage

Then trigger the scanner:

sonar-scanner

Your SonarQube dashboard will now populate with real-time code insights.

React Native Considerations

Modern React Native apps typically have:

Shared components between iOS and Android
JS/TS-only source code under src/
Native modules in android/ and ios/ that don't need analysis

Update your config to reflect this:

sonar.sources=src
sonar.exclusions=android/**,ios/**,**/*.test.tsx

Use TypeScript with strict mode enabled in tsconfig.json to boost type safety — SonarQube will respect and leverage it during analysis.

Test Coverage Integration

To visualize exactly what you're not testing:

Run Jest with the coverage flag: jest --coverage
This outputs lcov.info under your coverage/ directory
Point SonarQube to it via sonar.javascript.lcov.reportPaths in your properties file

You'll get heatmaps of untested components, making it easy to spot weak points across your project.

Bonus: Combine with Git Hooks

Prevent bad code from ever reaching your Sonar dashboard by linting and formatting before every commit. Install Husky and lint-staged:

npm install husky lint-staged --save-dev

Configure lint-staged in your package.json:

{
  "lint-staged": {
    "**/*.tsx": ["eslint --fix", "prettier --write"]
  }
}

This way your Sonar dashboard stays clean before any code gets merged.

CI/CD Integration

If you're using GitHub Actions, Bitrise, or Fastlane for React Native, add a scan step like this:

- name: SonarQube Scan
  run: |
    sonar-scanner \
      -Dsonar.projectKey=my-awesome-app \
      -Dsonar.sources=src \
      -Dsonar.login=${{ secrets.SONAR_TOKEN }}

Store your token securely as a SONAR_TOKEN secret in your repository settings.

Final Thoughts: Clean Code Is Sustainable Code

Codebases grow fast. React projects sprawl. React Native multiplies the surface area across platforms. Without active quality gates, you're inviting chaos.

SonarQube doesn't just point fingers — it creates a shared understanding of quality across your entire team. In 2025, that's not just helpful — it's essential.

Published on peakiq.in — React Native guides and tutorials.

React Native Background Downloads, ZIP Extraction & Notifications

PEAKIQ — Sun, 07 Jun 2026 04:03:38 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/managing-background-downloads-unzipping-files-and-notifications-in-react-native

A complete guide to handling background file downloads, extracting ZIP archives, and notifying users in React Native. Published on peakiq.in.

1. Create a React Native Project

If you don't already have a project initialized, scaffold one using the React Native CLI:

npx react-native init MyApp

2. Install Required Libraries

Four libraries power this implementation, each handling a distinct responsibility:

Library	Purpose
`@kesha-antonov/react-native-background-downloader`	Background downloads that persist across app restarts
`react-native-zip-archive`	Extracting ZIP files after download completes
`react-native-notifications`	Local push alerts when download finishes
`react-native-fs`	File system operations and recursive path traversal

Install via npm:

npm install @kesha-antonov/react-native-background-downloader \
  react-native-zip-archive \
  react-native-notifications \
  react-native-fs

Or via yarn:

yarn add @kesha-antonov/react-native-background-downloader \
  react-native-zip-archive \
  react-native-notifications \
  react-native-fs

3. Platform Configuration

Android

Add required permissions in AndroidManifest.xml
Enable background services if needed
Grant internet and storage permissions

iOS

Configure notification permissions in your app settings
Enable Background Fetch mode
Enable Background Processing under Background Modes

4. Full Implementation

A complete component handling the full download lifecycle — background download, ZIP extraction, progress tracking, and local notifications:

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import * as Progress from 'react-native-progress';
import { Notifications } from 'react-native-notifications';
import RNBackgroundDownloader from '@kesha-antonov/react-native-background-downloader';
import { unzip } from 'react-native-zip-archive';
import RNFS from 'react-native-fs';

// Recursively collect all file paths inside a directory
const collectFilePaths = async (
  dirPath: string,
  filePaths: string[] = []
): Promise<string[]> => {
  const contents = await RNFS.readDir(dirPath);
  for (const item of contents) {
    if (item.isDirectory()) {
      await collectFilePaths(item.path, filePaths);
    } else {
      filePaths.push(item.path);
    }
  }
  return filePaths;
};

const DownloadScreen: React.FC = () => {
  const [progress, setProgress] = useState<number>(0);

  useEffect(() => {
    Notifications.registerRemoteNotifications();
    checkExistingDownloads();
  }, []);

  // Resume any downloads that were interrupted by an app restart
  const checkExistingDownloads = async () => {
    const tasks = await RNBackgroundDownloader.checkForExistingDownloads();
    const task = tasks.find(t => t.id === 'file_11111');
    if (task) {
      task
        .progress(({ bytesDownloaded, bytesTotal }) =>
          setProgress(bytesDownloaded / bytesTotal)
        )
        .done(() => console.log('Resumed download completed'))
        .error(console.error);
    }
  };

  const sendNotification = () => {
    Notifications.postLocalNotification({
      body: 'File Uploaded!',
      title: 'Download Completed',
      sound: 'chime.aiff',
      silent: false,
    });
  };

  const downloadFile = (url: string): Promise<string> => {
    return new Promise((resolve, reject) => {
      const destination = `${RNBackgroundDownloader.directories.documents}/file_11111.zip`;
      RNBackgroundDownloader.download({ id: 'file_11111', url, destination })
        .progress(({ bytesDownloaded, bytesTotal }) =>
          setProgress(bytesDownloaded / bytesTotal)
        )
        .done(() => resolve(destination))
        .error(reject);
    });
  };

  const downloadAndUnzip = async () => {
    try {
      const filePath = await downloadFile('http://localhost:5005/download');

      const unzipPath = await unzip(
        filePath,
        `${RNBackgroundDownloader.directories.documents}/file_${Date.now()}`
      );

      const files = await collectFilePaths(unzipPath);
      console.log(files);

      sendNotification();
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {progress > 0 && (
        <>
          <Text>{`Progress: ${(progress * 100).toFixed(2)}%`}</Text>
          <Progress.Bar progress={progress} width={350} />
        </>
      )}
      <Text onPress={downloadAndUnzip}>Download & Extract</Text>
    </View>
  );
};

export default DownloadScreen;

5. How It Works

Background Downloads

Uses react-native-background-downloader to handle downloads that survive app restarts. The checkForExistingDownloads() call on mount automatically resumes any interrupted tasks.

ZIP Extraction

Once the download resolves, react-native-zip-archive's unzip() extracts the archive into a uniquely named directory using Date.now() to avoid collisions.

File Traversal

react-native-fs recursively walks the extracted directory tree, collecting every file path into a flat array.

Notifications

A local push notification fires immediately after extraction completes, letting the user know their content is ready — even if the app is in the background.

Use Cases

This pattern works well for any app dealing with large file downloads:

Offline content bundles
Media and video downloads
PDF and document packs
SDS and compliance files
Course or educational materials
Map tile packages

Published on peakiq.in — React Native guides and tutorials.

Automate React Native App Updates with Fastlane & Remote Config

PEAKIQ — Sat, 06 Jun 2026 04:10:42 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/automating-app-updates-in-react-native-with-fastlane-and-remote-config

Automating App Updates in React Native with Fastlane and Remote Config

Managing app updates across iOS and Android is repetitive work. Fastlane automates the build and release pipeline, while Firebase Remote Config lets you enforce a minimum required version without shipping a new build to change the threshold. Together they give you a reliable, low-maintenance update system.

This guide walks through setting up both, then connecting them via a GitHub Actions workflow.

Prerequisites

A React Native project
A Firebase project with Remote Config enabled
Fastlane installed locally
Basic familiarity with GitHub Actions

Step 1 — Set Up Fastlane

Initialize Fastlane in your project root:

fastlane init

Follow the prompts to configure it for your project. This creates a fastlane/ directory containing a Fastfile and an Appfile.

Update your Fastfile with lanes for both iOS and Android. Each lane should handle the steps relevant to your release process — incrementing the build number, running tests, building the app, and uploading to the App Store or Google Play.

A minimal Android lane looks like this:

lane :android_deploy do
  gradle(task: 'bundle', build_type: 'Release')
  upload_to_play_store(track: 'internal')
end

And for iOS:

lane :ios_deploy do
  match(type: 'appstore')
  build_app(scheme: 'YourApp')
  upload_to_app_store
end

Customize these based on your signing setup, test requirements, and target release track.

Step 2 — Use Remote Config for Update Checks

Configure the parameter in Firebase

In the Firebase Console, go to Remote Config and create a new parameter named minimum_required_version. Set its default value to the minimum version string you want to enforce, for example 2.0.0.

When you want to raise the minimum — after deprecating an old API, fixing a critical bug, or shipping a breaking change — update this value in the console and publish. No new app build required.

Fetch and check the version in your app

Install the required packages if you have not already:

npm install @react-native-firebase/app @react-native-firebase/remote-config react-native-device-info
cd ios && pod install

Then add the version check to your app entry point:

import { useEffect } from 'react';
import { Alert, Linking } from 'react-native';
import DeviceInfo from 'react-native-device-info';
import remoteConfig from '@react-native-firebase/remote-config';

const useUpdateCheck = () => {
  useEffect(() => {
    async function checkForUpdate() {
      await remoteConfig().fetchAndActivate();

      const minimumRequiredVersion = remoteConfig()
        .getValue('minimum_required_version')
        .asString();

      const currentVersion = DeviceInfo.getVersion();

      if (compareVersions(currentVersion, minimumRequiredVersion) < 0) {
        Alert.alert(
          'Update Required',
          'A new version of the app is available. Please update to continue.',
          [
            {
              text: 'Update Now',
              onPress: () => {
                // Android
                Linking.openURL('market://details?id=com.yourapp.package');
                // iOS — replace with your App Store URL
                // Linking.openURL('itms-apps://itunes.apple.com/app/idYOURAPPID');
              },
            },
          ],
          { cancelable: false }
        );
      }
    }

    checkForUpdate();
  }, []);
};

export default useUpdateCheck;

Call useUpdateCheck() from your root component. The { cancelable: false } option on the alert prevents users from dismissing the prompt without updating.

You will need a compareVersions utility that parses semver strings and returns a negative number if the first argument is older than the second. A simple implementation:

const compareVersions = (a, b) => {
  const pa = a.split('.').map(Number);
  const pb = b.split('.').map(Number);
  for (let i = 0; i < 3; i++) {
    if ((pa[i] || 0) < (pb[i] || 0)) return -1;
    if ((pa[i] || 0) > (pb[i] || 0)) return 1;
  }
  return 0;
};

Step 3 — GitHub Actions Workflow

Create the workflow file

Add a workflow at .github/workflows/deploy.yml:

name: Deploy React Native App

on:
  push:
    branches:
      - main

jobs:
  deploy-android:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true
      - name: Deploy Android
        run: bundle exec fastlane android_deploy
        env:
          FASTLANE_JSON_KEY_DATA: ${{ secrets.FASTLANE_JSON_KEY_DATA }}

  deploy-ios:
    runs-on: macos-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm install && cd ios && pod install
      - name: Set up Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.1'
          bundler-cache: true
      - name: Deploy iOS
        run: bundle exec fastlane ios_deploy
        env:
          FASTLANE_USER: ${{ secrets.FASTLANE_USER }}
          MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
          APP_STORE_CONNECT_API_KEY: ${{ secrets.APP_STORE_CONNECT_API_KEY }}

Add GitHub Secrets

In your repository, go to Settings > Secrets and variables > Actions and add the secrets referenced in the workflow:

Secret	What it holds
`FASTLANE_JSON_KEY_DATA`	Google Play service account JSON key
`FASTLANE_USER`	Apple ID used for App Store Connect
`MATCH_PASSWORD`	Password for your Fastlane Match certificate repo
`APP_STORE_CONNECT_API_KEY`	App Store Connect API key JSON

Push changes to the main branch to trigger the workflow.

How It All Connects

Once this is in place, the release flow works like this:

Push to main — GitHub Actions builds and deploys the app via Fastlane
The new build ships to users through the App Store or Google Play
When you need to force an update, raise minimum_required_version in Firebase Remote Config and publish
On next app launch, users running an older version see the mandatory update prompt

No code change or new release is needed to adjust the minimum version threshold — that control lives entirely in Firebase.

Notes

Always test the compareVersions logic with edge cases — versions like 1.10.0 vs 1.9.0 trip up naive string comparison.
Consider adding a fetchAndActivate timeout via remoteConfig().setConfigSettings({ fetchTimeMillis: 3000 }) to avoid blocking app startup if Firebase is slow to respond.
For iOS, make sure the Linking.openURL target uses the correct itms-apps:// scheme with your actual App Store app ID.

Effective Request Cancellation with Axios in JavaScript

PEAKIQ — Sat, 06 Jun 2026 03:33:59 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/effective-request-cancellation-with-axios-in-javascript

How CancelTokens Work

A CancelToken is a token you attach to an Axios request. When you want to cancel that request, you call the cancel() function on the token source. Axios intercepts the cancellation, aborts the request, and throws a specific cancellation error that you can catch and handle separately from other errors.

The four things to understand:

Creating a token — axios.CancelToken.source() returns a { token, cancel } pair. Pass token to the request and call cancel() when you want to abort.
Canceling a request — Calling cancel(message) immediately interrupts any in-flight request using that token.
Handling cancellation errors — Axios throws a CanceledError on cancellation. Use axios.isCancel(error) to distinguish it from real network or server errors.
Resetting the token — After canceling, create a new CancelToken.source() before making the next request. A canceled token cannot be reused.

Implementation

Cancel token module

Create a shared module that holds the current token source and exposes a reset function. This lets any part of your application cancel the active request and prepare a fresh token in one call.

// cancel.js

/* eslint-disable import/no-mutable-exports */
import axios from 'axios';

export let axiosCancelSource = axios.CancelToken.source();

export const resetCancelSource = (cancelMessage = 'Request is Cancelled') => {
  axiosCancelSource.cancel(cancelMessage);
  axiosCancelSource = axios.CancelToken.source();
};

axiosCancelSource is exported as a mutable let so the reference can be updated when resetCancelSource creates a new source. The eslint-disable comment suppresses the mutable export warning — this pattern is intentional here.

Using the token in a request

Import the shared token and attach it to your Axios config. In the finally block, reset the source so the next call gets a clean token.

// DownloadClass.js

import axios from 'axios';
import { axiosCancelSource, resetCancelSource } from '../components/shared/cancelToken';

export class DownloadAssessment {
  static async downloadFromServer(paramData) {
    const { axiosReqPayload } = paramData;

    try {
      const response = await axios({
        ...axiosReqPayload,
        cancelToken: axiosCancelSource.token,
      });
      return response.data;
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Request canceled:', error.message);
        // Handle cancellation — update UI state, log, or silently ignore
      } else {
        throw error; // Re-throw real errors so callers can handle them
      }
    } finally {
      // Reset after every request — success, error, or cancellation
      resetCancelSource();
    }
  }
}

The finally block ensures resetCancelSource runs regardless of outcome. Without this, a failed or canceled request would leave the token in a canceled state, causing all subsequent requests to fail immediately.

Triggering Cancellation

Call resetCancelSource() from anywhere in your application when you need to abort the current request:

import { resetCancelSource } from '../components/shared/cancelToken';

// On component unmount, route change, or user action
resetCancelSource('User navigated away');

This cancels the active request and immediately prepares a fresh token for the next one.

Best Practices

Call resetCancelSource in component cleanup functions (useEffect return, componentWillUnmount) to prevent state updates on unmounted components.
Always use axios.isCancel(error) before deciding how to handle a caught error — swallowing a real network error as if it were a cancellation is a common bug.
Never reuse a canceled token. Always call axios.CancelToken.source() to create a new one before the next request.
If you are using Axios 0.22+, consider migrating to the AbortController API, which is the web standard equivalent and is now supported natively by Axios.

Summary

Concept	How it works
Create token	`axios.CancelToken.source()` returns `{ token, cancel }`
Attach to request	Pass `token` as `cancelToken` in the Axios config
Cancel	Call `cancel(message)` on the source
Detect cancellation	`axios.isCancel(error)` returns `true` for canceled requests
Reset	Call `axios.CancelToken.source()` again before the next request

Request cancellation is a small addition to your Axios setup that pays dividends in application reliability — fewer race conditions, cleaner unmount behavior, and a better experience when users change their mind mid-request.

React Native iOS Google Sign-In: Production Setup Guide

PEAKIQ — Mon, 25 May 2026 12:46:44 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/production-google-sign-in-setup-for-react-native-ios

This guide explains how to configure Google authentication in a React Native iOS application using:

React Native CLI
TypeScript
Google Sign-In SDK
iOS OAuth Client

Install Google Sign-In Package

npm install @react-native-google-signin/google-signin

Install iOS pods:

cd ios && pod install

Create Google OAuth iOS Client

Open Google Cloud Console:

https://console.cloud.google.com

Navigate:

APIs & Services
    ↓
Credentials
    ↓
Create Credentials
    ↓
OAuth Client ID

Choose:

iOS

Configure Bundle Identifier

Use the same iOS bundle identifier from Xcode.

Example:

com.idsvault.app

Find it in:

Xcode
   ↓
Targets
   ↓
General
   ↓
Bundle Identifier

Configure Google Sign-In

Create:

src/config/google.ts

import {
  GoogleSignin,
} from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  iosClientId:
    'YOUR_IOS_CLIENT_ID',
});

AppDelegate Setup

Open:

ios/AppDelegate.swift

Add import:

import GoogleSignIn

Add callback handler inside AppDelegate:

func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
  return GIDSignIn.sharedInstance.handle(url)
}

Add URL Scheme

Google Sign-In on iOS requires URL scheme registration.

Open:

ios/YourProject/Info.plist

Add:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>
        YOUR_REVERSED_CLIENT_ID
      </string>
    </array>
  </dict>
</array>

Example:

<string>
com.googleusercontent.apps.xxxxxxxxx
</string>

Important

Use:

REVERSED_CLIENT_ID

NOT:

CLIENT_ID
bundle identifier
web client ID

React Native Google Login

import {
  GoogleSignin,
} from '@react-native-google-signin/google-signin';

export async function continueWithGoogle() {

  await GoogleSignin.hasPlayServices();

  const userInfo =
    await GoogleSignin.signIn();

  console.log(userInfo);

  const idToken =
    userInfo.data?.idToken;

  console.log(idToken);

  return idToken;
}

Example Button Usage

<TouchableOpacity
  onPress={continueWithGoogle}
>
  <Text>
    Continue with Google
  </Text>
</TouchableOpacity>

Common iOS Error

Your app is missing support for the following URL schemes

Fix:

add REVERSED_CLIENT_ID
clean build
reinstall app

Clean Build

cd ios
xcodebuild clean

Reinstall app:

npx react-native run-ios

Final Result

After successful setup:

Tap Google button
    ↓
Google login popup
    ↓
Authenticate
    ↓
Return to app
    ↓
Receive Google ID token

Your React Native iOS app now supports production-grade Google Sign-In.

AI Business Evolution: What to Expect in 2026

PEAKIQ — Mon, 25 May 2026 03:09:26 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/future-of-artificial-intelligence-in-business

Navigating the AI-Driven Future of Business

Artificial Intelligence is not just a technological trend — it is a transformational force reshaping how businesses operate, compete, and grow across every industry. The role of AI in business is poised to expand in ways that bring new opportunities, real challenges, and fundamental shifts in how organizations think and act.

This article explores the most significant directions that AI is taking business, and what leaders need to understand to navigate them well.

AI as an Augmentation Tool

The most important thing to understand about AI's trajectory in business is that its greatest value lies in augmenting people, not replacing them. AI-driven automation and decision-support systems free employees from repetitive, low-judgment work — giving them more capacity for creative thinking, complex problem-solving, and meaningful client interactions.

Organizations that frame AI as a tool for human empowerment will outperform those that see it purely as a cost-reduction mechanism. The competitive advantage goes to teams that work with AI effectively, not to AI working instead of teams.

Hyper-Personalization and Customer Experience

AI's ability to process large volumes of behavioral data and surface actionable patterns is fundamentally changing how businesses serve customers. Products, services, and communications can now be tailored with a precision that was operationally impossible even five years ago.

This shift toward hyper-personalization is not merely about better marketing. It changes the nature of the customer relationship — when interactions feel genuinely relevant, customers develop stronger brand loyalty and are more likely to forgive occasional failures. The businesses that get this right will not just retain customers more effectively; they will make switching to a competitor feel like a step backward.

AI-Enhanced Decision-Making

Across functions — supply chain, finance, hiring, product development — AI-powered predictive analytics gives organizations foresight that was previously unavailable or prohibitively expensive to develop. Demand forecasting, risk modeling, and scenario planning become faster and more accurate when grounded in real-time data rather than historical averages and intuition alone.

The shift here is not that AI makes decisions for organizations. It is that AI raises the quality of information available to decision-makers at every level, compressing the time between sensing a change and responding to it.

"AI will not be the sole force driving business — it will be the indispensable partner that amplifies human potential and shapes the very fabric of innovation."

The Rise of Explainable AI

As AI becomes more embedded in consequential decisions — credit approvals, hiring shortlists, medical triage, fraud detection — the demand for transparency in how those decisions are made is intensifying. Explainable AI (XAI) refers to systems designed to surface understandable reasoning alongside their outputs, rather than producing results from an opaque process.

For businesses, this is both a regulatory and a trust issue. Regulators in the EU, US, and elsewhere are moving toward requirements for algorithmic accountability. Beyond compliance, customers and employees are more likely to accept AI-influenced decisions when they can understand the logic behind them. Investing in explainability is increasingly inseparable from responsible AI deployment.

AI in Cybersecurity

The same properties that make AI powerful for business — pattern recognition at scale, real-time processing, continuous learning — make it essential for defending against modern cyber threats. AI-driven security systems can detect anomalies, flag suspicious behavior, and respond to incidents faster than any human security team operating alone.

This matters because the threat landscape is evolving at a pace that traditional rule-based security tools cannot match. Attackers are also beginning to use AI, which means defenses that do not incorporate it will fall progressively further behind. Cybersecurity is becoming an AI arms race, and standing still is not a neutral position.

AI and Sustainability

AI is emerging as one of the most practical tools available for organizations serious about their sustainability commitments. Applications range from optimizing energy consumption in data centers and manufacturing facilities, to reducing food waste in logistics networks, to improving the accuracy of carbon accounting across complex supply chains.

Sustainability is also increasingly a business performance issue, not just a values one. Investors, enterprise customers, and regulators are applying growing pressure on organizations to demonstrate measurable progress. AI-driven efficiency gains offer a path to meeting those expectations without sacrificing operational performance.

Challenges and Ethical Considerations

The potential of AI in business is real, but so are the risks that come with deploying it at scale. Several challenges deserve serious organizational attention:

Bias — AI systems trained on historical data can encode and amplify existing inequities. Auditing models for discriminatory outputs is not optional for organizations that care about fair outcomes.
Data privacy — AI systems are often data-hungry. Collecting and retaining the data they need must be balanced against customer privacy rights and regulatory obligations.
Workforce transition — As AI automates certain tasks, the workforce needs pathways to reskill. Organizations that invest in this proactively will navigate the transition more smoothly than those that treat it as someone else's problem.
Accountability — When an AI-driven decision causes harm, it must be clear who is responsible. Diffusing accountability across a model and its developers is not an acceptable answer.

Navigating these challenges responsibly is what separates organizations that build durable trust in their AI systems from those that accumulate hidden liability.

What This Means for Business Leaders

AI's integration into business is not a future event to prepare for — it is an ongoing shift already underway. The organizations gaining ground are those that treat AI adoption as a strategic capability to develop over time, not a single implementation project with a finish line.

That means investing in data infrastructure, building AI literacy across teams, establishing clear governance for how AI is used, and staying close to how the regulatory environment is evolving. The businesses that do this well will be better positioned to move quickly when new capabilities emerge — and more resilient when things go wrong.

Posted on Peakiq.in · AI · Business Strategy

React Native Environment Info Script for Windows & Mac

PEAKIQ — Mon, 25 May 2026 02:51:32 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/react-native-environment-info-script-for-windows-mac

Get Full Details of Your React Native Environment

When debugging build issues or setting up a new machine, knowing exactly what is installed — and which versions — saves a lot of guesswork. These scripts collect system information, installed binaries, SDKs, IDEs, and npm packages for a React Native environment on both Windows and macOS.

Windows (PowerShell)

How to run

Save the script as react-native-info.ps1
Open PowerShell and navigate to the file location
Allow script execution for the current session and run it:

Set-ExecutionPolicy Unrestricted -Scope Process
.\react-native-info.ps1

Script

# Get System Info
Write-Host "System info`n"

Write-Host "System:"
Write-Host "   OS: $(Get-CimInstance Win32_OperatingSystem | Select-Object -ExpandProperty Caption)"
Write-Host "   CPU: $(Get-CimInstance Win32_Processor | Select-Object -ExpandProperty Name)"
Write-Host "   Memory: $(Get-CimInstance Win32_ComputerSystem | Select-Object -ExpandProperty TotalPhysicalMemory | ForEach-Object { [math]::Round($_ / 1GB, 2) }) GB"
Write-Host "   Shell: PowerShell $($PSVersionTable.PSVersion)"

# Get Installed Binaries
Write-Host "`nBinaries:"
Write-Host "   Node: $(node -v)"
Write-Host "   Yarn: $(yarn -v)"
Write-Host "   npm: $(npm -v)"
$watchmanVersion = (Get-Command watchman -ErrorAction SilentlyContinue) ? (watchman --version) : "Not Found"
Write-Host "   Watchman: $watchmanVersion"

# Get Installed Managers
Write-Host "`nManagers:"
$chocoVersion = (choco -v 2>$null) ? (choco -v) : "Not Installed"
Write-Host "   Chocolatey: $chocoVersion"
$scoopVersion = (scoop -v 2>$null) ? (scoop -v) : "Not Installed"
Write-Host "   Scoop: $scoopVersion"

# Get SDKs
Write-Host "`nSDKs:"
Write-Host "   Android SDK: $(Get-ItemProperty -Path 'HKLM:\SOFTWARE\Android Studio' -ErrorAction SilentlyContinue | Select-Object -ExpandProperty Path)"
Write-Host "   Java: $(java -version 2>&1 | Select-String -Pattern 'version' | ForEach-Object { $_ -replace 'java version "', '' -replace '"', '' })"

# Get Installed IDEs
Write-Host "`nIDEs:"
Write-Host "   Xcode: Not Available on Windows"
$androidStudio = (Get-Command "C:\Program Files\Android\Android Studio\bin\studio64.exe" -ErrorAction SilentlyContinue) ? "Installed" : "Not Installed"
Write-Host "   Android Studio: $androidStudio"

# Get npm package versions
Write-Host "`nnpm Packages:"
$reactNativeCli = npm show @react-native-community/cli version
$reactVersion = npm show react version
$reactNativeVersion = npm show react-native version
Write-Host "   @react-native-community/cli: $reactNativeCli"
Write-Host "   react: $reactVersion"
Write-Host "   react-native: $reactNativeVersion"

Write-Host "`nnpm Global Packages:"
$globalReactNative = npm list -g --depth=0 | Select-String 'react-native' | ForEach-Object { ($_ -split '@')[1] }
Write-Host "   *react-native*: $($globalReactNative -join ', ')"

macOS (Bash)

How to run

Save the script as react-native-info.sh
Make it executable:

chmod +x react-native-info.sh

Run it:

./react-native-info.sh

Script

#!/bin/bash

echo "React Native Environment Info for macOS"

# System Info
echo -e "\nSystem Info:"
echo "   OS: $(sw_vers -productName) $(sw_vers -productVersion)"
echo "   CPU: $(sysctl -n machdep.cpu.brand_string)"
echo "   Memory: $(sysctl -n hw.memsize | awk '{print $1/1073741824 " GB"}')"
echo "   Shell: $SHELL"

# Installed Binaries
echo -e "\nBinaries:"
echo "   Node: $(node -v)"
echo "   Yarn: $(yarn -v)"
echo "   npm: $(npm -v)"
WATCHMAN_VERSION=$(watchman --version 2>/dev/null || echo "Not Found")
echo "   Watchman: $WATCHMAN_VERSION"

# Package Managers
echo -e "\nPackage Managers:"
echo "   Homebrew: $(brew -v | head -n 1)"

# SDKs
echo -e "\nSDKs:"
ANDROID_SDK=${ANDROID_HOME:-"Not Found"}
echo "   Android SDK: $ANDROID_SDK"
echo "   Java: $(java -version 2>&1 | awk -F '"' '/version/ {print $2}')"

# IDEs
echo -e "\nIDEs:"
XCODE_VERSION=$(xcodebuild -version 2>/dev/null || echo "Not Installed")
echo "   Xcode: $XCODE_VERSION"
ANDROID_STUDIO=$(ls /Applications | grep "Android Studio" || echo "Not Installed")
echo "   Android Studio: $ANDROID_STUDIO"

# npm Packages
echo -e "\nnpm Packages:"
echo "   @react-native-community/cli: $(npm show @react-native-community/cli version)"
echo "   react: $(npm show react version)"
echo "   react-native: $(npm show react-native version)"

echo -e "\nnpm Global Packages:"
GLOBAL_REACT_NATIVE=$(npm list -g --depth=0 | grep react-native || echo "Not Installed")
echo "   *react-native*: $GLOBAL_REACT_NATIVE"

What Each Script Collects

Section	Details
System	OS name, CPU, total memory, shell version
Binaries	Node, Yarn, npm, Watchman
Package managers	Chocolatey / Scoop (Windows), Homebrew (macOS)
SDKs	Android SDK path, Java version
IDEs	Xcode (macOS only), Android Studio
npm packages	Latest published versions of core RN packages
npm global	Globally installed React Native packages

Notes

The PowerShell script requires Set-ExecutionPolicy Unrestricted -Scope Process to run unsigned scripts. This only affects the current session and does not change your system policy permanently.
The Bash script fixes a minor bug in the original — $ANDROID_HOME now uses ${ANDROID_HOME:-"Not Found"} instead of echo $ANDROID_HOME which would silently print nothing if the variable is unset.
The npm show calls fetch the latest published version from the registry, not what is installed locally. To check locally installed versions, use npm list --depth=0 inside your project instead.

Custom Native Splash Screen Flutter: flutter_native_splash Guide

PEAKIQ — Mon, 25 May 2026 02:37:18 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/how-to-implement-a-custom-native-splash-screen-in-flutter

How to Add a Native Splash Screen in Flutter

A splash screen is the first thing users see when they open your app. In Flutter, you can create a native splash screen that appears instantly — before Flutter even loads — using the flutter_native_splash package. This gives your app a polished, professional feel from the very first frame.

In this tutorial you will configure colors, apply the splash to both iOS and Android, and control exactly when the splash disappears using preserve() and remove().

Step 1 — Install the Package

Add flutter_native_splash to your pubspec.yaml under dev_dependencies:

dev_dependencies:
  flutter_native_splash: ^2.4.7

Then fetch it:

flutter pub get

Step 2 — Create the Configuration File

Create a file named flutter_native_splash.yaml in your project root and add:

flutter_native_splash:
  color: "#000000"
  fullscreen: true

android_12:
  color: "#000000"
  icon_background_color: "#111111"

This configuration sets a black background, enables fullscreen mode, and applies correct styling for Android 12 and above — which has its own splash API that requires separate configuration.

Once the file is ready, generate the native splash assets:

flutter pub run flutter_native_splash:create

Re-run this command every time you update the YAML file. Changes to the configuration are not picked up automatically.

Step 3 — Control the Splash Programmatically

By default, the splash disappears as soon as Flutter finishes rendering its first frame. In most real apps, you need it to stay visible longer while async work completes — loading user data, initializing storage, fetching remote config, or validating a session.

The package provides two methods for this:

FlutterNativeSplash.preserve() — holds the splash open until you are ready
FlutterNativeSplash.remove() — dismisses the splash and reveals the app UI

Full working example

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MainApp());
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MyAppState();
}

class _MyAppState extends State<MainApp> {
  @override
  void initState() {
    super.initState();
    _initializeApp();
  }

  Future<void> _initializeApp() async {
    // Replace this with your real initialization logic
    await Future.delayed(const Duration(seconds: 3));
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Text("Native Splash"),
        ),
      ),
    );
  }
}

How it works

WidgetsFlutterBinding.ensureInitialized() must be called before preserve() because the splash system hooks into the widget binding lifecycle. Passing the binding reference to preserve() tells the package to hold the splash until you explicitly call remove().

In _initializeApp, replace Future.delayed with your actual startup work — API calls, shared preferences initialization, feature flag fetches, or user session validation. Call remove() only after all of it is complete.

Configuration Options

The YAML file supports more than just background color. Common options worth knowing:

Option	What it does
`color`	Background color in hex
`image`	Path to a logo or icon, e.g. `assets/logo.png`
`fullscreen`	Hides the status bar during the splash
`color_dark`	Background color when the device is in dark mode
`image_dark`	Separate image for dark mode
`android_12.color`	Android 12+ specific background color
`android_12.icon_background_color`	Background behind the icon on Android 12+

iOS and Android can each have separate image and color values, so the splash can match each platform's conventions exactly.

Tips for Production

Add your app logo with image: assets/logo.png and rerun the creation command
Configure color_dark and image_dark for dark mode support
Use different images or colors per platform by adding android: and ios: sections
Add a background gradient on Android by pointing to a custom drawable file
Always rerun flutter pub run flutter_native_splash:create after any YAML change

Result

With this setup in place, the native splash loads instantly on app open, stays visible while initialization completes, and dismisses cleanly when the app is ready — giving users a smooth, professional experience from the very first frame.

Top Cybersecurity Threats in 2026 | How to Protect Your Business

PEAKIQ — Mon, 25 May 2026 02:26:52 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/top-10-cybersecurity-threats-2026

Cyber threats are not slowing down. Attackers are more organized, their tools are more accessible, and the attack surface keeps growing as organizations adopt cloud infrastructure, remote work, and connected devices.

This guide covers the most common threat categories, what makes each one dangerous, and the practical defenses that reduce your exposure.

Phishing Attacks

Phishing involves attackers posing as trusted entities — a bank, a colleague, an internal IT team — to trick individuals into revealing credentials, clicking malicious links, or transferring funds. Attacks arrive via email, SMS, messaging platforms, and social media.

How to defend against it:

Train employees to recognize phishing patterns — urgency, mismatched sender domains, unexpected attachments
Deploy email filtering with anti-spoofing rules (SPF, DKIM, DMARC)
Enforce Multi-Factor Authentication (MFA) so stolen credentials alone are not enough to gain access

Ransomware

Ransomware encrypts files or entire systems and demands payment for the decryption key. Modern ransomware gangs also exfiltrate data before encrypting it, creating a double-extortion pressure.

How to defend against it:

Maintain offline backups of critical data, tested regularly and kept off the network
Keep all software and operating systems patched — most ransomware exploits known vulnerabilities
Segment your network so a compromised endpoint cannot reach everything else
Educate employees to avoid opening unexpected attachments or clicking unfamiliar links

Zero-Day Vulnerabilities

A zero-day is a software flaw that is unknown to the vendor and therefore has no patch. Attackers who discover them can exploit systems silently until the vulnerability is identified and fixed.

How to defend against it:

Patch known vulnerabilities quickly — zero-days are rare; unpatched known CVEs are not
Deploy Intrusion Detection Systems (IDS) and Intrusion Prevention Systems (IPS) to catch unusual behavior even without a known signature
Subscribe to threat intelligence feeds so your team hears about emerging vulnerabilities early

IoT Vulnerabilities

Internet of Things devices — cameras, sensors, building systems, printers — often ship with weak default credentials and infrequent firmware updates. Once on your network, a compromised IoT device can serve as a pivot point into more sensitive systems.

How to defend against it:

Change default passwords on every IoT device before deployment
Keep device firmware updated and track end-of-life status for unsupported hardware
Isolate IoT devices on a separate VLAN with no direct access to your core network
Monitor IoT device behavior for anomalies — unexpected outbound connections, unusual traffic volumes

Insider Threats

Insider threats come from employees, contractors, or partners with legitimate access. They can be intentional — a disgruntled employee exfiltrating data — or unintentional, such as a user who misconfigures a storage bucket or clicks a phishing link.

How to defend against it:

Implement User Behavior Analytics (UBA) to flag access patterns that deviate from the norm
Enforce the Principle of Least Privilege — users should only access what their role requires
Run regular security awareness training so staff understand the risks of their own actions
Log and audit access to sensitive systems, especially around offboarding

DDoS Attacks

Distributed Denial of Service attacks flood a network, server, or application with traffic until it becomes unavailable. They are used to disrupt services, extort businesses, or act as a distraction while another attack occurs.

How to defend against it:

Use a DDoS mitigation service (such as Cloudflare, AWS Shield, or Akamai) to absorb and filter volumetric traffic
Monitor traffic in real time so spikes are caught early
Have an incident response plan that defines who acts, in what order, when a DDoS is detected

Supply Chain Attacks

Supply chain attacks target a vendor or dependency in your software or infrastructure rather than attacking you directly. The SolarWinds and XZ Utils incidents demonstrated how deeply these attacks can penetrate organizations that considered themselves well-defended.

How to defend against it:

Vet third-party vendors for their security practices before integration — and review them periodically
Use software composition analysis (SCA) tools to track open source dependencies and known vulnerabilities
Verify integrity of software builds and artifacts using checksums and code signing
Build a secure SDLC that treats third-party code with the same scrutiny as internal code

Building a Layered Defense

No single control stops every threat. The organizations that weather attacks best combine technical controls, employee awareness, and documented response procedures — and they test all three regularly.

Threat	Primary defense layer
Phishing	MFA + email filtering + training
Ransomware	Offline backups + patching + network segmentation
Zero-day	IDS/IPS + threat intelligence + fast patching
IoT	Network isolation + firmware updates
Insider threat	Least privilege + UBA + access logging
DDoS	Mitigation service + traffic monitoring + incident plan
Supply chain	Vendor vetting + SCA + artifact integrity

Security is an ongoing process, not a one-time project. Revisit your policies, run tabletop exercises, and stay current with how the threat landscape is shifting.

React Native Background File Uploads: Progress & Notifications

PEAKIQ — Mon, 25 May 2026 02:11:32 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/implementing-background-file-uploads-in-react-native-with-real-time-progress-tracking-and-local-notifications

We'll also cover the following:

Creating a dummy file in the device's document directory and encoding it in base64.
Initiating the upload process and handling events like error, cancelled, completed, and progress to provide real-time feedback to users.
Displaying the upload progress using the react-native-progress library.
Ensuring compatibility between iOS and Android platforms.

package.json

{
  "dependencies": {
    "react-native-notifications": "^5.1.0",
    "react-native-background-upload": "github:memanoj/react-native-background-upload",
    "react-native-background-upload-original": "npm:react-native-background-upload"
  }
}

App.ts

import React, { useState, useEffect } from 'react';
import { Layout, Text, normalize } from 'component';
import { CustomThemeProps } from 'config/theme';
import { useThemeToggle } from 'hooks';
import RNBackgroundUploadiOS from 'react-native-background-upload';
import RNBackgroundUploadAndorid from 'react-native-background-upload-original';
import styled from 'styled-components/native';
import I18n from 'i18';
import RNFS from 'react-native-fs';
import base64 from 'base-64';
import utf8 from 'utf8';
import { Platform, View } from 'react-native';
import * as Progress from 'react-native-progress';
import { Notifications } from 'react-native-notifications';
const uploadUrl = 'https://api.escuelajs.co/api/v1/files/upload';

const ToggleButton = styled.TouchableOpacity`
  background-color: ${({ theme }: CustomThemeProps) => theme.BUTTON_BG_COLOR};
`;

const ToggleButtonText = styled(Text)<{ FontSize: Number }>`
  color: ${({ theme }: CustomThemeProps) => theme.BUTTON_TEXT_COLOR};
  font-size: ${(prop: { FontSize: number }) => `${normalize(prop.FontSize)}px`};
`;

const TextDesc = styled(Text)<{ color?: string }>`
  margin: ${normalize(2)}px;
  color: ${({ theme, color }: CustomThemeProps & { color?: string }) =>
    color ? color : theme.BUTTON_TEXT_COLOR};
  padding: 12px;
  font-weight: bold;
  background-color: ${({ theme }: CustomThemeProps) => theme.BUTTON_BG_COLOR};
  margin: 10px;
`;
const BackGroundLoader =
  Platform.OS === 'ios' ? RNBackgroundUploadiOS : RNBackgroundUploadAndorid;

const Login: React.FC = () => {
  const { toggleTheme, ThemeName } = useThemeToggle();
  const [ProgressLoad, SetProgressLoad] = useState<number>(0);

  useEffect(() => {
    // Request notification permissions for iOS
    Notifications.registerRemoteNotifications();
    // Listen for notifications
  }, []);

  const resolveUpload = function (uploadId: any) {
    return new Promise((resolve, reject) => {
      let l1 = BackGroundLoader.addListener('error', uploadId, (data: any) => {
        reject(data);
        cleanup();
      });
      let l2 = BackGroundLoader.addListener(
        'cancelled',
        uploadId,
        (data: any) => {
          reject(data);
          cleanup();
        },
      );
      let l3 = BackGroundLoader.addListener(
        'completed',
        uploadId,
        (data: unknown) => {
          console.info('done');
          resolve(data);
          cleanup();
        },
      );
      let l4 = BackGroundLoader.addListener(
        'progress',
        uploadId,
        (data: any) => {
          console.info(data.progress, typeof data.progress);
          SetProgressLoad(data.progress / 100);
        },
      );
      let cleanup = () => {
        l1.remove();
        l2.remove();
        l3.remove();
        l4.remove();
      };
    });
  };

  const sendLocalNotification = () => {
    const fireDate = new Date(Date.now() + 1 * 1000); // 1 seconds from now
    let localNotification = Notifications.postLocalNotification({
      body: 'File Uploading!',
      title: "'Your File Uploaded successfully done...',"
      sound: 'chime.aiff',
      silent: false,
      category: 'SOME_CATEGORY',
      userInfo: {},
      fireDate: fireDate.toISOString(), // Converting to ISO string format
    });
    console.info({ localNotification });
  };

  const CallUpload = async () => {
    try {
      let uri = RNFS.DocumentDirectoryPath + '/audio.m4a';
      const sizeInBytes = 5 * 1024 * 1024; // 2 MB in bytes
      const dummyString = 'A'.repeat(sizeInBytes);
      const bytes = utf8.encode(dummyString);
      const base64String = base64.encode(bytes);
      await RNFS.writeFile(uri, base64String, 'base64');
      if (Platform.OS === 'ios') {
        uri = `file://${uri}`;
      }
      StartUpload(uri);
    } catch (error) {
      console.info(error);
    }
  };

  const StartUpload = async (uri: string) => {
    try {
      const headers = {
        'Content-Type': 'multipart/form-data',
        Authorization: 'Bearer token',
      };

      const formData = {
        file: JSON.stringify({ uri, name: 'test.m4a', type: 'audio/m4a' }), // no need to stringify for ios
        patientId: '3265fdf1-9448-45dd-9ed4-85a1c2b36e92',
        // others params also in string form
      };
      const options = {
        url: uploadUrl,
        path: uri,
        method: 'POST',
        field: 'file', // filed name
        headers: headers,
        type: 'multipart',
        parameters: formData,
        customUploadId: `u-${new Date().getTime()}`,
      };

      try {
        console.info({ BackGroundLoader });
        await BackGroundLoader.startUpload(options);
        let res: any = await resolveUpload(options.customUploadId);
        if (res?.responseBody) {
          console.info(JSON.parse(res?.responseBody));
        } else {
          console.info(res);
        }
        if (Platform.OS === 'ios') {
          await BackGroundLoader?.canSuspendIfBackground();
          sendLocalNotification();
        }
        SetProgressLoad(0);
      } catch (err) {
        throw {
          status: -1,
          _error: err,
          data: {
            code: null,
            detail: null,
            message: 'Network error',
          },
        };
      }
    } catch (error) {
      console.info(error);
    }
  };

  return (
    <Layout style={{ flex: 1 }}>
      <ToggleButton onPress={toggleTheme}>
        <ToggleButtonText FontSize={18}>
          {I18n.t('THEMEIS')} : {ThemeName}
        </ToggleButtonText>
      </ToggleButton>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {ProgressLoad !== 0 && (
          <>
            <Text>{uploadUrl}</Text>
            <Progress.Bar progress={ProgressLoad} width={350} />
          </>
        )}
        <TextDesc onPress={CallUpload} FontSize={18}>
          upload
        </TextDesc>
      </View>
    </Layout>
  );
};

export default Login;

For Patch if needed

npx patch-package react-native-background-upload-original

iOS Background Events

By default, iOS does not wake up your app when uploads are done while your app is not in the foreground. To receive the upload events (error, completed...) while your app is in the background, add the following to your AppDelegate.mm:

#import "RNSplashScreen.h" 
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <VydiaRNFileUploader.h> // import this
#import "RNNotifications.h"
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"Imanoj";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

   [super application:application didFinishLaunchingWithOptions:launchOptions];

    [RNSplashScreen show];

   // Add RNNotifications monitoring
    [RNNotifications startMonitorNotifications];
    return true;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
//this is code form documentation that we have to added 
- (void)application:(UIApplication *)application
handleEventsForBackgroundURLSession:(NSString *)identifier
  completionHandler:(void (^)(void))completionHandler {
  [[VydiaRNFileUploader sharedInstance] setBackgroundSessionCompletionHandler:completionHandler];
}


@end

Note : If you getting issue with android kotlin then you can apply the code and patch it

diff --git a/node_modules/react-native-background-upload-original/android/build.gradle b/node_modules/react-native-background-upload-original/android/build.gradle
index fa6963f..4d243c3 100755
--- a/node_modules/react-native-background-upload-original/android/build.gradle
+++ b/node_modules/react-native-background-upload-original/android/build.gradle
@@ -20,7 +20,7 @@ buildscript {

 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
-apply plugin: 'kotlin-android-extensions'
+apply plugin: 'kotlin-parcelize'

DEV Community: PEAKIQ

React Native Vision Camera: Reusable Component Guide

Building a Reusable Vision Camera Component in React Native

What We're Building

Dependencies

The Handle Interface

Component Props

Full Implementation

Key Design Decisions

Conditional outputs array

Zoom clamping

Recorder ref

Usage Example

What to Build Next

React Native hitSlop: Enhance Tappable Area for Small Buttons

React Native hitSlop Explained — Improve Touch Area for Small Buttons

What is hitSlop?

How It Works

Example: Close Button

When to Use hitSlop

Why It Matters

Quick Reference

SonarQube for React & React Native: Improve Code Quality

Why SonarQube in React & React Native Projects?

Setting Up SonarQube Locally on macOS

Step 1: Install and Launch SonarQube

Step 2: Install the Sonar Scanner

Step 3: Add the Configuration File

Run the Analysis

React Native Considerations

Test Coverage Integration

Bonus: Combine with Git Hooks

CI/CD Integration

Final Thoughts: Clean Code Is Sustainable Code

React Native Background Downloads, ZIP Extraction & Notifications

1. Create a React Native Project

2. Install Required Libraries

3. Platform Configuration

Android

iOS

4. Full Implementation

5. How It Works

Background Downloads

ZIP Extraction

File Traversal

Notifications

Use Cases

Automate React Native App Updates with Fastlane & Remote Config

Automating App Updates in React Native with Fastlane and Remote Config

Prerequisites

Step 1 — Set Up Fastlane

Step 2 — Use Remote Config for Update Checks

Configure the parameter in Firebase

Fetch and check the version in your app

Step 3 — GitHub Actions Workflow

Create the workflow file

Add GitHub Secrets

How It All Connects

Notes

Effective Request Cancellation with Axios in JavaScript

Implementation

Cancel token module

Using the token in a request

Triggering Cancellation

Best Practices

Summary

React Native iOS Google Sign-In: Production Setup Guide

This guide explains how to configure Google authentication in a React Native iOS application using:

Install Google Sign-In Package

Create Google OAuth iOS Client

Configure Bundle Identifier

Configure Google Sign-In

AppDelegate Setup

Add URL Scheme

Important

React Native Google Login

Example Button Usage

Common iOS Error

Clean Build

Final Result

React Native `hitSlop` Explained — Improve Touch Area for Small Buttons

What is `hitSlop`?

When to Use `hitSlop`