DEV Community: Ana Bujan

How to Install React Native Skia with Expo for Web and Native

Ana Bujan — Mon, 22 Apr 2024 12:15:13 +0000

This post features a really simple skia graphics but details instructions for installing react native skia on the expo go and expo web. Guide builds on top of the expo router tabs demo app and saves you time and frustration.

Intros, what’s what?

Skia is a powerful open source graphics engine and library. It’s widely used in systems like Google Chrome, Android, iOS and many others.

Expo is a platform for building native apps for Android, iOS and the web with javascript/typescript and React Native. When devs go with expo instead of react native, they usually choose managed workflow. Managed workflow means most or all of the native code is hidden from you, you don’t need to worry about that, just type your React code and you’re done.

Expo Go is a mobile client app which lets you open and test projects while developing them. When you make changes to your code, those changes are immediately visible in the Expo Go app on your mobile device without needing a full reload of the app, preserving the current state. I believe other word for this feature is hot reload.

Expo Router is a file-based router for React Native and web applications. It allows you to manage navigation between screens in your app. Architecture of the routes and layout is very similar, if not the same as next.js app router.

Requirements

Configured Android SDK on your machine. Take a look at windowsor linuxinstructions if you need step by step guide (also recorded on Youtube).

Initialize the project

You can skip this step if you already have setup an expo project. I’m using the expo tabs template which includes a basic tab navigator setup, providing a structured layout and navigation system right from the start.

npx create-expo-app@latest --template tabs@50

Install Skia

When installing dependencies on expo, usually you would install with npx expo install instead of npmor yarn. Reason for this approach is compatibility and automatic configuration. When issuing expo install, expo will pull the version which is known to work correctly with the version of sdk you are using. Also, expo will sometimes modify the native code or configuration files accordingly.

In an ideal world, right?

From my experience, this is not always the case. In the case of skia as authors mention:

Metro and expo-router support is available from v0.1.240 and onwards. If you are using v0.1.221 (recommended version for Expo SDK 50), you can use this patch (using patch-package.

https://shopify.github.io/react-native-skia/docs/getting-started/web/#expo

Version of sdk 50 will install 0.1.221 which does not work without an additional patch.

My solution is to use a newer version and ignore expo-doctor warnings.

npm i --save @shopify/react-native-skia@0.1.240
npx expo install react-native-reanimated

Skia depends on react-native-reanimated, which is not installed without explicitly declaring it in package.json.

Configure Skia

React native skia does not work without canvaskit.wasm, which needs to be stored somewhere in the expo app. Since I’m using the expo router setup, static files can be stored in public directory.

Adding ”postinstall”: “npx setup-skia-web public” makes the wasm file accessible.

There’s one fun error that occurs after the setup. I’ve lost an hour trying to debug and polyfill:

The package at “node_modules\canvaskit-wasm\bin\full\canvaskit.js” attempted to import the Node standard library module “fs”.

It failed because the native React runtime does not include the Node standard library.

https://docs.expo.dev/workflow/using-libraries/#using-third-party-libraries

Self explanatory message, react native needs a workaround for standard node library like fs and path.

React Native does not include Node.js’s standard library. Usual solution would be to polyfill the standard library. But the real culprit here is the canvaskit-wasm module setup and not the lack of the standard Node library. Thanks to kimchouard, there’s a workaround for this issue (just copying the piece here to see what’s going on):

/**
 * Original code by https://github.com/kimchouard/rn-skia-metro-web-example/blob/main/path-fs-canvaskit-postinstall.js
 */
const fs = require('fs');
const path = require('path');

const packageJsonPath = path.join(__dirname, 'node_modules', 'canvaskit-wasm', 'package.json');
const packageJson = require(packageJsonPath);

packageJson.browser = {
    fs: false,
    path: false,
    os: false,
};

fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));

canvaskit-wasm has no place using fs in native and web since we point to wasm file and also run npx setup-skia-web public as part of postinstall.

Create or modify metro.config.js and add the following:

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname, {
    isCSSEnabled: true,
});

config.resolver.assetExts.push('wasm');
config.transformer.getTransformOptions = async () => ({
    transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
    },
});

module.exports = config;

This code customizes the Metro bundler configuration by adding support for WebAssembly (.wasm) files as assets. It also improves performance by inlining require() calls and disables experimental import features. I don’t know why it doesn’t work without custom transform rules.

Making it work for the Web

This is where LoadSkiaWeb comes handy. I’d recommend adding this code in the root _layout if you need it accessible in your entire app.

_layout.ts
useEffect(() => {
    if (Platform.OS === 'web') {
      LoadSkiaWeb({ locateFile: () => '/canvaskit.wasm' })
        .then(() => {
          setLoaded(true);
        })
        .catch((err) => console.error(err));
    } else {
      setLoaded(true);
    }
  }, []);

Conclusion

Sometimes expo acts fishy for no apparent reason (like the Cannot read properties of undefined (reading ‘Matrix’)). Then the only solution is to clear the bundler cache and reinstall/rebuild the app. Anyway, all source code to install and configure react native skia on web and on native is available at my github repo. Also I recorded a YT tutorial to make it easier to follow the setup.

Manually install Android SDK on Ubuntu

Ana Bujan — Tue, 26 Mar 2024 18:25:18 +0000

I’ve been a long time only Ubuntu user and just recently formatted my desktop computer and bought a Windows 11. Point being, I made a tutorial on how to configure android sdk on windows too.

Instead of using Android studio, I’ll show you how you can install android sdk from the terminal.

Install Java

This is the first requirement, I prefer the Oracle version, but feel free to use openjdk if you like.

Verify the installation with java -version:

java version "17.0.10" 2024-01-16 LTS
Java(TM) SE Runtime Environment (build 17.0.10+11-LTS-240)
Java HotSpot(TM) 64-Bit Server VM (build 17.0.10+11-LTS-240, mixed mode, sharing)

If you happen to get a different java version than the currently installed, you can always fix it by running:

sudo update-alternatives --config javac
sudo update-alternatives --config java

And I also suggest setting up the JAVA_HOME. Edit .profile and set:

export JAVA_HOME="/usr/lib/jvm/jdk-17-oracle-x64"

Save file, runsource ~/.profile to update your current environment.

Get just the command line tools

These tools will help you do anything you need just from the command line, most importantly installing the sdk. Go to https://developer.android.com/studio and scroll down to command line tools, download.

Install the SDK

Extract your tools somewhere, and first run a small configuration as suggested by https://stackoverflow.com/a/71331807 to avoid the “could not determine SDK root” error.

unzip commandlinetools-linux-<your_version>.zip 
mv cmdline-tools ~/android-sdk/latest
cd ~/android-sdk/latest/cmdline-tools

Run this command from the cmd line tools to install version 34 of api and tools:

./sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0"

You can always see what’s available to install with sdkmanager --list.

Declare paths and environment variables

To be able to access platform-tools and cmdline-tools from anywhere, set up the env variables.

Edit .profile and add:

export ANDROID_HOME=$HOME/<location-of-sdk> # where did you extract the sdk?
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

Save file and run source .profile to propagate the changes.

Verify Installation

If everything went smoothly, adb version should give you something like:

Android Debug Bridge version 1.0.41
Version 34.0.1-9979309
Installed as /usr/bin/adb
Running on Linux 5-15-0-97-generic (x86_64)

Last Part

If you need an emulator, install system images and create an AVD (Android Virtual Device):

sdkmanager "system-images;android-34;default;x86_64"
avdmanager create avd -n testDevice -k "system-images;android-34;default;x86_64"

Check that your testDevice is in the list and run the emulator

emulator -list-avds
emulator @testDevice

Fun with Ubuntu

I said at the beginning of the article, things don’t go as smooth as they should.

NoClassDefFoundError

Failed to install android-sdk: “java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema”

This SO provides a solution, I just wanted to add this kind of thing happens when sdk is downloaded via Android Studio and the included avdmanager is deprecated. You will not have this issue if you installed this manually.

Deprecated Java Version

has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 55.0

This error only occurs if you have multiple java versions installed and have not configured the system properly. In my case it was java compiler pointing to the oracle java 8 version.

# this is correct
> java -version
openjdk version "11.0.21" 2023-10-17
OpenJDK Runtime Environment (build 11.0.21+9-post-Ubuntu-0ubuntu122.04)
OpenJDK 64-Bit Server VM (build 11.0.21+9-post-Ubuntu-0ubuntu122.04, mixed mode, sharing)
> javac -version
javac 1.8.0_171

You can fix it by running the command below and picking the newer version:

sudo update-alternatives --config javac
There are 2 choices for the alternative javac (providing /usr/bin/javac).

  Selection Path Priority Status
------------------------------------------------------------
* 0 /usr/lib/jvm/java-11-openjdk-amd64/bin/javac 1111 auto mode
  1 /usr/lib/jvm/java-11-openjdk-amd64/bin/javac 1111 manual mode
  2 /usr/lib/jvm/java-8-oracle/bin/javac 1081 manual mode

INSTALL_FAILED_UPDATE_INCOMPATIBLE

adb: failed to install .apk: Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package your.package signatures do not match previously installed version; ignoring!]

Error message is explanatory enough, solution is to uninstall your.package. This error might happen if you’re running expo android on your actual device, which had another version of your.package installed.

adb uninstall your.package

Extra

I’ve already covered setting up the SDK and troubleshooting common issues. This is just an extra section which applies to any OS platform: be it Linux, Windows or MacOS.

While you’re developing you’ll want to run your app on the emulator and real device, be able to communicate with other api services, debug…

Communicating with services

While you’re developing your app and testing either on your emulator or your device, you might need to access your local api. Localhost won’t do. Check that you’re on the same wifi, that your api is on 0.0.0.0 or more restrictive 192.x.x.x (whatever ip is written in your network settings).

Other solution would be to use a service like ngrok, but then your api is open to the world if they manage to guess your ngrok url.

Adb device permission issues

Check that you have enabled development mode and usb debugging. Connected device should use usb for data transfer.

Try a different usb port
The adb usb command restarts the adb server and forces it to listen for USB connections, which can also help in resetting the USB interface for ADB.

Debugging Logs

Very useful when you’re running your app on an emulator or the device, expo logs will not be enough at times. Their errors are sometimes too cryptic. You can use adb logcat -e your.package to see what’s actually going on.

Running the emulator from virtualbox

While I was recording my youtube video, I was running Ubuntu from Virtualbox. I tried running the emulator from virtualbox, but error kept saying “missing hardware acceleration”.

You can run the emulator, just add “–no-accel”. No reason why you would want that because it’s extremely slow, but just pointing it’s doable.

Have I Been Hacked?

Ana Bujan — Thu, 07 Mar 2024 16:24:35 +0000

I’ve been interested in this topic for a while, that is how secure my data on the cloud is.

I always assume it’s hard to hack me. I’m a professional developer, not naive, not lazy, I don’t even know my own passwords, I rotate them, use 2FA…

Nonsense! Actually, anyone who uses the internet is at risk of having some of their data taken without their knowledge and sold to interested parties.

Actually I got inspired to finally write this post after getting a phishing call from a representative of a popular Croatian health insurance company, speaking in bad Croatian, asking me why am I not paying my bills. This was a funny and short call, but got me thinking…

Is my Phone Eavesdropping on me?

It must have occurred to you at one point of your life that your phone is listening to your conversations or at least your friends and relatives have a theory about that.

Let’s forget that Google knows too much about you, and imagine a scenario where you’re in a café, watching someone across drinking some interesting beverage, and you decide to google what it is… But no, advertisements have already beat you, they know what you want before you’ve even typed in the search term.

I won’t go too much into this topic, as I’m not an expert. Maybe your phone really is “eavesdropping” on you, or maybe the systems have such advanced algorithms that they can predict what you want better than you can yourself.

As soon as you use a phone and the internet, some of your data is already shared. After all, do you ever read the terms of use of an application? What did you agree to when you logged into Facebook?

The Double-Edged Sword of Complex Authentication

I’m talking about classic data theft: email, password, phone number, firstname/lastname.

For instance, I never use the same password, and I don’t even know it myself. But what does that mean? These passwords that I don’t know are stored somewhere on a remote server, that’s a potential issue isn’t it?

If you’re serious about authentication, you’ll enable what’s called a two factor authentication (2FA) everywhere.

The problem with 2FA authentication is that those details are temporarily stored on some remote server. If you’ve chosen SMS for your 2FA, you should be aware that 2FA authentication might be outsourced to an external company. You might have heard about the recent leak of 2FA databases https://www.forbes.com/sites/daveywinder/2024/03/06/millions-of-google-whatsapp-facebook-2fa-security-codes-leak-online/. The news might be a bit exaggerated since after all, 2FA codes are short-lived. It requires a combination of factors for a hacker to have your password, access to the fresh 2FA database, you are interesting enough for them to spend their time on you, and the stars align for them to access your data.

Sale of personal data

But what else can happen, your data gets sold to shady characters who want to sell you something or extract something from you, at best, money or even more data about you.

Take me, for example, I haven’t changed my phone number in like forever.

Maybe I should treat my phone number the same way as passwords, rotate it periodically.

What’s the problem? Among the hacked data, there often is the mobile number. If you’ve ever entered your mobile number on any account, it’s possible that there will be a data leak, and you’ll start receiving strange calls from abroad.

Maybe it’s “just happening to me”, but occasionally I get calls where the person only knows my name and wants to sell me something. Sometimes these calls come from local numbers 091, 095, etc. But don’t be fooled that it’s a local number; the number can still be from abroad. It’s masked to appear as a local number.

What can you do in that case?

Report the incident to your mobile network provider? Good luck! I’ve done that several times. They don’t know what to say. The best answer is to try to ignore it. Even checking the mobile number makes no sense because often the call is not made from that number, it just appears to be.
Install an app that blocks known spammers https://www.truecaller.com/? I have it, the paid version. It works decently, the database is constantly updated. It won’t stop all the calls though.
Change the number?

Data breach registry

This website might be of interest to you https://haveibeenpwned.com/ to see how much of your data has leaked out. You might wonder what if this website also stores your email. Read https://haveibeenpwned.com/Privacy and decide for yourself. This site has been checking for security breaches since 2013.

Recognizing phishing and saving the nigerian prince

I assume that most of the phishing attacks are very easy to recognize. But it’s only the case I’ve been trained well and years of experience.

I remember in the 2000’s I’d get emails from nigerian princes promising me large sums of money. I’d find them funny and thought how anyone would get fooled by these silly emails. That was the old era.

What hasn’t changed is that at one point they’ll all ask you for money by promising you things or threatening you, whatever works.

Email and web phishing

Usually websites and emails have grammar errors. This will improve in future, scammers know how to use ChatGPT too. Scam websites are often good copies of the real deal, and average Joe won’t think to look at the funky url or funky email, or know how to check the “show original” in the email he’s received.

Phone phishing calls

This is easy to spot in my case. One tell sign is if the caller speaks english or very bad croatian. I work with foreign clients, but all means of communication are over slack, google meet, zoom…you get the picture. One exception to the rule, I’ve noticed people from UK I’ve communicated with prefer phone calls.

Other tell sign is, caller introduces him and asks me how am I?

Like how dare he?! Asking me how am I doing. But seriously, I’d expect introduction who’s calling, why he’s calling, and then they can ask me “how are you”. Otherwise, it’s going to be a short call.

Third tell sign is, the short connection pause, maybe 2 seconds after I answer the call, before the caller starts talking. I’ve noticed it so far on all calls. It’s like they’re doing many calls at once, so first fool that answers will be routed to the scamming agent. I think there’s some automation going on here, if you get these kinds of calls try not answering for 2 seconds. See what happens.

Conclusion

There’s no smart conclusion here, just sharing some of my thoughts. I remember, long ago at a company where I worked, they were quite serious about security: everything was done through a VPN and emails were sent exclusively in encrypted form.

Maybe encrypting emails seemed a bit too much to me back then, but now I see it really isn’t.

When you use a service, you’re not just using it alone; your data goes through several different services. Ideally, all this should be mentioned in the terms of use and privacy.

Don’t be lazy, don’t use the same password everywhere. Don’t enter your mobile number unless it’s absolutely necessary. Read the privacy terms.

Thank you for reading!

Frontend for the email adventures

Ana Bujan — Mon, 03 Jul 2023 13:40:36 +0000

If you stumbled upon this article and have to do frontend for the email, my deep condolences.

Take a deep breath and try not to lose it because world of email design feels like the Upside Down to the rest of the web.

I’m really new to this world, and I’m just posting what I’ve learned when playing with email templates.

I could be wrong, and please correct me in the comments.

Frontend for the email wasn’t my first choice, I tried Mandrill first as I needed transactional emails. But Mandrill wasn’t very useful when it comes to email templates and advanced use with handlebars. I did manage to make it work, but decided to do my own because:

