DEV Community: PEAKIQ

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'

Zero Trust Architecture: Secure Software Development's Future

PEAKIQ — Sun, 24 May 2026 04:43:53 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/zero-trust-architecture-secure-software-development

Zero Trust Architecture: The Future of Secure Software Development

As cyber threats grow more sophisticated, traditional perimeter-based security models no longer hold. In today's cloud-driven, API-connected world, Zero Trust Architecture has emerged as the cornerstone of modern cybersecurity — reshaping how developers design, build, and deploy secure software systems.

Zero Trust is not a single tool or product. It is a security philosophy:

"Never trust, always verify."

What Is Zero Trust Architecture?

Zero Trust Architecture (ZTA) eliminates the assumption that anything inside or outside a network can be trusted by default. Every user, device, and API request must be continuously verified, regardless of origin or location.

Its three core principles are:

Verify explicitly — always authenticate and authorize every request
Use least-privilege access — limit permissions to what is strictly necessary
Assume breach — design systems with the expectation that attacks will occur

This mindset shifts security from the network perimeter to every layer of your software ecosystem — from code to cloud.

Why Traditional Security Models Fail

In the past, companies relied on a castle-and-moat model — once inside the network, users and systems were trusted by default. That assumption no longer holds.

Cloud adoption, remote work, API integrations, microservices, and BYOD policies have expanded the attack surface dramatically. A compromised credential or misconfigured API can expose an entire system.

Zero Trust eliminates these weak spots by making every access request subject to validation, regardless of where it originates.

1. Zero Trust in the Software Development Lifecycle

Integrating Zero Trust into the SDLC ensures security is built in from the start, not patched on at the end.

Phase	Zero Trust application
Planning	Define threat models and access control policies
Design	Secure APIs, encryption, and IAM strategies
Development	Secure coding standards, identity-aware microservices
Testing	Security validation, fuzz testing, code scanning
Deployment	CI/CD pipelines with strict identity and access controls
Maintenance	Continuous log monitoring, anomaly detection, permissions drift review

Combine Zero Trust with DevSecOps to automate policy enforcement throughout your CI/CD workflows.

2. Identity as the New Perimeter

In a Zero Trust model, identity becomes the foundation of every security decision. Every device, user, and service must prove who they are before gaining access.

Key practices:

Enforce Multi-Factor Authentication (MFA) across all systems
Use Single Sign-On (SSO) with OAuth2 and OpenID Connect
Adopt Role-Based Access Control (RBAC) or Attribute-Based Access Control (ABAC)
Integrate with identity providers such as Azure AD, Okta, or Auth0

A unified identity layer reduces attack vectors while improving the user experience — security and usability are not mutually exclusive here.

3. Zero Trust in Cloud and API Security

Cloud-native apps and APIs are the backbone of modern software — and prime targets for attackers. Zero Trust applies micro-segmentation and context-based validation to keep cloud environments secure.

Key measures:

Implement API gateways with authentication and rate limiting
Encrypt all traffic using TLS 1.3 and enforce HTTPS everywhere
Continuously verify workload and container integrity
Apply network segmentation and Zero Trust Network Access (ZTNA)

Service mesh solutions like Istio or Linkerd add mutual TLS and fine-grained policy enforcement for service-to-service communication inside Kubernetes clusters.

4. Continuous Monitoring and Behavioral Analytics

Zero Trust does not end at authentication. It requires real-time monitoring and behavioral intelligence to catch anomalies as they happen.

Useful tools and techniques:

SIEM (Security Information and Event Management) for log aggregation and alerting
UEBA (User and Entity Behavior Analytics) for detecting unusual access patterns
AI-driven anomaly detection for surfacing threats that rule-based systems miss
Automated incident response to contain threats before they spread

Continuous visibility across all interactions enables faster detection and a shorter window between breach and containment.

5. Zero Trust and DevSecOps

Zero Trust and DevSecOps are complementary. DevSecOps embeds security into the development pipeline; Zero Trust defines the policies that pipeline enforces.

Together they enable:

Automated policy checks during every build
Access control enforcement inside CI/CD pipelines
Infrastructure-as-code scanning and secret detection
Secure collaboration across development, security, and operations teams

The result is faster delivery with a stronger security posture — neither speed nor protection needs to be sacrificed.

6. Implementing Zero Trust: A Practical Roadmap

Step	Action
Assess	Identify critical assets, users, and data flows
Authenticate	Strengthen identity and access management (IAM)
Segment	Divide networks and microservices into trust zones
Encrypt	Secure data at rest and in transit
Automate	Integrate continuous security checks into pipelines
Monitor	Track access behavior and respond to anomalies

