8/26/2023 0 Comments React native skia![]() ![]() In scenarios where you have a screen transition displaying many elements, including many Skia canvases, locking the JavaScript thread for each canvas creates a short delay that’s noticeable on low-end devices. But this dependency on the JS thread was preventing us from displaying the first canvas frame as fast as possible. Originally we only ran parts of the drawings on the JS thread to collect the Skia drawing commands to be executed on another thread. While the original alpha release was able to run some compelling demos, we quickly identified two significant bottlenecks: The React Native transform syntax can be used directly instead of matrices, and images can be resized in a way that should also feel familiar. We added a paint (an object describing the colors and effects applied to a drawing) to the original Skia drawing context to enable cascading effects such as opacity and some utilities that would feel familiar to React Native developers. Finally, we found our original declarative API to be quite productive it closely follows the Skia imperative API and augments it with a couple of sensible concepts. We integrated with Metal on iOS, and OpenGL on Android and the Web. On each platform, different GPU APIs are available. Thanks to Expo, all you need to get started with React Native Skia is a Web browser Part of this integration with Expo, it was important to ship full React Native Web support. We coordinated with the team at Expo to have the library working out of the box with Expo dev clients and integrate it as part of the Expo GO client. The main tool to have Web like development and release agility for React Native is Expo. Thanks to Remotion, React Native Skia video tutorials are renderer using React Native Skia.Īfter the first release we received a great response from the community and we had at heart to ship the library to as many people as possible. An interesting side-effect of this compatibility is that we could use our renderer on the Web immediately in fact, the graphic motions we built for the original project announcement were written using React Native Skia itself via Remotion, a tool to make videos in React. We immediately decided to make our host API fully compatible with it. It is also based on the Flutter drawing API, showing great relevance to our use-cases. We liked the CanvasKit API from the get-go: the Skia team did a great job of conciseness and completeness with this API. On the Web, the Skia API is available via CanvasKit, a WebAssembly build of Skia. On React Native, the Skia host API is available via the JavaScript Interface (JSI), exposing the C++ Skia API to JavaScript. Because the renderer is not coupled with DOM or Native APIs, we can use it for testing on Node.js. The React renderer runs on iOS, Android and Web. Because this renderer has no coupling with DOM nor Native API, it provides a straightforward path for the library to be integrated onto new platforms where React is available and provided that the Skia host API is available as well. This allows us to use the same renderer on iOS and Android, the Web, and even Node.js. React Native Skia relies on a custom React Renderer to express Skia drawings declaratively. One Renderer, Three Platforms (and Counting. ![]() We’re going on what kept Christian Falch, Colin Gray, and I busy and a look at what's ahead for the library. We went from offering a model that decently fit React Native and Skia together to a fully-tailored declarative architecture that’s highly performant. We wondered: How should these two pieces of technology play together? Last December, we published the first alpha release of React Native Skia and eighty nine more releases over the past twelve months. ![]() With the latest advances in the React Native architecture, allowing direct communication between the JavaScript and native sides, we saw an opportunity to provide an integration for Skia, arguably the most versatile 2D graphic engine. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |