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.org/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 📖

See the Crank Native docs. You can also read the NativeScript Core docs, which give further details about the NativeScript framework that underlies Crank Native.

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.

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 might not yet work completely in it.

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 📝

All tasks for the initial roadmap are now complete! 🥳

• [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);
• [x] Write docs!