Forem: OGcodes

UI Kitten: Eva Icons in React Native

OGcodes — Tue, 23 Jun 2020 00:11:43 +0000

What is UI Kitten?

UI Kitten is React Native library which is based on Eva Design System, it's an Open Source React Native framework of UI components, it enables you to create customizable amazing UI layouts, packed with an awesome set of general-purpose UI components, giving you more time to focus on business logic and other aspects of your app while it takes care of your app's looks and the themes can be toggled in the runtime, without need to reload the application, how cool is that?

UI kitten being Eva Design System based gives us consistency and scalability in the development and design process.

UI Kitten Specifications

30+ general-purpose UI components with browser support for React Native Web.
Theming System: Light, Dark and Custom.
480+ general-purpose SVG Eva icons.
Eva Design System support.
UI Kitten Moment and Date functions: Modules allowing * UI Kitten components to work with dates.
Both JavaScript and TypeScript Supported.

Installation & Usage

New project:

npx react-native init MyApp --template @ui-kitten/template-js

If you build with TypeScript run :

npx react-native init MyApp --template @ui-kitten/template-ts

Existing project:

yarn add @ui-kitten/components @eva-design/eva react-native-svg

if you use Expo, you should use expo install react-native-svg@9.13.6 to install SVG package.

We will need to restart our bundler to make sure changes are made

yarn start --reset-cache

Setting up our application root

Output

Eva Icons:

Eva Icons is a pack of 480+ beautiful icons, UI kitten has it as a module for React Native applications to add it's Open Source, using Eva will enable full consistency with Eva Design System.

Eva Icons supports 4 animation types

Zoom.
Pulse.
Shake.
Infinite.

Eva Icon Installation & Usage

Install Eva Icons: yarn add @ui-kitten/eva-icons
Implementation:
Rebuild bundle: npx react-native run-android or npx react-native run-ios

Output:

Animated Icons:

Root file:

Output:

UI Kitten has a beautiful and rich documentation, do check it out.

Thanks for reading

I hope this was helpful, don't forget to like and share this article, you can tweet at @Godswillokokon if you have any questions or drop a comment below.

React Native: What You Need To Know About Hermes.

OGcodes — Sun, 10 May 2020 16:04:47 +0000

TL;DR:

Hermes is an open-source lightweight JavaScript engine optimized for React Native built by Facebook, It improves performance by decreasing memory utilization, reduces download size, and decreases TTI (Time To Interaction).

Prerequisites

If you are new to React Native and want to get started, here is a good resource you will find helpful.
For Windows users, make sure you have Microsoft Visual C++ 2015 Redistributable installed, you can check if it is installed by searching for “Microsoft Visual C++ 2015 Redistributable” after pressing the Windows key.

Introduction

On the 11th of July 2019, At Chain React 2019, Hermes JavaScript engine was announced running on React Native, It was first used internally by Facebook before it went open source. Before this, the React Native team at Facebook analyzed performance data and noticed that the JavaScript engine itself was a significant factor in start-up time and download size.

Why you should use Hermes

We built a new JavaScript engine we call Hermes. It is
designed to improve app performance, focusing on our
React Native apps, even on mass-market devices with
limited memory, slow storage, and reduced computing
power.

Facebook Team

The three main architecture Facebook focus on improving are :

Adapting garbage collection to mobile OSes constraints.
Ditching the JIT (just-in-time) compiler.
Precompiling the JavaScript source code.

Adapting garbage collection came with many reasons

Hermes adapting garbage collection aids to reduce the overall virtual memory consumption by implementing on-demand allocation in non-contiguous chunks that can be moved around and returned to the OS when no longer needed, Operating systems aggressively kill applications that use too much memory. When apps are killed, slow restarts are required and background functionality suffers.

The following are the features of the garbage collector :

On-demand allocation: Allocates VA (virtual address) space in chunks only as needed.
Noncontiguous: VA (virtual address) space need not be in a single memory range, which avoids resource limits on 32-bit devices.
Moving: Being able to move objects means the memory can be defragmented and chunks that are no longer needed are returned to the operating system.
Generational: Not scanning the entire JavaScript heap reduces time.

Why ditching the JIT compiler helps

A JIT compiler warm-up when an application starts, they have issues improving TTI and may even hurt TTI more by increasing it.
A JIT compiler adds to native code size and memory consumption, which negatively affects primary metrics.
A JIT compiler is likely to hurt the metrics we care about most, so Facebook chose not to implement it. Instead of focusing on interpreter performance as the right trade-off for Hermes.

Precompiling the JavaScript source code into bytecode helps.

Parsing and compilation directly reduce the time spent on any tasks at launch time.
Since the precompilation phase has more relaxed time constraints, bytecode generated is usually smaller and more efficient, this aids the compiler to apply whole-program optimizations such as function deduplication and string table packing.
Hermes bytecode can be mapped into memory without requiring to read the whole file in advance, which brings a huge improvement with slow flash memories and reduces the chances of an app being killed by the OS due to excessive memory usage which was an issue before now in React Native.
Hermes tries to be efficient through bytecode precompilation — rather than loading JavaScript and then parsing it. Hermes employs ahead-of-time (AOT) compilation during the mobile app build process to allow for more extensive bytecode optimization. Similar to the Fuchsia Dart compiler for iOS which is also an AOT compiler.

Hermes for iOS

Before version 0.64, Hermes did not have support for iOS and that is because Apple is forced to use JavaScriptCore and not V8 like Android devices.

JavaScriptCore is an optimizing virtual machine and it’s the built-in engine for Webkit.

WebKit is a browser engine used in the Safari web browser and every other iOS browser, it was built by Apple in C++ and runs on macOS, iOS, and Linux.

Fun-Fact: This engine was used by BlackBerry.

On the other hand, V8 is an open-source WebAssembly and JavaScript engine, it was built by Google in C++ also. V8 is used in Node.js and it runs on Chrome, Chromium, and lately, it is what powers the Microsoft Edge browser.

V8 implements WebAssembly and ECMAScript, and runs on Windows, macOS, and Linux.

Hermes opt-in on iOS

It’s 2021🎊🎊 and with the release of version 0.64 we are happy to now use Hermes to build on iOS as well. To enable Hermes on iOS, set hermes_enabled to true in your Podfile and run pod install.

Hermes with Proxy Support

We now have Proxy support to Hermes, enabling compatibility with popular community projects like react-native-firebase and mobx. If you have been using these packages you can now migrate to Hermes for your project.

Hermes for Android

Setting up Hermes is seamless and easy.
According to React Native’s awesome documentation, we will first start by editing our android/app/build.gradle file and setting enableHermes to true like so :

If we use ProGuard in our application, we will have to add rules in android/app/proguard-rules.pro like so :

For these changes to take effect we will need to clean build, so in our terminal, we will do like so :

$ cd android && ./gradlew clean

Finally, we are ready to build and test our app and we will do like so :

$ npx react-native run-android

Confirming if Hermes is enabled in our project

If we created a new app with $ npx react-native init AppName before setting up Hermes we will see that Hermes is enabled at the top-right corner of our app screen.

But if we had an existing project we can still test by making use of the global HermesInternal variable like so :

To see full benefits why we use Hermes, you can build a release version of your app to compare the differences and see improvements in app startup time and bundle size like so :

$ npx react-native run-android --variant release

Conclusion

In this article we have an understanding of the following things :

We now have Hermes Support for both Android and iOS.
Difference between Interpretation with React Native conventional engine and Bytecode precompilation with Hermes.
What Hermes does under the hood.

I will like to thank Tzvetan Mikov, Will Holen, and the rest of the Hermes team on their work to making Hermes a success.

Thanks for reading

I hope this was helpful, don’t forget to like and share this article, you can tweet at @Godswillokokon if you have any questions or drop a comment below.

React Native : How to upload an image to Cloudinary.

OGcodes — Mon, 30 Mar 2020 01:09:23 +0000

Prerequisites

Things you need to know are:

Familiar with React Native elementary setup, if not get started here, You can also check React Native awesome documentation here.
Basic understanding of Hooks, if not get started here.
Little or no knowledge of Cloudinary.

Tools Required ⚒️

Node >= v13.0.0.
React >= v16.9.0.
React Native CLI >= v0.61.5.
Android Studio, VSCode.
I will be using VSCode, You can download here.
If you are using VSCode, I use Lights Out theme by Nedy, Lovely theme.
Cloudinary Dashboard. You can signup here, If you do not have an account.

Introduction

In this article, we will be uploading an image from a mobile camera or gallery collection to Cloudinary using React Native, We will be using hooks to manage state to display the image after it is uploaded.

Cloudinary is an end-to-end image and video management solution for websites and mobile apps, covering everything from image and video uploads, storage, manipulations, optimizations to delivery, It provides a secure and comprehensive API for easily uploading media files from server-side code, directly from the browser or from a mobile application.

Using Cloudinary's upload capabilities, you can upload media assets in bulk with a variety of options for customizing how they will be uploaded, including naming, whether to apply manually specified or automatically generated tags and metadata, whether to apply incoming transformations or other AI-based analysis of the uploaded assets, and more.

We can look at Cloudinary as our cloud storage for media files (images, videos, PDFs, text documents, GIFs), But in this article we will be working with only images.

Overview on what we are building

We are building a React Native app that takes an image from a device, stores it on Cloudinary and then renders it to the screen.

Let’s get started 😊

We have a boilerplate code, which will save us time in creating a React Native project and also setting up our screen styles, you can clone the repo here.

Setting up Image Picker ⚙️

Let’s install React Native Image Picker : yarn add react-native-image-picker
We will have to give the app some permissions to enable camera and storage rights. We will add those permissions in the AndroidManifest.xml located in android/app/main/AndroidManifest.xml.

We will import ImagePicker from 'react-native-image-picker' in App.js
Now we have to fix up our Image Picker, ImagePicker.showImagePicker will be needing two arguments
1. First we have options which is an object for customizing the image picker, it can be omitted for a default options.
2. Our second argument is a callback that sends an object in response.
Let’s write some code in the App.js :
From our boilerplate code we should have this :

This is some starter code that will cover UI layout and styles.

Now we will add our Image Picker to the code :

From the code above we have a function called selectPhotoTapped which bodies all our Image Picker code.

In selectPhotoTapped function we have an object called options as explained earlier, it’s an object for customizing the image picker.

Moving forward we have to access the method showImagePicker from ImagePicker, showImagePicker displays the image picker and has two arguments, options and a response object.

After understanding how our image picker works, let’s see it work by calling the selectPhotoTapped function which will be triggered by a TouchableOpacity press event.

We will be logging out a response from both line 12 and source from line 23.

Demonstration

Output :

The data between the red lines is what we are interested in, The first log response is the entire response from Image Picker, The second log is specific data that we will be using later in future of this article it consists of three properties :

name
type
uri
Now we are ready for our cloudinary setup. 🎉 🎉 🎉

Setting up Cloudinary ⚙️

Just to let us know, uploading to Cloudinary is done over HTTPS using a secure protocol based on your account's cloud_name, api_key and api_secret parameters, or using an unsigned upload without an authentication signature. When using Cloudinary's SDKs, The three security parameters are generally configured globally.

To begin our setup we will need to create an account using this link if we do not have one already.
After the Signup or Sign in process, we should see our dashboard like so :

We click on the settings icon at the right section of the top navbar, Then we will navigate to the upload tab we should see :

We scroll down to where we will find Upload presets, and click Add new preset :

I recommend changing Upload preset name to a custom name, and also setting Signing Mode to unsigned, this will allow us to upload to Cloudinary without an authentication signature and then save it like so :

Now we are done with the Cloudinary settings, Our next step, We need to create a FormData so we can upload our image and cloudinary presets.
First, we start by setting the state for the photo, In this article, we will be using hooks.

Next up we are creating our Cloudinary function, we will first create a FormData and append our image file, Cloudinary presets and cloud name.

Next up we have to upload our data to our Cloudinary API using a fetch method. We can get our base API and cloud name here :

Uploading our data to Cloudinary, we will be making a POST request to our base API like so :

From the code above we did a POST request to our base API and from the response data we will be making use of only secure_url and we updated the state of our photo.
Now we have our function set up, In the selectPhotoTapped function, we will be calling cloudinaryUpload and passing our image data as an argument.

Conclusion

Finally we can take a look at our entire code and have a rundown on the steps.

We set up our UI layout.
We installed Image Picker from React Native.
We set up our Image Picker and tested it.
We set up our Cloudinary presets.
We fix up our Cloudinary in our code by sending a request to our base API.
We got the response and use it to update our image display.

Here is the complete code, feel free to send a pull request if you like to add something to what we have.

Thanks for reading ❤️

Hope this helps, you can tweet at @godswillokokon if you have any questions.