Start with your most critical systems. Applying Zero Trust incrementally is far more effective than attempting an organization-wide rollout at once.

The Business Case for Zero Trust

Zero Trust is not only a security upgrade — it is a business enabler.

Adopting it delivers reduced data breach risk, improved compliance with frameworks like GDPR, ISO 27001, and SOC 2, greater visibility across users and workloads, and stronger trust from clients and regulators.

Organizations that treat security as a development concern — not an afterthought — ship software that is harder to exploit and easier to audit.

Looking Ahead

Zero Trust Architecture will become the baseline expectation for secure software in 2026 and beyond. Teams that adopt it early gain a measurable advantage in security posture, compliance readiness, and customer confidence.

In a landscape where every interaction is a potential threat vector, trust must be earned continuously — not assumed at the door.

Building a Simple CLI To-Do App in Rust Using Cargo

PEAKIQ — Sun, 24 May 2026 04:35:34 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/building-a-simple-cli-to-do-app-in-rust

Getting Started

Ensure you have Rust installed. If not, install it via Rustup:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Once installed, create a new project and open it:

cargo new rust_todo
cd rust_todo

Open src/main.rs — that's where all the code goes.

The Full Implementation

use std::io::stdin;

struct Task {
    id: u32,
    name: String,
}

fn main() {
    let mut tasks: Vec<Task> = Vec::new();

    loop {
        println!("\nSimple CRUD App");
        println!("1. Add Task");
        println!("2. View Tasks");
        println!("3. Delete Task");
        println!("4. Exit");
        println!("Enter your choice: ");

        let mut choice = String::new();
        stdin().read_line(&mut choice).unwrap();

        let choice: u32 = match choice.trim().parse() {
            Ok(num) => num,
            Err(_) => {
                println!("Invalid input. Please enter a number.");
                continue;
            }
        };

        match choice {
            1 => {
                println!("Enter task name: ");
                let mut name = String::new();
                stdin().read_line(&mut name).unwrap();
                let id = tasks.len() as u32 + 1;
                tasks.push(Task { id, name: name.trim().to_string() });
                println!("Task added successfully!");
            }
            2 => {
                if tasks.is_empty() {
                    println!("No tasks yet.");
                } else {
                    println!("Tasks:");
                    for task in &tasks {
                        println!("  ID: {}  Name: {}", task.id, task.name);
                    }
                }
            }
            3 => {
                println!("Enter task ID to delete: ");
                let mut id = String::new();
                stdin().read_line(&mut id).unwrap();
                let id: u32 = match id.trim().parse() {
                    Ok(num) => num,
                    Err(_) => {
                        println!("Invalid ID. Please enter a valid number.");
                        continue;
                    }
                };
                let before = tasks.len();
                tasks.retain(|task| task.id != id);
                if tasks.len() < before {
                    println!("Task deleted successfully!");
                } else {
                    println!("No task found with that ID.");
                }
            }
            4 => {
                println!("Exiting...");
                break;
            }
            _ => {
                println!("Invalid choice. Please enter 1, 2, 3, or 4.");
            }
        }
    }
}

Code Breakdown

Struct definition

struct Task {
    id: u32,
    name: String,
}

A Task holds a numeric id and a String name. Rust structs are value types — no hidden allocation or runtime overhead.

Handling user input

stdin().read_line(&mut variable).unwrap();

read_line appends input (including the newline) into the mutable string. Calling .trim() afterward strips the trailing newline before parsing or storing.

Adding tasks

let id = tasks.len() as u32 + 1;
tasks.push(Task { id, name: name.trim().to_string() });

The ID is derived from the current vector length, so it increments automatically. to_string() converts the &str slice into an owned String that the struct can hold.

Viewing tasks

for task in &tasks {
    println!("  ID: {}  Name: {}", task.id, task.name);
}

Iterating with &tasks borrows the vector immutably — no ownership is moved, so the data remains usable afterward.

Deleting tasks

tasks.retain(|task| task.id != id);

retain keeps only the elements for which the closure returns true. It's the idiomatic Rust way to filter a vector in place without allocating a new one.

Handling invalid input

let choice: u32 = match choice.trim().parse() {
    Ok(num) => num,
    Err(_) => {
        println!("Invalid input. Please enter a number.");
        continue;
    }
};

parse() returns a Result. Matching on it explicitly forces you to handle the error case — there's no silent failure.

Running the App

cargo run

Cargo compiles and runs in one step. Try adding a few tasks, viewing them, and deleting by ID.

What You Learned

Concept	Where it appeared
Structs	`Task` definition
Vectors	`Vec<Task>` for storing tasks
Ownership and borrowing	`&tasks` in the view loop
Pattern matching	`match` on menu choice and parse result
Error handling	`Result` from `.parse()`
In-place filtering	`retain` for deletion

What to Build Next

This app stores tasks in memory only — they disappear when the process exits. Some natural next steps:

* File persistence — serialize tasks to a JSON or CSV file using serde_json
* Update support — add a menu option to rename a task by ID
* Better IDs — use a UUID crate instead of a sequential counter so IDs stay stable after deletion

Supabase with React Native: A Complete Setup Guide

PEAKIQ — Sun, 24 May 2026 04:26:33 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/how-to-set-up-supabase-in-a-bare-react-native-app

This guide covers everything needed to integrate Supabase into a bare React Native project:

Installing Supabase and required polyfill packages
Setting up polyfills for Node and Web APIs
Securely persisting auth sessions using react-native-keychain
Querying data from your Supabase tables

Works with React Native 0.80+ and Supabase JS v2+ (2025)

Prerequisites

Node.js and React Native CLI installed
A Supabase account and project
A bare React Native app (not using Expo)

Step 1 — Install Supabase and Required Packages

Install the core libraries:

npm install @supabase/supabase-js react-native-get-random-values react-native-url-polyfill base-64 react-native-keychain

Then install iOS pods:

npx pod-install

Step 2 — Create Polyfills for Node-like APIs

React Native does not include Node.js globals like Buffer, process, btoa, or atob. Create a polyfill file to patch them.

Create src/polyfills.ts:

// src/polyfills.ts

import 'react-native-url-polyfill/auto';
import 'react-native-get-random-values';
import { decode, encode } from 'base-64';
import { Buffer } from 'buffer';
import process from 'process';

// Base64 support
if (!global.btoa) global.btoa = encode;
if (!global.atob) global.atob = decode;

// Buffer and process globals
if (!global.Buffer) global.Buffer = Buffer;
if (!global.process) global.process = process;

Then import this file at the very top of index.ts or index.js, before any other import:

// index.ts

import './src/polyfills';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

The polyfill import must come first. Placing it after other imports can cause subtle runtime errors with URL parsing or random value generation.

Step 3 — Secure Auth Storage Using Keychain

Supabase needs a storage adapter to persist the auth session between app launches. Using react-native-keychain stores tokens in the iOS Keychain and Android EncryptedSharedPreferences — far safer than AsyncStorage.

Create src/utils/SecureStorage.ts:

// src/utils/SecureStorage.ts

import * as Keychain from 'react-native-keychain';

export const SecureStorage = {
  getItem: async (key: string) => {
    const credentials = await Keychain.getGenericPassword({ service: key });
    return credentials ? credentials.password : null;
  },
  setItem: async (key: string, value: string) => {
    await Keychain.setGenericPassword('user', value, { service: key });
  },
  removeItem: async (key: string) => {
    await Keychain.resetGenericPassword({ service: key });
  },
};

Step 4 — Set Up the Supabase Client

Create src/lib/supabase.ts and pass SecureStorage as the auth storage adapter:

// src/lib/supabase.ts

import { createClient } from '@supabase/supabase-js';
import { SecureStorage } from '../utils/SecureStorage';

const supabaseUrl = 'https://your-project.supabase.co';
const supabaseAnonKey = 'your-anon-key'; // Supabase dashboard > Settings > API

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: SecureStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false, // Not needed in mobile apps
  },
});

Step 5 — Test a Supabase Query

Import the client and run a query to confirm everything is wired up correctly:

import { supabase } from './lib/supabase';

const fetchData = async () => {
  const { data, error } = await supabase.from('test').select('*');
  if (error) {
    console.error('Supabase Error:', error.message);
  } else {
    console.log('Data:', data);
  }
};

Summary

Step	What you set up
Install packages	`supabase-js`, polyfills, `react-native-keychain`
Polyfills	`Buffer`, `process`, `btoa/atob`, URL support
Secure storage	Keychain adapter for iOS and Android
Supabase client	`createClient` with secure storage and auto token refresh
Query	`.from('table').select('*')`

Troubleshooting

No network on iOS 18.4+

If Supabase requests are silently failing on the iOS simulator or device running iOS 18.4+, use Proxyman to inspect network traffic and confirm requests are leaving the device correctly. This is a known iOS 18.4 simulator networking quirk.

Clean React Native Project: Caches, Dependencies, Builds

PEAKIQ — Sun, 24 May 2026 04:16:06 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/fully-cleaning-your-react-native-project

Stale caches and leftover build artifacts cause a large share of React Native build failures. This guide covers how to clean everything — dependencies, iOS build, Android Gradle, and simulators — and how to automate it with a single terminal alias.

Cleaning Cache and Dependencies

Run the following commands from your project root.

npm

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm -rf ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

Or as a single command:

watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm -rf ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && npm install && cd ios && pod update && cd .. && npm start -- --reset-cache

Yarn

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm -rf ios/Pods ios/Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData
yarn install && cd ios && pod update && cd ..
yarn start -- --reset-cache

Or as a single command:

watchman watch-del-all && rm -rf yarn.lock package-lock.json node_modules && rm -rf android/app/build && rm -rf ios/Pods ios/Podfile.lock && rm -rf ~/Library/Developer/Xcode/DerivedData && yarn install && cd ios && pod update && cd .. && yarn start -- --reset-cache

Cleaning the iOS Build

Clearing the Xcode build folder resolves most iOS-specific compile errors.

1. Open Xcode
2. Go to Product > Clean Build Folder
3. Or use the keyboard shortcut: Option + Shift + Command + K

Resetting Android Emulator Data

If your Android emulator is behaving unexpectedly, wipe its data.

1. Open Android Studio
2. Go to Tools > AVD Manager
3. Select your emulator and click Wipe Data

Cleaning the Android Build Cache

If the Android build is failing, clear the Gradle cache.

cd android && ./gradlew clean

For a full cache wipe:

cd android && ./gradlew cleanBuildCache

Automating Cleanup with an Alias

If you clean your project regularly, a shell alias saves significant time.

Step 1 — Open your terminal profile

For zsh (macOS default):

open ~/.zprofile

For bash:

open ~/.bash_profile

Step 2 — Add the alias

Paste this into the file:

alias cleanstart="watchman watch-del-all && killall -9 node && rm -rf yarn.lock package-lock.json node_modules ios/Pods ios/Podfile.lock android/app/build && npm install && cd ios && pod update && cd .. && npm start -- --reset-cache"

Step 3 — Apply the changes

source ~/.zprofile    # zsh
source ~/.bash_profile  # bash

Step 4 — Use it

From any project root, run:

cleanstart

When to Run a Full Clean

A full clean is worth doing when you see any of the following:

* Red build errors that appeared after pulling new changes
* Metro bundler showing stale module warnings
* iOS simulator crashing on launch after a dependency update
* Android Gradle sync failing with no clear error message

Summary

Area	Command
Node modules + pods	`rm -rf node_modules ios/Pods && npm install && pod update`
Metro cache	`npm start -- --reset-cache`
Xcode build folder	Product > Clean Build Folder
Android Gradle	`./gradlew clean` or `./gradlew cleanBuildCache`
Everything at once	`cleanstart` alias

React Native Live Timer with iOS Live Activities

PEAKIQ — Sun, 24 May 2026 04:00:05 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/building-a-live-timer-with-ios-live-activities-in-react-native

Integrate Lock Screen, Dynamic Island, and real-time updates with a native Swift bridge and React Native — no third-party Live Activity library needed.

By the end of this guide you will have:

A timer that updates live on the Lock Screen and Dynamic Island
Start, update, and stop controls called from JavaScript
A confirmation dialog and flash message on stop

Final Output

Start a timer from React Native
Live Activity shows the elapsed time since start, the start date, and a dynamic record ID
User can stop the timer and see a success flash message

Prerequisites

Before adding Live Activities, update your deployment target to iOS 16.1.

Open your main target in Xcode
Go to General > Deployment Info
Set Minimum Deployment Target to 16.1

Enable Live Activities in Info.plist

Open Info.plist, hover over Information Property List until the + button appears, then add the key Supports Live Activities and set it to YES.

Step 1 — Create the Native Module

Open Xcode

Navigate to ios/YourApp.xcworkspace and open the workspace in Xcode, not VS Code.

Add a new Swift file

Right-click the YourApp group inside Xcode (not the blue project icon)
Select New File > Swift File
Name it TimeRecordWidget.swift
When prompted, choose Create Bridging Header

The bridging header allows Swift to work alongside Objective-C in the same project.

Paste the native module code

//  TimeRecordWidget.swift

import Foundation
import ActivityKit
import React

@objc(TimeRecordWidget)
class TimeRecordWidget: NSObject {
  var pulseTimer: Timer?
  var pulseStep = 0

  @objc(startActivity:)
  func startActivity(data: NSDictionary) {
    guard let recordId = data["recordId"] as? String,
          let username = data["username"] as? String,
          let name = data["name"] as? String,
          let startDateString = data["startDate"] as? String else {
        print("Live Activity: Missing required fields")
        return
    }

    let formatter = ISO8601DateFormatter()
    formatter.formatOptions = [.withInternetDateTime, .withFractionalSeconds]

    guard let startDate = formatter.date(from: startDateString) else {
        print("Live Activity: Invalid date format: \(startDateString)")
        return
    }

    Task {
      if #available(iOS 16.1, *) {
        let attributes = TimeRecoredWidgetAttributes(
          name: name,
          recordId: recordId,
          username: username
        )
        let contentState = TimeRecoredWidgetAttributes.ContentState(
          startDate: startDate,
          pulseScale: 1.0,
          pulseOpacity: 0.7
        )
        let content = ActivityContent(state: contentState, staleDate: nil)
        do {
          let activity = try Activity<TimeRecoredWidgetAttributes>.request(
            attributes: attributes,
            content: content,
            pushType: nil
          )
          startPulseTimer(activity: activity)
        } catch {
          print("Failed to start Live Activity: \(error)")
        }
      }
    }
  }

  func updatePulseState(activity: Activity<TimeRecoredWidgetAttributes>, step: Int) {
    let pulseStates: [(CGFloat, Double)] = [(1.0, 0.7), (1.2, 1.0)]
    let pulseScale = pulseStates[step % pulseStates.count].0
    let pulseOpacity = pulseStates[step % pulseStates.count].1

    let newState = TimeRecoredWidgetAttributes.ContentState(
      startDate: activity.content.state.startDate,
      pulseScale: pulseScale,
      pulseOpacity: pulseOpacity
    )
    Task {
      let content = ActivityContent(state: newState, staleDate: nil)
      await activity.update(content, alertConfiguration: nil)
    }
  }

  func startPulseTimer(activity: Activity<TimeRecoredWidgetAttributes>) {
    pulseTimer?.invalidate()
    pulseTimer = nil
    pulseStep = 0
    pulseTimer = Timer(timeInterval: 1.0, repeats: true) { [weak self] timer in
      guard let self = self else { timer.invalidate(); return }
      self.pulseStep += 1
      self.updatePulseState(activity: activity, step: self.pulseStep)
      if activity.activityState != .active {
        timer.invalidate()
        self.pulseTimer = nil
      }
    }
    if let pulseTimer = pulseTimer {
      RunLoop.main.add(pulseTimer, forMode: .common)
    }
  }

  @objc(endActivity)
  func endActivity() {
    Task {
      if #available(iOS 16.1, *) {
        for activity in Activity<TimeRecoredWidgetAttributes>.activities {
          let currentState = activity.content.state
          let finalState = TimeRecoredWidgetAttributes.ContentState(
            startDate: currentState.startDate,
            pulseScale: currentState.pulseScale,
            pulseOpacity: currentState.pulseOpacity
          )
          let finalContent = ActivityContent(state: finalState, staleDate: nil)
          await activity.end(finalContent, dismissalPolicy: .immediate)
        }
      }
    }
  }

  @objc(checkPermission:rejecter:)
  func checkPermission(_ resolve: @escaping RCTPromiseResolveBlock, rejecter reject: @escaping RCTPromiseRejectBlock) {
    if #available(iOS 16.2, *) {
      resolve(ActivityAuthorizationInfo().areActivitiesEnabled)
    } else {
      resolve(true)
    }
  }
}

Step 2 — Register in the Objective-C Header

Add a new Objective-C file

Right-click the same YourApp group
Select New File > Objective-C File
Name it TimeRecoredWidgetHeader.m
Skip creating a bridging header if one already exists

Paste the bridge registration

//  TimeRecoredWidgetHeader.m

#import <React/RCTBridgeModule.h>

@interface RCT_EXTERN_MODULE(TimeRecordWidget, NSObject)

RCT_EXTERN_METHOD(startActivity:(NSDictionary *)data)
RCT_EXTERN_METHOD(endActivity)
RCT_EXTERN_METHOD(checkPermission:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)

@end

Step 3 — Define Attributes and Widget UI

Create a new Widget Extension

In Xcode, go to File > New > Target
Search for Widget Extension and select it
Name it TimeRecoredWidget
Enable Include Live Activity when prompted
Click Activate when asked to activate the scheme

This creates three files: TimeRecoredWidget.swift, TimeRecoredWidgetLiveActivity.swift, and TimeRecoredWidgetBundle.swift.

Important: Click TimeRecoredWidgetLiveActivity.swift, open the File Inspector on the right, and confirm your main app target is checked under Target Membership — not just the widget extension. This is the most common build failure cause.

Paste the Live Activity UI

Replace the contents of TimeRecoredWidgetLiveActivity.swift:

//  TimeRecoredWidgetLiveActivity.swift

import ActivityKit
import WidgetKit
import SwiftUI

struct TimeRecoredWidgetLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: TimeRecoredWidgetAttributes.self) { context in
            lockScreenView(context: context)
        } dynamicIsland: { context in
            dynamicIslandView(context: context)
        }
    }
}

// Lock Screen View
@ViewBuilder
func lockScreenView(context: ActivityViewContext<TimeRecoredWidgetAttributes>) -> some View {
    VStack(alignment: .leading, spacing: 12) {
        HStack(alignment: .center) {
            Image("action_icon")
                .resizable()
                .frame(width: 32, height: 32)
                .clipShape(RoundedRectangle(cornerRadius: 6))

            VStack(alignment: .leading, spacing: 2) {
                Text(context.attributes.name)
                    .font(.headline)
                    .foregroundColor(.white)
                Text("ID: \(context.attributes.recordId)")
                    .font(.footnote)
                    .foregroundColor(.white)
            }

            Spacer()

            HStack(spacing: 8) {
                Image(systemName: "clock")
                    .font(.footnote)
                    .foregroundColor(.red)
                Text(context.state.startDate, style: .relative)
                    .font(.headline)
                    .monospacedDigit()
                    .foregroundColor(.red)
            }
        }

        HStack {
            VStack(alignment: .leading, spacing: 4) {
                Text("Started at \(formattedDate(context.state.startDate))")
                    .font(.footnote)
                    .foregroundColor(.white)
                Text("User: \(context.attributes.username)")
                    .font(.footnote)
                    .foregroundColor(.white)
            }

            Spacer()

            Link(destination: URL(string: "yourapp://stop-timer/\(context.attributes.recordId)")!) {
                ZStack {
                    Circle()
                        .fill(Color.black)
                        .frame(width: 36, height: 36)
                        .overlay(Circle().stroke(Color.red, lineWidth: 2))
                    Image(systemName: "stop.fill")
                        .font(.system(size: 14, weight: .bold))
                        .foregroundColor(.red)
                }
            }
        }
    }
    .padding()
}

// Dynamic Island View
func dynamicIslandView(context: ActivityViewContext<TimeRecoredWidgetAttributes>) -> DynamicIsland {
    DynamicIsland {
        DynamicIslandExpandedRegion(.center) {
            HStack {
                Image("action_icon")
                    .resizable()
                    .frame(width: 24, height: 24)
                    .clipShape(RoundedRectangle(cornerRadius: 4))

                VStack(alignment: .leading, spacing: 2) {
                    Text(context.attributes.name)
                        .font(.headline)
                        .foregroundColor(.white)
                        .lineLimit(1)
                    Text("ID: \(context.attributes.recordId)")
                        .font(.footnote)
                        .foregroundColor(.white)
                }

                Spacer()

                HStack(spacing: 8) {
                    Image(systemName: "clock")
                        .font(.footnote)
                        .foregroundColor(.red)
                    Text(context.state.startDate, style: .relative)
                        .font(.headline)
                        .monospacedDigit()
                        .foregroundColor(.red)
                }
            }
            .padding(.horizontal, 12)
        }

        DynamicIslandExpandedRegion(.bottom) {
            HStack {
                VStack(alignment: .leading) {
                    Text("Started at \(formattedDate(context.state.startDate))")
                        .font(.footnote)
                        .foregroundColor(.white)
                    Text("User: \(context.attributes.username)")
                        .font(.footnote)
                        .foregroundColor(.white)
                }

                Spacer()

                Link(destination: URL(string: "yourapp://stop-timer/\(context.attributes.recordId)")!) {
                    ZStack {
                        Circle()
                            .fill(Color.black)
                            .frame(width: 36, height: 36)
                            .overlay(Circle().stroke(Color.red, lineWidth: 2))
                        Image(systemName: "stop.fill")
                            .font(.system(size: 14, weight: .bold))
                            .foregroundColor(.red)
                    }
                }
            }
            .padding(.horizontal, 12)
        }
    } compactLeading: {
        Image("action_icon")
            .resizable()
            .frame(width: 28, height: 28)
    } compactTrailing: {
        HStack(spacing: 4) {
            Text(context.state.startDate, style: .timer)
                .font(.system(size: 16, weight: .heavy))
                .foregroundColor(.red)
            Circle()
                .fill(Color.red)
                .frame(width: 20, height: 20)
                .opacity(context.state.pulseOpacity)
                .scaleEffect(context.state.pulseScale)
                .animation(.easeInOut(duration: 0.5), value: context.state.pulseOpacity)
        }
    } minimal: {
        Circle()
            .fill(Color.red)
            .frame(width: 10, height: 10)
    }
    .widgetURL(URL(string: "yourapp://action-timer/\(context.attributes.recordId)"))
    .keylineTint(.red)
}

func formattedDate(_ date: Date) -> String {
    let formatter = DateFormatter()
    formatter.dateFormat = "dd MMM, h:mm a"
    return formatter.string(from: date)
}

Define the Attributes model

Create a new Swift file TimeRecoredWidgetAttributes.swift in your main app target:

//  TimeRecoredWidgetAttributes.swift

import Foundation
import ActivityKit
import SwiftUI

public struct TimeRecoredWidgetAttributes: ActivityAttributes {
    public struct ContentState: Codable, Hashable {
        var startDate: Date
        var pulseScale: CGFloat
        var pulseOpacity: Double
    }

    var name: String
    var recordId: String
    var username: String
}

React Native Integration

Triggering start from JavaScript

import { Alert, NativeModules, Platform } from 'react-native'
import { showMessage } from 'react-native-flash-message'
import { checkLiveActivityPermission, showLiveActivityPermissionAlert } from '@utils/checkLiveActivityPermission'

const TimeRecordWidget = NativeModules.TimeRecordWidget

const payload = {
  recordId: "1823",
  username: "manoj@example.com",
  name: "Time Record",
  startDate: new Date().toISOString()
}

const onStartActivity = async () => {
  if (Platform.OS !== 'ios') return
  try {
    const permitted = await checkLiveActivityPermission()
    if (!permitted) {
      showLiveActivityPermissionAlert()
      return
    }
    TimeRecordWidget?.startActivity(payload)
  } catch (error) {
    console.error(error)
  }
}

Stopping with confirmation and flash message

const onEndActivity = () => {
  Alert.alert(
    'Stop Timer',
    'Are you sure you want to stop the timer?',
    [
      { text: 'Cancel', style: 'cancel' },
      {
        text: 'Stop',
        style: 'destructive',
        onPress: () => {
          TimeRecordWidget?.endActivity()
          showMessage({
            message: 'Timer stopped successfully',
            type: 'success',
            duration: 2000,
            autoHide: false,
            hideOnPress: true,
            icon: 'auto',
            floating: true,
          })
        },
      },
    ],
    { cancelable: true }
  )
}

Summary

Step	What you do
Create Swift file	`TimeRecordWidget.swift` with `@objc` methods
Create `.m` file	`TimeRecoredWidgetHeader.m` for RCT bridging
Add Widget target	Widget Extension with Live Activity enabled
Define attributes	`TimeRecoredWidgetAttributes` for timer state
Connect React Native	Call methods from JS via `NativeModules`

Result

A timer starts and displays live on the Lock Screen and Dynamic Island
Shows the started date and a record ID in the UI
Stoppable from React Native with a confirmation dialog and success feedback

Tips

Use .timer text style for live-updating elapsed time without any manual refresh logic
Avoid updating the activity state more than once per second to preserve battery life
This same pattern extends to pause, resume, and progress percentage with minimal changes

Troubleshooting — Build Issues

If you get build errors related to Swift support, add this inside target 'YourApp' do in your Podfile:

use_frameworks! :linkage => :static

Then reinstall pods:

cd ios && pod install

Enable VSCode Terminal IntelliSense for Faster Development

PEAKIQ — Sun, 24 May 2026 03:48:54 +0000

Originally published on PEAKIQ

Source: https://www.peakiq.in/blog/enable-terminal-suggestions-in-vscode-boost-developer-productivity

Unlock VSCode Terminal IntelliSense

Requires: VSCode 1.90+ · Shell Integration enabled

Your terminal just got smarter. VSCode's integrated terminal now ships with context-aware IntelliSense — auto-suggestions for commands, file paths, git branches, npm packages, and CLI arguments, all as you type. It's one setting flip away.

What You Get

Once enabled, the terminal becomes genuinely intelligent:

Workflow	Before	After
Switch git branch	Type full branch name	`git co` → Tab through branches
Navigate dirs	Type full path	`cd src/com` → Tab-complete
Install packages	Remember package name	`npm i` → Suggestions from `package.json`
Recall commands	↑ scroll through history	`Ctrl+Alt+R` smart history picker

Quick Enable

Follow these four steps to activate terminal suggestions immediately:

Open VSCode Settings — Press Ctrl+, (Windows/Linux) or Cmd+, (macOS).
Search for the setting — Type terminal integrated suggest in the search bar.
Enable the toggle — Check Terminal › Integrated: Suggest: Enabled.
Restart your terminal — Open a new terminal with Ctrl+Shift+` or run Developer: Reload Window.

Tip: You can also add "terminal.integrated.suggest.enabled": true directly to your settings.json for instant effect.

Advanced Configuration

Fine-tune the behavior with these settings in your settings.json:

{
  "terminal.integrated.suggest.enabled": true,
  "terminal.integrated.suggest.quickSuggestions": true,
  "terminal.integrated.suggest.suggestOnTriggerCharacters": true,
  "terminal.integrated.suggest.selectionMode": "insertItem"
}

What each option does:

quickSuggestions — Auto-shows suggestions based on what you've typed, no manual trigger needed.
suggestOnTriggerCharacters — Fires on -, /, and Space — key moments in command building.
selectionMode: "insertItem" — Tab inserts the suggestion inline. Use "selectItem" to fully replace the token.
runOnEnter — Execute the accepted suggestion immediately with Enter, not just Tab.
upArrowNavigatesHistory — Set false to use ↑ for shell history instead of cycling the suggestion list.

Shell Integration Setup

Terminal IntelliSense depends on shell integration — VSCode's mechanism for detecting command boundaries and exit codes. Without it, suggestions are limited.

Automatic (Recommended)

Shell integration activates automatically for bash, zsh, fish, pwsh, and Git Bash when launched from VSCode. Ensure this is enabled:

{
  "terminal.integrated.shellIntegration.enabled": true
}

Verify: Hover over a terminal tab. If it shows "Rich", shell integration is fully active and IntelliSense is at maximum capability.

Manual (for complex setups)

For custom dotfiles, remote environments, or niche shells, inject the integration script manually.

bash / zsh — add to ~/.bashrc or ~/.zshrc:

[[ "$TERM_PROGRAM" == "vscode" ]] && \
  . "$(code --locate-shell-integration-path bash)"

fish — add to ~/.config/fish/config.fish:

string match -q "$TERM_PROGRAM" "vscode"
and . (code --locate-shell-integration-path fish)

PowerShell — add to $PROFILE:

if ($env:TERM_PROGRAM -eq "vscode") {
  . "$(code --locate-shell-integration-path pwsh)"
}

Power Workflows

Once active, these patterns become second nature:

Git branch navigation

git checkout   # Tab → shows all local/remote branches
git co feat    # Tab → filters to branches starting with "feat"

Directory traversal

cd src/comp    # Tab → completes to src/components/
ls ../con      # Tab → resolves relative paths instantly

npm workflows

npm run        # Tab → lists scripts from package.json
npm install r  # Tab → suggests installed packages matching "r"

Keyboard shortcuts

Shortcut	Action
`Tab`	Accept suggestion
`Ctrl+Space`	Force-open suggestions anywhere
`Ctrl+Alt+R`	Smart history picker with fuzzy search

Troubleshooting

No suggestions appearing?

Confirm terminal.integrated.suggest.enabled is true.
Hover the terminal tab — it must show "Rich", not "Basic".
Run Terminal: Clear Suggest Cached Globals from the Command Palette.
Reload: Ctrl+Shift+P → Developer: Reload Window.

Suggestions are wrong or stale?

Run Terminal: Clear Suggest Cached Globals to wipe the index.
Check for conflicting completions in your ~/.bashrc or ~/.zshrc.

Shell integration not activating?

Make sure the terminal is launched from VSCode, not attached externally.
For WSL, SSH, or Dev Containers, use the manual script injection above.
Minimum versions: VSCode 1.77+ for shell integration, 1.90+ for IntelliSense.

Windows + Git Bash: Verify Git is on your PATH. Run code --locate-shell-integration-path bash in an external terminal to confirm the path resolves correctly.

Summary

VSCode Terminal IntelliSense is a low-friction, high-impact upgrade. One setting, one restart, and your terminal starts completing branches, paths, and package names the way your editor already does for code.

Enable it, confirm shell integration shows Rich, and let Tab do more of the work.