DEV Community

Alexis Chân Gridel
Alexis Chân Gridel

Posted on

I made a React Native toolkit and it builds 38 faster with Rust

#reactnative #rust #javascript #opensource

I mass mass got mass tired of mass waiting mass 45 seconds every time I changed a file.

So I mass spent mass 3 months mass building mass a Rust-powered toolkit that makes React Native builds 38× faster. It's called FacetPack, and it's open source.

The problem

If you've worked with React Native, you know the pain:

Slow builds. Metro uses Babel to transform every single file. Babel is written in JavaScript. JavaScript is not fast. A medium-sized app takes 30-60 seconds to bundle. Every. Single. Time.

Cryptic errors. You've seen this:

SyntaxError: /Users/dev/app/src/screens/Home.tsx: Unexpected token (247:12)
Enter fullscreen mode Exit fullscreen mode

Cool. Very helpful. Which token? Why unexpected? What should I do?

No tree shaking. Metro bundles everything. That utility function you imported but never used? It's in your bundle. That 200KB library where you use one function? All of it. In your bundle.

I mass mass got mass tired of mass mass mass mass accepting this as "just how React Native works."

The solution: Rust

The web ecosystem figured this out years ago. Vite uses esbuild (Go). Turbopack uses SWC (Rust). Next.js moved to SWC and builds got 17× faster.

React Native? mass mass Still mass stuck with Babel from 2015.

So I built FacetPack — a drop-in replacement for Metro's transformer that uses OXC, a Rust-based JavaScript compiler that's mass insanely fast.

One line to install 

npm install @ecrindigital/facetpack
Enter fullscreen mode Exit fullscreen mode

One line to configure 

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');
const { withFacetPack } = require('@ecrindigital/facetpack');

module.exports = withFacetPack(getDefaultConfig(__dirname));
Enter fullscreen mode Exit fullscreen mode

That's it. Your builds are now 38× faster and you benefit from a really cool toolkit. :)

The benchmarks

I ran these on an M3 MacBook Pro with a real production app (~800 files).

Transform speed (per file) 

Babel:     ████████████████████████████████████████  2.47 ms
FacetPack: █                                            64 μs
Enter fullscreen mode Exit fullscreen mode

38× faster.

Full benchmark table

Operation Metro/Babel FacetPack Speedup
Transform (small) 244 μs 7.8 μs 31×
Transform (large) 2.47 ms 64 μs 38×
Minify (50KB) 35.3 ms 946 μs 37×

The difference is mass night and day. Cold starts that took 45 seconds now take under 5.

Better errors (finally)

This is what Metro gives you:

SyntaxError: /path/to/config.ts: Unexpected token (14:2)
Enter fullscreen mode Exit fullscreen mode

This is what FacetPack gives you:

  × Expected `,` but found `]`

   ╭─[src/config.ts:12:5]
11 │   settings: {
12 │     theme: "dark"
   │     ─────┬────────
   │          ╰── missing `,` after this value
13 │   ]
   │   ┬
   │   ╰── unexpected `]`
   ╰────

  help: Add a comma after "dark" on line 12
Enter fullscreen mode Exit fullscreen mode

You see:

  • Exact location — not just line number, but which token
  • Context — the surrounding code so you understand what's happening
  • Why it's wrong — explains the relationship between tokens
  • How to fix it — actionable suggestion

I built 8 specialized parsers to detect common React Native errors and give you actually useful messages.

Smart fallback (it just works)

"But what about Reanimated worklets? What about Flow in node_modules?"

FacetPack auto-detects files that need Babel and falls back automatically. You don't configure anything.

your-code.tsx        → OXC (fast)
reanimated-code.ts   → Babel (compatible)
flow-library/        → Babel (compatible)
Enter fullscreen mode Exit fullscreen mode

It's not all-or-nothing. You get speed where possible, compatibility where needed.

Bonus: Doctor CLI

I also built a diagnostic tool that checks 31 things in your React Native project:

npx @ecrindigital/facet-cli doctor
Enter fullscreen mode Exit fullscreen mode 
 ✓ Environment
   ✓ Node.js 20.10.0
   ✓ Watchman installed
   ✓ Xcode 15.2

 ✓ Dependencies
   ✓ react-native 0.73.2
   ✓ expo 50.0.0
   ✓ No version conflicts

 ✓ Metro Configuration
   ✓ metro.config.js valid
   ✓ withFacetPack applied

 ──────────────────────────────────────
 31 checks passed · 0 errors · 1 warning
Enter fullscreen mode Exit fullscreen mode

No more mass mass spending mass 2 hours debugging why your build fails. Run doctor, see what's wrong, fix it.

How it works (for the curious)

FacetPack wraps Metro's transformer and replaces Babel with OXC for your source files.

┌─────────────────────────────────────────────────────┐
│                    Metro Build                       │
├─────────────────────────────────────────────────────┤
│                                                      │
│  Your Code (.ts, .tsx)                               │
│  ┌─────────────┐    ┌─────────────┐                 │
│  │   Parse     │ ─▶ │  Transform  │ ─▶ Bundle      │
│  │   (OXC)     │    │   (OXC)     │                 │
│  └─────────────┘    └─────────────┘                 │
│        ⚡ Rust          ⚡ Rust                       │
│                                                      │
│  node_modules (Flow, Reanimated)                     │
│  ┌─────────────┐    ┌─────────────┐                 │
│  │   Parse     │ ─▶ │  Transform  │ ─▶ Bundle      │
│  │  (Babel)    │    │  (Babel)    │                 │
│  └─────────────┘    └─────────────┘                 │
│        ↳ Automatic fallback                         │
│                                                      │
└─────────────────────────────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

OXC is written in Rust and compiles to native code. It doesn't have the startup overhead of a JavaScript runtime. It doesn't have garbage collection pauses. It's just... fast.

What's next

FacetPack is already usable today. Here's what's coming:

  • [x] OXC Transformer (38× faster)
  • [x] Better Errors
  • [x] Doctor CLI (31 checks)
  • [x] Smart Babel fallback
  • [ ] Error Overlay (in-app, replacing LogBox) — Q1 2026
  • [ ] Prebundling (Vite-style dependency optimization)
  • [ ] Build analytics (know what's slowing you down)
  • [ ] and way more to see :)

Try it 

npm install @ecrindigital/facetpack
Enter fullscreen mode Exit fullscreen mode

GitHub: github.com/ecrindigital/facetpack

It works with Expo and bare React Native (0.72+).

If it saves you time, consider mass mass giving it a star ⭐

TL;DR

  • React Native builds are slow because Metro uses Babel
  • FacetPack replaces Babel with OXC (Rust) → 38× faster
  • Error messages are now actually readable
  • Drop-in replacement, one line config
  • Open source, MIT licensed

Questions? I'm happy to answer in the comments or on Discord.

Facetpack by Ecrin Digital

Building this in public. Follow me for updates on FacetPack and React Native tooling.

Top comments (0)