It's a GPU Art Attack!
Neil Buchanan never made a Big Art Attack with a pencil.
He laid thousands of everyday objects out on the floor, and then the camera pulled back to reveal a face.
Drawing thousands of things in React Native has usually meant the JS thread doing the maths, and dropped frames the moment it gets busy.
What's in the paint pot?
It wraps tgfx, Tencent's open-source 2D graphics engine, through Nitro Modules (Margelo's fast native module framework), and renders with Vulkan on Android and Metal on iOS.
Shapes, paths, text, images and runtime shaders are components inside a <Canvas>.
Props also accept a Reanimated shared value, so animations run on the UI thread with no JavaScript work per frame.
import { Canvas, Circle } from 'react-native-tgfx'
function Pulse() {
const r = useSharedValue(20)
useEffect(() => {
const grow = withTiming(60, { duration: 900 })
r.value = withRepeat(grow, -1, true)
}, [r])
return (
<Canvas style={{ width: 200, height: 200 }}>
<Circle cx={100} cy={100} r={r} color="#d98a4a" />
</Canvas>
)
}
The React and Reanimated imports are trimmed here, and the full version is in the animation docs.
Anything we can try at home?
Frames from VisionCamera can be drawn and shaded live, without copying the camera's buffer.
Scenes also export to PDF and SVG, or render headless with no React at all.
In Margelo's own benchmark against React Native Skia, 900 paths drew at 90 FPS to Skia's 18 on a budget Samsung.
Moving over is less scary with the agent skill, which teaches our coding agent the API and the Skia migration.
It's an alpha, installed with react-native-tgfx@alpha, so expect things to move.
Neil needed a crane to see the whole picture…
But we just need a <Canvas>.
Berlin, Dec 4: React Day + AI Coding Summit
Two conferences, one trip.
On December 4, Berlin hosts React Day Berlin and AI Coding Summit side by side, and on December 7 both continue online. React Day Berlin is all about AI for React developers: Claude Code, RSC, Next.js 16, TanStack, MCP and the Vercel AI SDK, with Kitze, Tejas Kumar, Sara Vieira and Mike Grabowski. AI Coding Summit goes deeper on agentic workflows, AI code review and production agent patterns, with 30+ talks and workshops. 800 devs in person, 5,000+ online.
And we are thinking on joining the party; come say hi!
Use code FRIENDS for 10% off.
👉 React Day Berlin &
Some Say It's 51 Times Faster
Some say it has never looked up a JNIEnv it didn't need.
Some say it skips the exception check on methods that can't throw.
All we know is, it's called Kolibri.
Łukasz Kosmaty (@lkosmaty) just lifted the bonnet on the Android side of Expo Modules 2.0, whose iOS side we covered in Issue #57.
Why build another JNI library?
JNI (the bridge that lets Kotlin and C++ call each other on Android) is the slowest step in every native module call.
React Native ships fbjni, which makes JNI safer by checking and cleaning up after every call, and pays for it every time.
Kolibri keeps that safety net, lets us take it off on hot paths, and stays close to raw JNI speed.
Where does the speed come from?
With fbjni, calling a method on a hybrid object (one object with a Kotlin half and a C++ half) costs five extra JNI calls just to find the C++ half.
Kolibri's Kotlin compiler plugin rewrites the method at build time so the C++ pointer is passed straight in.
// JavaScriptObject.kt
class JavaScriptObject(pointer: NativePointer) :
NativeObject(pointer) {
@NativeMethod
external fun hasProperty(name: String): Boolean
}
// roughly what the compiler plugin emits
fun hasProperty(name: String): Boolean =
hasProperty(nativePointer, name)
private external fun hasProperty(
pointer: Long,
name: String,
): Boolean
JS objects skip JNI too, travelling to Kotlin in a shared binary buffer instead of being built one Java object at a time.
That makes hybrid object calls 28 to 51 times faster, and gets a JS object to Kotlin 3 to 5 times faster.
Any catch?
The numbers come from a desktop JVM on an Apple M3 Pro, so phones will differ.
It's also one more library in our app, where fbjni comes free with React Native.
Somewhere, Clarkson is shouting POWERRR at a Kotlin compiler plugin.
👉 Inside the new JNI layer in Expo Modules 2.0
The first 0.89 release candidate brings a useAppState() hook, a global structuredClone and phrase-based lineBreak for Android text.
It also sweeps out the last bridge-era leftovers, so give your native modules a quick grep before the stable lands around December 7.
📦 React Native Screens 5.0 Beta 1
The first v5 beta supports React Native 0.88 and adds iOS modals that stay inside their own SplitView column instead of taking over the whole screen.
Android Stack v5 gets proper transition presets, and form sheets can finally say no thanks to Liquid Glass.
The Metro integration now runs zero Babel transforms, and web style updates got 2 to 8 times faster.
The catch is that you now need React Native 0.85 or Expo SDK 56, and the Babel plugin is on its way out.
V3 gestures get Begin, Deactivate and Finalize events, plus a long list of fixes for swipeables and pressables that misbehaved.
Pan velocity now reads zero when your finger rests before letting go, instead of pretending you flicked it.
Pager View has been rewritten as a function component, which is the one breaking change in this release.
It also stops fighting the ScrollView underneath it and finally puts the keyboard away when you swipe to another page.
A new Android profile prop gives each WebView its own cookie jar, so your logged-in tabs stop gossiping with each other.
Nitro Fetch now bridges XMLHttpRequest, so libraries that never heard of fetch get the fast path too.
It also drops your Authorization header on cross-origin redirects on Android, which is exactly where it belongs.
The new dimBlur prop blurs whatever sits behind the sheet instead of just tinting it grey.
It also fixes sheets turning see-through on iOS 27 and swallowing back presses on Android.
An intentionally small release adds a transparent prop to KeyboardExtender and makes KeyboardAwareScrollView more precise about where your caret is.
Tzvetan Mikov previewed a complete Intl implementation for Hermes built on ICU4X, at about 19MB per platform.
It's only a preview for now, but the days of polyfilling date formatting may be numbered.
