35

HIGH-PERFORMANCE GRAPHICS WITH REACT NATIVE SKIA

 2 years ago
source link: https://dev.to/marvelken/high-performance-graphics-with-react-native-skia-2al9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Cover image for HIGH-PERFORMANCE GRAPHICS WITH REACT NATIVE SKIA
marvelken

Posted on Feb 18

HIGH-PERFORMANCE GRAPHICS WITH REACT NATIVE SKIA

Quick summary
React native SKIA would be able to bring the SKIA library into React Native to ease a lot of difficult and impossible things in React Native. We would cover the theoretical aspect in React Native Skia, so whenever the React Native project is ready for production we could have more access and better control of this library.

Goals
We would deeply explain why SKIA was needed and what we are expecting the Skia library to make possible for react native developers. While this is still Alpha, I would cover this deeply in theory, so whenever the project Is ready, The library would enable us to build high-performance graphics.

Introduction;-
React Native Skia brings the SKIA library to React Native to help build graphics and open doors to a lot of things that were impossible and difficult in the past. Graphics has been a pain in the neck in react native. It's a huge innovation with SKIA, I must note. With SKIA we can use just a few lines to create awesome graphics, it would no longer take many lines of code anymore to create beautiful and top-notch-looking applications.

One of Facebook's self-proclaimed biggest mistakes was believing so much in HTML over NATIVE, well you could ask why? Retrieving data on a mobile version of Facebook was slow and at the same time unstable. They resulted in the creation of React-Native. It is used for the development or creation of android, IOS, and windows giving a free hand to developers to use the React framework In consonant with native enablements or capabilities, But React-Native is incapacitated in various ways. That's where the React-Native Skia library plays its part.
Since React Native SKIA is still in alpha, in other to build something unique and at the same time complex we would have to wait for its full production so we get to use its full qualities in building a lot of things, But then what does React-Native Skia library have to offer to React-Native development environment? This article answers that in-depth.

Skia Graphics Engine
This is an open-source 2D graphics library well written in C++. A few months back I was on a project where I had to make use of React Native, Google came through, and I got a notification that read "React Native Skia", Shopify brought to us a library using SKIA in React Native. Going through the documentation, I had been hoping to get on some newfound power using SKIA.

React Native Skia
SKIA powers the Google Chrome rendering engine. Supposedly when you see something on the google chrome browser you should recall that it is powered by SKIA. Flutter as well is built on SKIA this explains the hedge it had in the past over React Native. React Native Skia brings in the Skia library and all of its functionalities to React Native making it possible to do just so much that has not been done in the past.

Things You Can't Do With React Native

There is a list of Advanced 2D use cases that can not be done on React Native and I feel before we discuss how revolutionary Skia would be in React Native this should be highlighted.

Graphics Performance
2D graphic capabilities are the hole to feel and SKIA has a handful of solutions to offer. Graphics are one of the most tiring weaknesses in react native.

Svg And Inset Shadows On Android

Making certain apps where you get to render huge SVG's would result in bottle-necked performance. As a fan of neomorphic designs I get to run into issues on how drop shadows on Android are pretty difficult, This is such a basic functionality and for quite a long period it has been absentmindedly attended to, you get to see graphics run five frames per second on a good mobile device. which is not the best.

Text Animation

This is problematic in React Native as we have had tons of libraries and projects being developed to tackle this issue but then their success and results were barely sustaining as they all had their solutions that didn't stand the test of time.

What To Expect From The Skia Library

React native SKIA would provide us with these;-

Lower Number Of Required Lines Of Code

Here I would provide an example of how Skia Would enable streamlined codes. I think a good example of this will be charting. Take a look at how much code it requires to create it in Skia (from examples in shopify/react-native-skia repo) and then take a look at an average animated linear chart library code. It is clearly streamlined.

High Performance

SKIA provides way better performance on both Android and IOS, but it's more visible on android. A lot of programmers do feel JavaScript is slow but for some reason, it's so much much faster with React Native SKIA. A lot of optimization is expected for this to function perfectly fine. Not trying to overwhelm us, but once you get a taste of the Skia module, going back to regular React-Native(without Skia) would be a lot difficult, who doesn't like an easy path.

Inset Shadow
With react native SKIA we can always inset shadows, it's amazing because it's not just a box-shadow implementation we get from this library, It's a general-purpose Integration we could use to create any high-performing graphics. In cases where you want to custom UI components with a bit of styling here and there and some primitive like shadows. Instead of doing all of these, you write a Maximum of five lines of Skia and you are out of there.

Text Animation
Text animation is made easier as we get animation by default. This would allow us to build incredible smooth 2D animations to React Native and also be able to use a React like API Declarative syntax.

Why Is This So Hyped

With this integration we will be able to fill up the missing gap in React Native framework, I would give a very rough explanation of why this is so hyped.
React Native is for dealing with UI elements, and interacting with them, even for complex animation which right now it can handle quite well but when it comes to arbitrary animation, like drawing an Octagon and rotating it, not very good since it can not be easily derived from a native UI element, This is where Skia comes into play. It gives you an engine like the Web Canvas to handle things like this, I just hope you understand it.

I highlighted a couple of issues react native have in our previous sub-topic and now I have highlighted all possible solutions SKIA has for us.

A Guide To The Installation Process Of React-Native Skia

STEP1
Let's set up the development area of React Native, since React Native Skia project is recently focused on ubuntu 18 to speed up project development, During your setting up of React Native development area you could encounter a KVM error trying to run AVD on Android studio, there are quick fixes out there and you can also try this:
Open your Terminal
Sudo apt install qemu-kvm and run this
Add user "username" kvm replace "username" with your name and run this
Restart pc

Hope it turns out just fine for you, if this doesn't work out simply contact Ubuntu developers to help you out.

STEP 2
we would need to install REACT NATIVE SKIA but then I wouldn't go into that as Shopify has done a great job making available the installation process you can simply use this link.

Conclusion
We would start building immediately after the project is done. React Native Skia allows us to create things that were impossible to create in React Native before, so I think it's a revolutionary library. We have been able to materialize what could not be done in React Native and what good is Skia library to React-Native, We also went through the installation process. Special thanks to Chris and Williams and to all React Native developers it's a huge breakthrough.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK