DEV Community

ZenDrx
ZenDrx

Posted on

Announcing native.cr: React Native for Crystal developers

#programming #productivity #opensource #software

After months of work, I am releasing native.cr, a framework for building native mobile applications using the Crystal language.

Why?

I wanted to write mobile apps in Crystal. React Native uses JavaScript. Flutter uses Dart. Kotlin Multiplatform requires platform UI. Nothing fit.

So I built my own.

What works today

Android builds (ARM64)
Desktop preview (SDL2)
24 framework modules:

  • UI components (View, Text, Button, Column, Row, Container, Image)
  • Styling and themes
  • Touch events and gestures
  • Animations
  • Camera (photo and video)
  • Audio playback and recording
  • Network (HTTP and WebSocket)
  • Storage (Preferences, File, SQLite)
  • Notifications
  • Permissions
  • Biometric auth (fingerprint, face ID)
  • In-app payments
  • Game loop
  • Math utilities
  • Text input
  • Scroll and list views
  • Dialogs and toasts
  • Navigation
  • Video playback

The CLI

  • native.cr create - New project
  • native.cr build android - Build APK
  • native.cr reload - Desktop preview with fast restart
  • native.cr doctor - Check toolchain

Example 

require "native"
include Native

class MyApp < Native::App
  @[Preserve]
  property count : Int32 = 0

  def setup : Nil
    @label = Text.new
    @label.text = "Tap: 0"
    @label.text_size = 24

    button = Button.new
    button.text = "Tap Me"
    button.on_click = ->{ increment }

    column = Column.new
    column.spacing = 20
    column.add_child(@label)
    column.add_child(button)

    @root = column
  end

  def increment : Nil
    @count += 1
    @label.text = "Tap: #{@count}"
  end

  def draw : Nil
    @root.draw(renderer)
  end
end

Native::App.start(MyApp)
Enter fullscreen mode Exit fullscreen mode

Installation

Add to shard.yml:

dependencies:
  native:
    github: slick-lab/native.cr
    version: ~> 0.1.0
Enter fullscreen mode Exit fullscreen mode

Then:

shards install
native.cr doctor
Enter fullscreen mode Exit fullscreen mode

Requirements

  • Crystal 1.20+
  • Android NDK (for Android builds)
  • Linux or macOS (Windows via WSL2)
  • Android device or emulator for testing

iOS support

Coming soon. Crystal does not yet support iOS as a target. I am waiting for upstream changes or will contribute them.

Links

GitHub: https://github.com/slick-lab/native.cr

Try it. Report bugs. Contribute code. Let's make Crystal mobile together.

— slick-lab

Top comments (0)