Installation

1. Install

npm install react-native-tgfx@alpha react-native-nitro-modules

Animation, camera and video also need react-native-reanimated and react-native-worklets.

2. Build

npx react-native run-android

cd ios && pod install

3. Draw

App.tsx

import { Canvas, Circle, Group, Rect } from 'react-native-tgfx'

export default function App() {
  return (
    <Canvas style={{ width: 300, height: 140 }}>
      <Rect x={0} y={0} width={300} height={140} color="#101725" />
      <Circle cx={70} cy={70} r={44} color="#d98a4a" />
      <Circle cx={70} cy={70} r={44} color="#f2c088" style="stroke" strokeWidth={3} />
      <Group transform={[{ rotate: '12deg' }]}>
        <Rect x={140} y={34} width={72} height={72} color="#6aa9ff" />
      </Group>
    </Canvas>
  )
}

Rendering backend (Android)

Vulkan is the default. For OpenGL ES, add:

android/gradle.properties

TgfxVulkan=OFF

Prewarm (optional)

Call Tgfx.prewarm() in Application.onCreate (Android) or add a TgfxPrewarm key to Info.plist (iOS) so the first canvas mounts faster. See Performance § Prewarm at launch.

Camera (optional)

npm install react-native-vision-camera react-native-vision-camera-worklets

See Camera frames.