A look at React Native Skia in 2022 and what kept Christian Falch, Colin Gray, and William Candillon busy. Plus, a look at what's ahead for the library in 2023.
Overview
The article reviews the advancements made in React Native Skia over the past year, highlighting its integration with Skia for 2D graphics rendering across multiple platforms. It discusses the transition to a declarative architecture, the introduction of the Skia DOM API for UI thread rendering, and future plans for enhanced animations and text layouts.
What You'll Learn
1
How to integrate Skia with React Native for cross-platform graphics rendering
2
Why using the Skia DOM API enhances performance in UI rendering
3
When to utilize declarative drawing in React Native applications
Prerequisites & Requirements
- Familiarity with React Native and 2D graphics concepts
- Basic understanding of JavaScript Interface (JSI)(optional)
Key Questions Answered
How does React Native Skia improve performance for graphics rendering?
React Native Skia improves performance by using a custom renderer that operates independently of the JavaScript thread, allowing for faster frame rendering. The introduction of the Skia DOM API enables drawings to be executed directly on the UI thread, significantly reducing delays, especially on low-end devices.
What platforms does React Native Skia support?
React Native Skia supports iOS, Android, the Web, and Node.js. This cross-platform capability is achieved through a custom React Renderer that allows Skia drawings to be expressed declaratively without coupling to the DOM or Native APIs.
What are the main bottlenecks identified in the original alpha release?
The main bottlenecks identified were the reliance on the JavaScript thread for drawing commands, which delayed rendering, and excessive JSI allocations when handling numerous components, which added noticeable overhead. These issues prompted the development of the Skia DOM API.
How does the Skia DOM API enhance the rendering process?
The Skia DOM API allows for declarative expression of Skia drawings without dependencies on the JavaScript thread, enabling faster rendering on the UI thread. It also optimizes performance by only recomputing necessary parts of the drawing state upon updates.
Key Statistics & Figures
Number of releases in the past year
90
React Native Skia had its first alpha release in December and has since seen 89 additional releases, showcasing rapid development and community engagement.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React Native
Framework used for building mobile applications that integrate with Skia for rendering.
Graphics Engine
Skia
2D graphics engine used for rendering within React Native applications.
Development Tool
Expo
Tool used to streamline the development and deployment of React Native applications.
Interfacing Technology
Javascript Interface (jsi)
Interface that exposes the C++ Skia API to JavaScript in React Native.
Key Actionable Insights
1Leverage the Skia DOM API to enhance rendering performance in your React Native applications.By using the Skia DOM API, you can ensure that your graphics render quickly and efficiently, especially on devices with limited resources. This is particularly beneficial for applications that require smooth animations and transitions.
2Consider integrating Skia with Expo for rapid development and deployment.Expo provides a streamlined environment for React Native development, allowing you to quickly test and deploy applications that utilize Skia for graphics rendering across multiple platforms.
3Utilize the community extensions available for React Native Skia to enhance functionality.By exploring existing community projects like Skottie and React Native Vision Camera, you can expand the capabilities of your applications without increasing the core library size.
Common Pitfalls
1
Relying too heavily on the JavaScript thread for rendering can lead to performance bottlenecks.
This happens because locking the JavaScript thread for rendering can delay the display of graphics, especially during screen transitions. To avoid this, utilize the Skia DOM API to execute drawings directly on the UI thread.
2
Excessive JSI allocations can degrade performance when handling numerous components.
When a drawing contains thousands of components, the overhead from JSI allocations becomes significant. Developers should aim to minimize JSI usage by leveraging the Skia DOM API for more efficient rendering.
Related Concepts
Declarative Rendering In React Native
Performance Optimization Techniques In Graphics Rendering
Integration Of Skia With Other Frameworks