npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

crank-native

v0.7.0

Published

A Crank renderer for iOS and Android apps, based on NativeScript.

Downloads

24

Readme

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

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!