For now, I'll be showing how I implemented Apple Pencil only. I plan on writing an article in the future on how I built the note-taking feature - but that would be a much longer post. Excited to see where this library takes the react native ecosystem. What's Nota? Forgive the copy: nota allows you to use your Apple Pencil to take notes on your iPad and syncs to Notion - take a glimpse at the header image above, that's nota (at least at the point of this writing)įor building the note-taking aspect for this app, I went with Shopify react-native-skia - an astounding library from the Shopify team. Import = Dimensions.This will be the first part of a series of articles where I write about my journey building Nota. If we want to create a rectangular shape with rounded corners, then the syntax for it will look like this: import React from 'react' The declarative API is similar to how we currently create UI in React Native using JSX syntax. It will be replacing the default react native bridge. This is a layer that offers “synchronous” communication between JavaScript and native code. React Native JSI is a core change in the re-architecture of React Native. An imperative API, which works with JSI (JavaScript Interface).A declarative API, which uses the default React Native renderer.React Native Skia offers two types of APIs to draw graphics: Using React Native Skia in a React Native app Now that we set our library up in both iOS and Android, we can now begin creating a beautiful user interface and graphics. To install Android NDK, you can follow these steps from the official Android docs. “The Native Development Kit (NDK) is a set of tools that allows you to use C and C++ code with Android” – Android Documentation Because most of the graphic rendering logic for React Native Skia is written in C++, we will need something known as NDK (Android Native Development Kit) for the communication between Java code and C++ code. Setting up our project in Android can be a bit complex if you’re not familiar with the environment. Now, we need to rebuild our iOS project so that we can use Skia in our React Native iOS projects.īuild the project from the terminal or directly from Xcode: yarn ios Once the package is downloaded and installed, we need to set up the project in our native iOS and Android projects.įor iOS, this is pretty straightforward - we just need to install the cocoa pods dependency. Note: once newer versions are released, there will likely be some changes and new features. Run the following in your terminal: yarn add Īt the time of writing, the latest alpha release version is 0.1.106, which we’ll use in this tutorial. react-native init Īfter we set our project up, let’s add React Native Skia. Let’s start by initializing a new react native project. Because the library is not yet published on npm, we need to download it from their GitHub repository. Let’s get started with library installation in a bare React Native project. You can find the complete code for this article in this GitHub repository. Note: The library is still in alpha stage and is not yet available on npm, thus, it is not completely stable yet. Thanks to Shopify, William Candollin, Christian Falch, and the entire dev team behind react-native-skia, we can now use Skia in our React Native applications to draw awesome graphics and create trendy UI concepts like Neumorphism and Glassmorphism. The library is sponsored and managed by Google, while the development is overseen by Skia’s engineering team. Skia is a popular open-source 2D graphics library used by major platforms like Google Chrome, Chrome OS, Android, and Flutter as their default graphics engine. Create high-performance graphics with React Native Skia He likes to solve competitive programming puzzles and enjoys gaming in his free time. Rupesh Chaudhari Follow Rupesh is a programming enthusiast who is currently working with React Native to build beautiful hybrid mobile apps.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |