You’re reading The React Native Rewind #65 .

Still reading here? Join the community instead.

Get The React Native Rewind in your inbox, plus the welcome series.

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 ( ( ) => {…