Overview
Declarative GPU 2D canvas for React Native, backed by Tencent's tgfx.
1import { Blur, Canvas, Circle, LinearGradient, RoundedRect, Text } from 'react-native-tgfx'
2export const App = () => (
3 <Canvas style={{ flex: 1 }}>
4 <RoundedRect x={24} y={24} width={354}
5 height={360} r={32}>
6 <LinearGradient colors={GRAPE}
7 start={TOP} end={BOTTOM} />
8 </RoundedRect>
9 <Circle cx={292} cy={296} r={64}
10 color="#fde68a">
11 <Blur blur={28} />
12 </Circle>
13 <Text text="Hello, tgfx" x={52}
14 y={104} fontSize={44} color="#fff" />
15 </Canvas>
16)
9:41
import { Canvas, Circle, 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" />
</Canvas>
)
}Animated values update on the UI thread with no JavaScript work per frame.
- Shapes, paths, text, images, atlases, meshes
- Paint as a component, inherited through
Group - Gradients, noise, colour matrices, blurs, shadows, masks
- Runtime shaders with UI-thread uniforms
- Camera frames, snapshots, PDF and SVG export
- Headless scenes, also inside a worklet
- Vulkan on Android, Metal on iOS
- Prewarm at launch
Alpha release.