it’s easy to make a mistake and you won’t know it, mailchimp will sanitize your placeholders
mandrill html editor is not user friendly. I can’t use the pretty mailchimp because it doesn’t do much for me when I need to mess with html.
versioning problem – ok, you’ve got your production, you tell your colleague to do a change, he makes a mistake. It doesn’t work. Of course this is not a mandrill fault, but something to consider where you’re willing to spend your resources.

And when ditching mailchimp and mandrill, I’ve come to know wonderful world of frontend for the email.

Guess what? Rendering html in your browser and email clients is a completely different story. There are more limitations for the email client.

Web Fonts

Buggy, stick with web safe fonts. That will be the least of your issues and here’s a good comparisment article https://www.litmus.com/blog/the-ultimate-guide-to-web-fonts/. You can still use web fonts like google fonts, but be aware that some email clients will render the fallback font.

Html & Css

Stylesheets might work, or email client might strip it from the head. Using ugly inline styles is a sure bet.

Forget about some css selectors you’re used to, absolute positioning and negative margins.

As for html , you will mostly have to deal with table tags as standard css positioning in email clients just won’t work or mail client might strip your positioning css instructions.

Responsive design will require more testing, not covered in some email clients. https://www.caniemail.com/search/?s=media.

I’d suggest you take a look at https://www.caniemail.com/ to know exactly which limitations are there for your email template.

Images

If you wanted to render an image in your email template, would you:

a) Try to inline a base64 image with data uris

b) Embed an image from email attachment

c) Link to external source

a) Images as data uris

<img src="data:image/png;base64,..."/>

I can tell you right now, this option will not work in most of email clients. I’ve seen some hacks that should work where base64 is included as a background. Tried it, gmail striped everything in the url. Gmail also doesn’t like base64 in img src attribute.

b) Inline attachment images

Option b can be ok if you don’t have a lot of images, and it will work. There are issues with it that I’ll address after posting a cheat sheet on sending email with ses client in node.

const client = new SESClient({});
const composer = new MailComposer({
        subject: 'my subject,
        html: `<!doctype html>
<html><body><img src="cid:att"/></body></html>`,
        attachments: [
          {
            contentDisposition: "inline",
            cid: "<uniqueid@somedomain.com>", // any kind of unique id, but has to be followed by `@yourdomain`
            encoding: "base64",
            contentType: "image/png",
            content: fs.readFileSync(
                path.join(__dirname, "attachment.png")
              )
              .toString("base64"),
          },
        ],
      });
      const rawMessage = await composer.compile().build();

      const command = new SendRawEmailCommand({
        Destinations: ["dest@example.com"],
        RawMessage: {
          Data: rawMessage,
        },
        Source: ["from@example.com"],
        SourceArn: "<>",
      });

This technique is often used to include images in HTML emails where the image data is sent along with the email itself, instead of being loaded from an external URL. The advantage of this approach is that the image can be displayed even if the recipient’s email client blocks external images or if the recipient is offline when they open the email.

If you are not referencing the cid in the html, email client will show your attachment in the attachments list.

More bandwidth usage

Problem with this technique is that it uses more bandwidth. This can be an issue if you’re sending a large number of emails with attachments or if your recipients have limited or metered internet connections.

If you use aws services, where you know aws charges everything, there will be more cost introduced with more bandwidth usage.

Email size Limit

Email has a size limit, its 25mb. You probably won’t get there, but keep this in mind.

Choosing a CID has to be in a particular format!

This part is important because it will save you nerves when you discover that your images don’t render in all email clients! That’s because Content-ID has to be an RFC 2822 compliant, e.g:

<uniqueid@domain.com>

Otherwise some mail clients might choose not to display your image.

c) External Images

Problem with option c is that most email clients initially block external images, but you’ll save on bandwidth and get original image quality (I’ve read somewhere that mail client might decide to compress your attachments). Also, images in solution b are visible offline, while external will not be visible. Pro for using external images is that you won’t lose quality, while attached images may be compressed.

Rendering Emails

Rendering emails feels like rendering in different kinds of browsers a decade ago.

Your email won’t necessarily render the same in each email client and you will have to tinker with your template.

I recommend previewing your emails in Litmus, where you can send and test your email previews in every single email client. If you’ll have issues rendering inline attached images for iOS in Litmus, I think Litmus has a bug or a rendering timing issue. Images do render on the real device, and Litmus ios emulator still won’t load them.

Conclusion

This is just a small intro into html design pitfalls, I am not an expert in anyway. 2 weeks of research, trial and error. I hope some of my insights help.