Crank Native

Crank Native is a crank.js custom renderer for apps hosted on iOS and Android, based on NativeScript. In other words, it's a library that allows you to write native mobile apps using Crank.

Setup

# Make sure that you have `tns` (the NativeScript CLI) installed:
#   https://docs.nativescript.cn/start/quick-setup

tns create myApp --template tns-template-blank-crank

cd myApp
npm install

tns preview --no-hmr
# or
tns run ios --no-hmr
# or
tns run android --no-hmr

# And to debug in Google Chrome:
tns debug ios --no-hmr --debug-brk

Documentation

Nothing yet. It's based on React NativeScript, so you can read the React NativeScript docs for now. You can also read the NativeScript Core docs, which are equally applicable.

The main difference from React NativeScript is that, while RNS component names have the format <$ContentView> (they are class components), Crank Native elements have the format <contentView> (they are JSX intrinsic elements).

Sample app

After initialising the sample app, you'll see the following simple view, renderered by this code app/components/AppContainer.tsx:

The code for setting styles is somewhat verbose at present, but I'll be improving these things in time.

Try without setting up your desktop environment (like an Expo Snack)

I've hacked together an experimental NativeScript Playground template pinned at versions [email protected] and [email protected]. You can try it out by scanning a QR code in the NativeScript Playground app, which will open it in the NativeScript Preview app.

Note: Although this does run on iOS, I expect that it doesn't on Android, as the Android version of NativeScript Playground doesn't support the node module resolution trick I'm using to supply the Crank Native dependencies.

Be warned that the NativeScript core team do not (yet) officially support Crank Native, and so this NativeScript Playground boilerplate is explicitly not representative of the full potential of either Crank or Crank Native. Some things are very likely to be broken in it (e.g. I would be surprised if async/await and generators work, and that's most of the essence of Crank).

But at the very least, you can get a picture for the potential of the framework for now without having to set up a desktop environment.

About Crank

Write JSX-driven components with functions, promises and generators.

Documentation is available at https://crank.js.org. Crank.js is in a beta phase, and some APIs may change. To read more about the motivations for this library, you can read the introductory blog post.

Completed so far

• [x] Fill in all the renderer APIs (AKA DOM interface) using React NativeScript's Host Config;
• [x] Complete a NativeScript CLI template, tns-template-blank-crank, so that users can initialise apps via NativeScript CLI;
• [x] Make a sample app;
• [x] Provide typings for intrinsic elements;
• [x] Implement ancestor context (wasn't necessary in the end) to support LayoutBase;
• [x] Implement event handling;
• [x] Create a NativeScript Playground template (Your Mileage May Vary – this is a best-effort with various limitations until official support from the NativeScript core team comes);

Roadmap 🛣

• Write docs!