Time to Fly

Here at Landing, our mission is to empower  creative expression and bring a global community together. Last March, we launched our  mobile experience using React Native to build a social app where users can make and share digital  collages. With this technology, we've empowered over 600,000 users on both iOS and Android Android  to share the unique creations of the world. We are so excited to partner with  React Native Skia, moving forward to bring additional functionality to our  app, including

text and paragraph support, improved graphics rendering on both Android  and iOS, as well as custom painting, shaders, and filters to empower creativity for our users. Hello, React Native developers. I hope you are  well. William here recording from beautiful Zürich Switzerland. Thank you, Landing, for trusting  React Native Skia. While working on this project, we have seen incredible examples of  indie developers, flourishing startups, and large tech companies using it to power  incredible exp

eriences in React Native. Shopify, of course, uses it to power rich analytics to  millions of entrepreneurs. Voidpet, which won the Google Play Store app award last year, uses React  Native Skia to bring us these rich and delightful creatures. Starlink also uses React Native Skia  to power analytics and other delightful effects. Stadion brings sport fans around the world  the best of the Six Nations tournament. Orca, the leader in sea navigation, uses React Native Skia  to bring rich navigation

data to its users. Stōkt, the leading app for indoor climbing, uses Skia  to guide climbers with their problems. And the Zenith Academy Plus app uses React Native Skia to  provide incredibly engaging studying experiences. And Flipcards, the photo-matching game, is just  incredibly playful. We are absolutely blown away to see everything you have built using React  Native Skia. So this morning, we would like to take the next step in our relationship  with the industry and to get things started, he

re are the people who are championing  React Native Skia from Shopify, Colin Gray, principal developer of mobile, and Mustafa  Ali, director of engineering. Good morning, and welcome to this special announcement. We are  celebrating a significant milestone in the world of React Native development, the release of React  Native Skia 1.0. Two years ago, Shopify saw the huge potential of a small open source project  from Christian Falch and William Candillon. And we've been thrilled to see how it ha

s grown to  become a mainstay in the React Native ecosystem. Within Shopify, we've watched it evolve from an  interesting proof of concept to powering our most visually stunning views. There's simply no better  way to render custom graphics and interactive animations. As we'll see from today's demos, we  have the privilege of having five members of the React Native Skia community walk us through  five features that are part of this release. Thank you to all the people who have contributed  bug f

ixes and reported issues. You have helped make this a community-driven project, and we  couldn't have gotten to 1.0 without your support. Very excited, and we hope you are as well. Now,  back to you, William. So, React Native Skia version 1.0 and five members of the React Native  Skia community are going to walk you through five of the new features. Now, before we get started,  when we make an announcement such as this one, we like to end with a call for action, an invitation  to play with and b

uild upon the work we just presented. And there is a software engineer that  has been answering us in ways that has absolutely captured our imagination, and this morning,  we were eager to share his story with you. Thank you, Daehyeon, for inspiring us with your  work. Now, let's talk about text layouts. From day one, React Native Skia was able to  display text, but it was not possible to break lines automatically, nor was it possible  to apply layouts, nor was it possible to mix and match syste

m fonts with custom app fonts.  And that's exactly what the new Paragraph API does. And to show you this new feature used  in the wild, Terry Sahaidak from Margelo. At Margelo, we help our clients build great  user experiences in React Native. Recently, we've used Paragraph API to build a modern  chat UI, where our users can both send regular messages or drag and drop them anywhere on  the screen, move around, change font, color, or even use complex text presets, keeping the  interaction buttery

smooth, and text razor sharp. The Paragraph API deals with the  layout and word breaking for us. These are things that were previously hard  to do in React Native, but not anymore. We are collaborating with the Skia  team on building such experiences, discussing the best practices and  performance. Thank you, Terry, this looks so cool. And that's the new Paragraph  API. You can use it to mix and match system fonts, such as emojis, with custom fonts for  consistent rendering across platforms, an

d to build rich text layouts. But  React Native developers, wait a second. What unites us is our love for React's  declarative model. There is something so incredibly joyful about the JSX  syntax and React's composition model. And we benefit from a strong type system, a type  system which, by the way, has become leaps and bounds ahead of programming languages which  were typed from the ground up. But I digress. So when we are looking at these examples, what we  really want to be looking at are t

hese beautifully deep-nested text nodes and components in the JSX  syntax. And that's the declarative Paragraph API, available as a technical preview today and to be  released as stable later this year. The Paragraph API is one of the most advanced Skia features,  and what we do is expose it in React Native. And now the question is, how good can we make  this integration? And it's a twofold answer. The first fold is about finding a sensible  declarative model for these APIs in React. And now let

's talk about the second fold, which  is performance. And we start with animations. Last year, thanks to the help of Software Mansion, we  announced the reanimated integration with Skia. We aimed at enabling developers to animate on the UI  thread using the animation library they know and love. And we also wanted to take advantage  of the best of the React Native reanimated ecosystem as to offer. For instance, here we  use gesture-handler on the Skia Canvas. Now let's follow the thread of integr

ating with  reanimated. And let's have a look at three kinds of animations. Interactive animations,  like diving into analytics using gestures, for instance. Large animations, where we have  a simple animation driver, here a gesture, and we use it to interpolate the state of  thousands of elements. And fully scripted animations. There are no surprises there. The  whole world is known in advance. Let's talk about interactive animations. In a Skia scene, there are  usually tons of Skia objects bei

ng exposed through JSI. And to animate them efficiently, there  are a couple of principles we need to follow. First, of course, they need to be mutated on  the UI thread. And then we need to make sure we are not creating any new objects at animation  time. We want to avoid these allocations for two reasons. First, they are somewhat slow. They are  not slow per se, but relative to everything else we are doing at animation time and considering  the amounts of objects we are dealing with, it's rela

tively slow. And the lifetime of these objects  is a single animation frame. This means that we either need to explicitly delete them or making  sure that they are being efficiently garbage collected, and we don't want to do that. What we  want to do is forget everything I just said and provide you with animation hooks, which are the  easiest ways to build animations in React Native Skia. And behind the scenes, we are going to take  care of building these animations as efficiently as possible. I

'd like to show you two examples.  This is the usePathInterpolation hook that allows you to nicely interpolate across paths. We think  it's a very easy way to interpolate. But again, behind the scenes, we are going to make sure it's  the fastest way as well. Here our paths have been nicely prepared, but to interpolate across any  path, here it is, same story, but Flubber prepared the paths for us using vertices. We have the  usPathValue hook, which is similar, but we can use it for any path muta

tions. Here we add a little  bit of noise to a little voidpets, for instance. Now I know someone was of vested interest in  these new animation hooks, and that's Carlos Pereira from Shopify. The Shopify app empowers  merchants to manage the Shopify store free on the mobile device. One of the most used features  in the app is the analytics dashboard that allows merchants to keep up polls on their business  while on the go. Leveraging the capabilities of victory-native-xl, a library built atop Rea

ct  Native Skia, Reanimated, and Gesture Handler. We successfully built new interactive  charting components that perfectly suit our needs. The best part, performance was  never a concern, even on low-end devices. We had a lot of fun and we are  excited to build more. Thank you, Carlos. With Reanimated and Skia, you  can also create textures. Textures are drawings and images that live on the GPU  and that can be shared across canvases. Now, to create these textures, there are a lot  of nitty-gri

tty you need to attend to, but we want to provide you with animation hooks  that do all of this work automatically for you. There is a useImageAsTexture that will allow  you to load large images directly in the GPU, and you can also useTexture for creating  textures from Skia drawings. And you can even use the imperative API if needed. Here we  have a path, and we can draw circles along this path. Skia nicely provides us with all the path  information we need, and if we draw enough circles and w

e interpolate the color of the circles  nicely, it looks like a nice gradient along the path. And we can even play with the circle  radius to give a nice variable stroke effect. But that's a lot of circles, so what we want  to do is to create a texture where we can only draw a few circles on every frame, and this will  animate extremely fast. Textures are enabling a new API I am pretty excited about, the Atlas API.  You can use it to draw large scenes, you set up your texture, define your drawin

g elements, and  transformations, and you can even do z-indexing by sorting your elements. And to walk you  through this new API, Enzo Mangano from Worklet. I'm Enzo, a React Native software engineer, but  you may probably already know me thanks to my YouTube channel called Reactiive. On my channel,  I really love the process of creating from scratch and sharing React Native tutorials made with the  help of Reanimated as Skia. Almost a year ago, I stumbled upon a crazy UI demo made by Philip  Da

vis on Twitter about the beautiful 3D sphere animation. When I saw it, I knew that I had  to recreate the same animation but this time with React Native. The beauty of the animation  is that it looks much more difficult than it actually is. After placing the squares on the  Skia canvas, the trick was just finding out the reference point to the new scaling, and just  like magic, out of nowhere, a 3D sphere appears. One year ago, I was pretty happy with the final  result, but when I tried the new

Atlas API, and together with William, we tried  to recreate the same animation, I was totally blown away about the performance  improvement of Skia. Actually, the process of re-adapting the animation first to Reanimated  and then to the new Atlas API really helped me appreciate even more all the improvements that  have been in React Native Skia over the past year, and I can't wait to explore what this package  holds for us in the future. Thank you Enzo, this looks really cool. So we've looked at

  interactive animations, large animations, now let's talk about scripted animations, and  we can do it in three simple steps. First step, you can actually use the Atlas API to animate  sprites. Here we have our little VoidPet, and we can actually use the Atlas API to  make him breathe fire. We have the sprite, and from there animating it is trivial. Step  two is our new support for animated images, GIFs, or WebP. Again, here we provide  you with the right animation hooks to do so. And for the l

ast step, the final boss of  scripted animations, Hanno Gödecke from Margelo. Hey everyone, my name is Hanno, and I am a  software engineer at Margelo. I'm excited to introduce you to React Native Skottie, a library  we've built on top of React Native Skia. This library is specifically designed for rendering  Lottie animations with optimal performance. Lottie React Native is the go-to library for  creating visually appealing animations in our apps. However, during performance  reviews of React N

ative apps, we've noticed a consistent issue  related to Lottie React Native. Using React Native Skia as a foundation, and,  with William's help, developed React Native Skottie to boost animation performance.  Let's have a look at how you can improve the performance of your app today. It  is as simple as replacing your existing Lottie component for this Skottie component.  Afterwards, profile the performance of your app. In our example, the performance  on this screen improved significantly. Not

only that, but Skottie can provide better  app startup time, as well as providing shorter times for mounting a screen containing a Lottie  animation. Right now, React Native Skottie is provided as a standalone view. In the future,  we will be able to use our Lottie animations in any Skia canvas to create even more interesting  animations. Thank you, Hanno, for building this great package, and thank you, Margelo, for  all the great work you do for the community. Speaking of performance, we looke

d  at examples on iOS and Android, but there is a third platform we support, the Web. What does performance mean for us on the web?  Our bet is that it means shipping the whole React Native Skia experience on a 20 kilobyte polyfill.  We call it canvaskit-js, we introduced it last October as a private beta, and we wanted to get  a sense of what kind of applications people would build with it. Hey, I bet you're pretty curious as  well. So thankfully, Kim Chouard has us covered. Hi web and mobile d

evelopers, this is  Kim, recording from beautiful Bordeaux, France. I'm really excited today to show you how  to push the boundaries of React Native Skia from mobile to the web. At Odissei Music, we're working  hard to revolutionize the way people learn and play with instruments. That means building  instruments that people can play anywhere, like the travel sax, but also hyper-performance  universal apps and game. Why hyper-performance, you might ask? Well, in music, it's  all about time, right

? So in our game, if our animation analysis even  is just a few milliseconds delay, everything is out of tempo, so it's a big no-no.  Luckily, React Native Skia is here to help. But hey, a demo is worth a thousand  words, right? So let me walk you through Melo Skia, an open-source game  demo built with React Native Skia. It runs great on iOS and Android, 60  frames per second on the UI thread, but now, let's bring this puppy to the web. Historically, a WebAssembly file was required  to load Reac

t Native Skia on the web, but the 2.9 megabyte file size might be a showstopper in  a web scenario. That's when canvaskit-js comes in, loading already existing code from  Skia directly from your browser. Now, by adding those two lines of code,  you can load the canvaskit-js file, tiny, tiny twenty kilobytes, and you have runs  everywhere while keeping the web devs happy. So check it out for yourself,  clone the demo on GitHub, and experience what it feels  like using the final tech stack. Thank

you, Kim. This is really, really  cool. And now that I'm seeing this, I am pretty convinced that canvaskit-js can  help a range of React Native Skia applications to ship on the web with a small bundle size. So  today, we are making canvaskit-js open source, still a very experimental project, but we think it  has strong legs. And the way it is built is very interesting. There are two layers. The first one,  we call it canvas2d@next. We asked the question, how would the canvas2d API would look lik

e if  it could power React Native Skia experiences out of the box? It would contain support for image  filters and layers, as well as providing support for basic path operations. And this is effectively  what we have built with this layer. Once we have our canvas2d on steroid up and running, all we  have to do is provide a compatibility layer. If we do our job well, a Skia client should almost be  unable to distinguish between canvaskit-wasm and canvaskit-js. We wanted to put this idea to the  t

est and run canvaskit-js on a Flutter web app, which has absolutely no prior knowledge  of canvaskit-js. Not pixel perfect, but pretty close. So we think that it can  help Skia clients outside React Native to deliver rich web experiences with a small bundle  size. And we also think that this is a great API for vanilla web development. So putting any Skia  clients aside in order to break the silos between graphic APIs and have really performant web  experiences. We had a look at the Atlas API, wh

ich was able to draw large scenes in a single  call. This API is one or two orders of magnitude faster on the web than its canvas2d counterpart.  We will soon be able to provide support for such API, part of canvaskit-js as well. And this  is exciting because if you look at some of our examples, they go beyond just supporting  React Native or other Skia clients on the web, but rather trying to offer a better web experience  with a small bundle size period. And these were the five things I wanted

to show you this morning.  Rich text layouts using the new paragraph API, animation hooks, which are the easiest and fastest  way to build animations in Skia, the Atlas API to build and animate large scenes and not skip a bit  even on low end Android devices, efficient Lottie animations using the new React Native Skottie  package and canvaskit-js, a small but promising library to deliver rich web experiences with  React Native Skia under a very small bundle size. Now, this release is the result

of  an incredible collaboration across many different industry players. From  independent developers to flourishing startups and large tech companies, these  community-driven efforts are part of our DNA as a React Native developers. And  if you ask me, this is probably why React Native is so technically elegant and  why its journey as a developer so joyful. Now, this release has already created  incredibly positive momentum and we have some really fun stuff  in the pipeline. So yeah, I am looki

ng forward to talk to you  soon and until next time, happy hacking.