Vishaal KarthikReact Native / Mobile Engineer
India ·

I build mobile products and the systems behind them.

Architecture, performance, reliability and the product experience on top. 4 years shipping iOS and Android.

See the workGet in touch
Now
Software Engineer, Workhall
Based
India

01 / What I build

A mobile application is a system. I work across the product surface and the layers that keep it fast, observable and shippable.

  1. Mobile productsInterfaces for real workflows.Dynamic forms and editable tables · Location-aware field workflows · Cross-platform interaction designLocation field
  2. Application architectureSystems that make the next feature cheaper.Component registry · Form and state architecture · 24 → 8 mobile layout systemMobile Grid & Canvas System
  3. PerformanceKeep heavy screens responsive.Virtualized long lists · Fast offline storage · Image and render optimizationRendering & offline storage
  4. Reliability & securityMake production behaviour explainable.Crash and breadcrumb investigation · Production monitoring · OWASP-mapped remediationVAPT remediation
  5. Platform & deliveryMove safely from commit to device.OTA delivery · React Native upgrades · Store and native build workflowsRelease & reliability
  6. Cloud & integrationsConnect the product to the world around it.API integration · Authentication flows · Push infrastructureSelected work
02 / Selected work

Work I’m proud of.

Seven systems from a large enterprise React Native app — what I built, why it was hard, and what changed.

mobile-grid-system.caseArchitecture / Layout systems

Mobile Grid & Canvas System

A web layout should not have to be rebuilt to work on mobile.

A mobile layout system that translates a web-first 24-unit grid into an 8-unit responsive grid with automatic row flow, plus separate Fit and Scroll rendering for canvas-like cards.

web grid to responsive mobile grid
24 → 8
fit or scroll for canvas-like cards
2 card modes
A

Standard mobile grid

Derived spans, then automatic row placement

responsive flow

Web configuration 24 units

A 9/24B 15/24C 18/24D 12/24
derive spanwidth + boundaryplace in row

Mobile layout 8 units

A 3/8B 5/8C 6/8D 4/8
  1. 0124-unit source
  2. 02derive mobile span
  3. 03check row boundary
  4. 04flow to next row
  5. 05render at screen width
B

Canvas-like card

Positioned children keep their internal composition

separate rendering path

Canvas card rendering only

Scale the complete composition

Canvas composition

ABC

Mobile viewport

ABC
complete composition visible
component-registry.caseArchitecture / Reusable systems

Component Registry

A new field type used to mean editing a giant switch. Now it means registering one component.

A self-registering registry that replaced a central conditional renderer — one rendering path for app mode, form mode and widgets. I proposed it, built it and led its adoption across the team.

files changed per new component
3 → 1
files migrated in the refactor
67
Read the write-up ↗

Places to touch for a type: every context

AppRenderer.tsx

switch (field.type) {
  // 5 other cases…
  case 'date': return <DateField />
}

FormRenderer.tsx

switch (field.type) {
  // 5 other cases…
  case 'date': return <DateField />
}

WidgetRenderer.tsx

switch (field.type) {
  // 5 other cases…
  case 'date': return <DateField />
}

Simplified for clarity. The real refactor touched 67 files.

performance.casePerformance

Rendering & offline storage

Users never say “great frame times”. They say the app feels good.

FlashList virtualization, MMKV storage and image compression across the heavy screens — long lists, large forms, image-laden records.

vapt-remediation.caseSecurity / OWASP Mobile

VAPT remediation

Security isn’t a separate phase. It’s part of engineering.

Turning a third-party VAPT report and a long Dependabot queue into shipped fixes — WebView hardening, dependency upgrades, secure configuration.

VAPT findings remediated
16+
Dependabot alerts resolved
200+
dynamic-forms.caseProduct / Complex UI

Dynamic forms & editable tables

A form is a state machine with a keyboard attached.

The mobile side of configuration-driven forms and editable tables — fields, rows and cells, through focus and validation, into state and finally the API payload.

  1. Fields
  2. Rows
  3. Cells
  4. Focus
  5. Validation
  6. State
  7. Payload
#Item textQty numberStatus select
1
2
3requiredrequired
Page 1 / 1

POST /records2 errors

{
  "form": "site-audit",
  "rows": [
    {
      "item": "Valves",
      "qty": 12,
      "status": "open"
    },
    {
      "item": "Fittings",
      "qty": 4,
      "status": "done"
    },
    {
      "item": "",
      "qty": null,
      "status": "open"
    }
  ],
  "valid": false
}

row 3 · item required (+1 more)

This one is real — type in the table. Arrow keys and Enter move between rows.

release-reliability.caseRelease engineering / Reliability

Release & reliability

Shipping a fix shouldn’t take longer than finding it.

A Stallion-based OTA pipeline for same-day fixes, a two-build architecture that keeps internal testing out of production, and Sentry and Grafana to triage what users report.

production hotfix turnaround
Days → same day
separate bundle IDs, Firebase projects and OAuth clients
2 builds
  1. Application
  2. Events
  3. Breadcrumbs
  4. Transactions
  5. Errors
  6. Sentry
  7. Diagnosis
Sentry.init({
  dsn: DSN.production,
  environment: 'production',
  sampleRate: rates.production.errors,
  tracesSampleRate: rates.production.traces,
});
// real users: signal over volume

Breadcrumb trail

Illustrative trail and config. The decisions — environments, DSNs, sampling — are the real ones.

location-field.caseProduct / Field workflows

Location field

An address is a label. The coordinates are the value.

A production location field for dynamic mobile forms: address search, raw coordinates, a fixed-centre map picker and explicit offline, read-only and disabled states.

field users logging site visits each day
≈400

Supporting case study Platform / React Native

The React Native upgrade, one hop at a time.

Moving a large production app from 0.77 to 0.86 in controlled hops — and onto the New Architecture (Fabric / Turbo Modules) — without a long-lived branch or a production incident.

0.77 → 0.86
in intermediate, verified hops
0
migration-related production incidents
Read the write-up ↗
areavN+1vN+2vN+3target
Dependencies111
Android build111
iOS build11
Native modules11
JS API changes11
Architecture1111

$ upgrade vN+1 …

✕ dependencies: peer dependency conflict

✕ android build: Gradle / CMake configuration

✕ native modules: module fails to compile / link

✕ architecture: behaviour drift check

Open issues
16
Releasable
Yes, every hop

Illustrative model of the strategy — areas are real, counts are not.

  1. 01

    Incremental strategy

    Intermediate versions instead of one jump — build, run the critical flows, fix, then move on.

  2. 02

    Dependency compatibility

    A compatibility map before every hop; libraries upgraded or replaced when they blocked it.

  3. 03

    Native build failures

    Gradle, CMake and linking errors worked through hop by hop, not all at once.

  4. 04

    Android and iOS

    Two platforms moving at different speeds, both verified at every step.

  5. 05

    Native modules

    Modules that stopped compiling or linking under new versions and Turbo Modules.

  6. 06

    Release risk

    The app stayed releasable throughout, with its existing architecture preserved.

03 / Experience

From features to ownership.

Jan 2023 — Present

Software Engineer

Workhall · Coimbatore

The iOS and Android app of an enterprise no-code / low-code platform, from one React Native codebase.

  1. 01 Features

    Shipping product features across iOS and Android.

  2. 02 Systems

    Building the reusable pieces other features stand on.

  3. 03 Architecture

    Shaping how the app is structured, built and released.

  4. 04 Ownership

    Code quality, security remediation, reviews and hiring.

Scope today

  • React Native development
  • Mobile architecture
  • Performance
  • Security / VAPT
  • Release engineering & OTA
  • Observability
  • Code & solution-design reviews
  • Technical interviewing
04 / Credentials

Trained, and certified.

Education

9.42/ 10 CGPA

Department Rank Holder

B.E. — Mechatronics Engineering

Thiagarajar College of Engineering, Madurai · 2019 — 2023

  • AWS Certified Cloud PractitionerAmazon Web Services· 2024
  • Microsoft Azure FundamentalsMicrosoftAZ-900· 2025
  • Oracle Generative AI ProfessionalOracle· 2025
  • Oracle Multicloud ArchitectOracle· 2025
  • Google Data Analytics Professional CertificateGoogle· 2021
  • Google IT Support Professional CertificateGoogle
05 / Side projects

Projects & open source.

Some shipped, some still being built, one running live on this page. On a desktop, drag the windows around.

bench / 8 items
npm / rn-rich-text-editorOpen source

rn-rich-text-editor

A rich text editor component for React Native, built on WebView: formatting, lists, headings, media, smart paste, read-only mode and keyboard handling.

  • Also authored react-native-geocodex (600+ downloads) — lightweight geocoding and reverse geocoding on the OpenStreetMap API.

11,000+ downloads

  • React Native
  • WebView
  • Open source

npm ↗GitHub ↗

Rich text, natively in React Native. Smart paste keeps formatting.

npm i rn-rich-text-editor
audit-rn — zshCLI tool

v0.1 shipped

audit-rn

OWASP-mapped static analysis CLI for React Native security.

  • Three AST-based checks: M1 hardcoded secrets, M8 insecure WebView, M9 sensitive keys in AsyncStorage.
  • Built with @babel/parser and @babel/traverse.
  • TypeScript
  • Babel AST
  • OWASP Mobile
  • CLI

npx audit-rn ./src

3 findings · OWASP Mobile Top 10

src/api/client.tsM1

// TODO: move to envconst API_KEY = 'a7f3c9e1b2d84f06';

AST VariableDeclarator › StringLiteral

A secret compiled into the JS bundle can be pulled out of any install.

Example output on sample files.

kalibr.appSide project

In development

Kalibr

A calm daily perception calibration app — 90 seconds a day.

  • Randomised micro-tests — reaction, colour discrimination, focus, memory, contrast, wide focus — on a seeded RNG, so everyone shares the daily challenge.
  • Scored against your own baseline, not raw numbers: “Perception Weather”, from Sharp to Foggy.
  • A 30-day Fingerprint with drift detection.
  • Blur as the visual language for perception state. No leaderboards.
  • React Native
  • Skia
  • Reanimated
Day 12+5%vs. your baseline

30-day Fingerprint · sample data · drag to scrub

bloom.appSide project

In final development

Bloom

A privacy-first menstrual health tracker.

  • All processing on-device, no cloud accounts — sensitive data stays local by design.
  • Cycle prediction, symptom and mood tracking, personalised insights.
  • React Native
  • Expo
  • On-device storage
recycler.demoLive demo

Cell recycling, visualised

How FlashList-style lists stay fast: a thousand items, a handful of views. The badges are real — React reuses the same DOM nodes as you scroll.

  • Virtualization
  • Recycling
  • Performance
view 1Item #1
view 2Item #2
view 3Item #3
view 4Item #4
view 5Item #5
view 6Item #6
view 7Item #7
view 8Item #8
view 9Item #9
view 10Item #10
Items
1,000
Views mounted
10
Rebinds
0

Scroll the list ↑

nook — desktopSide project

Concept / early build

Nook

A premium desktop wellness companion, built to feel nothing like another Pomodoro timer.

  • An animated avatar companion that lives near the taskbar.
  • Cinematic fullscreen break overlays and guided break activities.
  • Plant/pet gamification, ambient time-of-day and weather effects, rich sound design.
  • Motion-first, glassmorphic UI with spring animations and a calm palette.
  • Tauri 2
  • React
  • Desktop (Windows / macOS / Linux)
orbis — webSide project

Orbis

An interactive learning platform built around a 3D globe, designed to spark geographic curiosity through exploration.

  • React
  • Three.js
hearth.appSide project

Hearth

A shared calendar for families, teams and friends — shared calendars, recurring events, drag-to-reschedule and a tiny avatar for whoever added each event.

  • React 19
  • TypeScript
  • Supabase
  • Also builtYouTube Educational FilterA Manifest V3 Chrome extension that filters YouTube down to educational and useful content.Chrome MV3 · JavaScript

06 / WritingCurated here · 10 in the archive

Writing

Notes on mobile engineering, systems and the occasional detour into AI — on Medium, and in Stackademic, JavaScript in Plain English, AI in Plain English and Developers Global.

Follow on Medium ↗

FeaturedEngineering / React Native

What 3 Years of React Native Taught Me That the Docs Never Will

OEM quirks, native modules, 16KB page sizes and locale-specific date crashes — lessons from shipping production apps.

Three and a half years ago, I read the React Native docs top to bottom and thought I understood mobile development. I didn’t. What actually matters only reveals itself after your first production crash at 2 AM, your first furious enterprise client, and your first week debugging an issue that turned out to be a Samsung-specific OEM override.

17 May 20269 min readPublished in Stackademic

Read the article

Recent writingLatest 4

  1. 02Engineering / React NativeThe React Native Upgrade I Didn’t Want to Do in One Shot0.77 to 0.86 as a series of controlled hops — third-party libraries, native build failures and the Android migration underneath.5 minin Stackademic ↗
  2. 03ArchitectureFrom a Giant Switch to a Component Registry in React NativeWhen the renderer knows too much: moving component lookup out of one central switch.3 minin JavaScript in Plain English ↗
  3. 04Platform / AndroidTarget API 36: The Android 16 Change That Caught Us by SurpriseThe Android 15 edge-to-edge opt-out was only ever a temporary escape hatch.3 minin Stackademic ↗
  4. 05AI / IndustrySpaceX × Cursor: The $60 Billion Bet That Could Rewrite How the World CodesWhat each side gets from the deal, and what it means for the AI coding race.6 minin Medium ↗

Browse every article in a compact, chronological archive.

View all 10 articles

07 / Contact

Have something worth building?

Open to conversations about mobile architecture, React Native and the systems around them.