Three React Native Tools for the Work That Happens Before Runtime

React Native gets blamed for plenty of runtime problems. Some of the most expensive problems happen earlier.

An image path survives review and fails on the device. A dependency migration begins before anyone knows which native modules need attention. A Figma selection becomes component code only after someone manually translates spacing, vectors, text, and colour tokens.

Those are different problems, but they share one trait: they are easier to fix before the app runs.

That is the idea behind my React Native Toolkits: three narrow tools that generate or report deterministic evidence first, leaving judgment and optional AI work for later.

1. Turn asset strings into generated symbols

rn-typed-assets replaces paths such as this:

<Image source={require("../../../assets/toast/info.png")} />

with a generated registry:

import { Assets } from "../generated/assets.gen";

<Image source={Assets.toast.info} />;

Install it as a development dependency:

npm install --save-dev rn-typed-assets
npx rn-typed-assets generate

Generation and organization can run without TypeScript, but the audit command requires typescript to be available in the project as a peer dependency.

The generator scans images, SVGs, and Lottie files, normalizes their names into stable keys, catches collisions, and writes both TypeScript output and a manifest. The audit command compares that manifest with actual source usage and can report unused or unknown entries.

The migration path is also part of the product. generate --inplace can rewrite stale require() calls, imports, and generated dotted references after assets move. Content hashes let the tool match a renamed file with the same bytes rather than guessing from its new path.

It is the SwiftGen/FlutterGen idea brought to React Native: filenames become build-time evidence instead of runtime folklore.

2. Audit New Architecture readiness without changing the project

rn-newarch-ready answers a narrower question: what needs review before enabling React Native's New Architecture?

npm install --save-dev rn-newarch-ready
npx rn-newarch-ready

Version 0.1.2 reads package.json, Android gradle.properties, installed dependencies, and local codegenConfig signals. It can enrich unknown packages with the public React Native Directory dataset, or run offline using local evidence only.

The wording matters. A package without a positive signal is unknown, not “unsupported.” A directory flag is likely-supported, not locally confirmed support. Executable Expo configuration and runtime compatibility stay outside a static audit.

The tool changes nothing. It reports ready or needs-review and exits with a machine-readable status. Migration remains a separate decision.

That conservatism is the feature. A readiness tool that confidently invents compatibility is just a migration bug with a nicer CLI.

3. Convert Figma through a deterministic intermediate representation

Design to NativeWind takes a selected Figma subtree and generates React Native plus NativeWind component code.

It converts Auto Layout, spacing, colours, and text properties; exports vectors into react-native-svg; can hoist repeated subtrees; and maps imported Tailwind or CSS colours into project tokens.

The pipeline first extracts the Figma selection into an intermediate representation. The generator then produces code through ordinary TypeScript modules that can be tested without the Figma runtime. Optional LLM cleanup comes after deterministic generation for naming and structure, not before it.

You can install the plugin from its Figma Community listing.

One principle, three boundaries

These tools do not attempt to become one giant React Native assistant.

• rn-typed-assets owns asset discovery, generation, migration, and audit.
• rn-newarch-ready owns conservative static evidence for a migration decision.
• Design to NativeWind owns reproducible design extraction and code generation.

The shared principle is smaller: make the mechanical layer deterministic, inspectable, and scriptable. Then let a developer—or an AI agent—make decisions from evidence rather than reconstructing state from screenshots and error messages.

If one of those pre-runtime chores keeps returning to your backlog, start with the matching tool at React Native Toolkits. You do not need a platform. You need the boring layer to stop lying first.