Unlocking the Power of React Native Skia: A New Era in Mobile Graphics

What is React Native Skia?

React Native Skia is an open-source 2D graphics library sponsored by Google and managed by Skia’s engineering team. It allows you to harness the power of Skia in your React Native applications, creating trendy UI concepts like Neumorphism and Glassmorphism with ease.

Getting Started with React Native Skia

To get started, you’ll need to download the library from its GitHub repository and set it up in your native iOS and Android projects. For iOS, this involves installing the CocoaPods dependency, while for Android, you’ll need to install the Android Native Development Kit (NDK).

Using React Native Skia in Your App

React Native Skia offers two types of APIs: declarative and imperative.

Declarative API

The declarative API is similar to how you currently create UI in React Native using JSX syntax. For example, to create a rectangular shape with rounded corners, you would use the following code:

import { Canvas, Fill, RoundedRect } from 'eact-native-skia';

const center = { x: 150, y: 90 };

return (
  <Canvas>
    <Fill color="#eee">
      <RoundedRect x={center.x} y={center.y} width={300} height={180} rx={12}></RoundedRect>
    </Fill>
  </Canvas>
);

Imperative API

The imperative API, on the other hand, uses the SkiaView component and its onDraw callback to define what to draw on the view. Here’s an example:

import { SkiaView, useDrawCallback } from 'eact-native-skia';

const draw = useDrawCallback((canvas) => {
  const paint = new Paint();
  paint.setColor('#eee');
  canvas.drawRoundedRect(0, 0, 300, 180, 12, paint);
});

return (
  <SkiaView onDraw={draw}></SkiaView>
);

Adding Filters to Images

React Native Skia also allows you to display images using the Image component and add filters to them in real-time. You can use the ColorMatrix filter component to achieve this.

Creating a Neumorphic UI

With React Native Skia, you can create a neumorphic UI in your React Native app. The library provides a DropShadow component for creating shadows, similar to how you would in web apps.

Incorporating Glassmorphism

Finally, let’s create a glassmorphism-inspired design in our React Native app. To achieve this, we’ll use the BackDropBlur component to give the background a blur effect.

• Neumorphism: Use the DropShadow component to create shadows.
• Glassmorphism: Use the BackDropBlur component to give the background a blur effect.