ktoa

Set of useful helpers and wrappers around React Native for ClojureScript development

Example

(ns app.core
  (:require [ktoa.components :refer [component] :as c]
            [ktoa.core :refer [run-app!]]))

(def child
  (component
   {:render #(this-as that
               (c/text nil that.props.title))}))

(def parent
  (component
   {:render (fn[](this-as that
                  (c/view {}
                    (child {:title that.props.title})
                    (map #(c/text {:key %} %) (range 20)))))}))

;; Feel free to reeval following line - ktoa will refresh application
(run-app! "app" parent {:title "\n\nHello"})

API

ktoa.core

• react-native - Returns required react-native module
• react - Returns required react module
• os - Returns nil for non react-native environments or :ios or :android depending on current platform
• run-app!(app-name component override-props) - If application wasn’t mounted before - simply register it, otherwise rerun it with (optionally) supplied arguments. Usefull for REPL driven development - just re-eval run-app! call with initial props

ktoa.components

• class(ops) - Wrapper around React.createClass
• element(element opts & children) - Wrapper around React.createElement
• component(opts) - Convenient wrapper for creating your own components like:

(def hello
  (component
   {:render (fn[](this-as that
                  (c/text {} this.props.msg)))}))

;; Later on you can compose it with other components
(def wrapper
  (component #(c/view {}
                (c/text {} "Hello")
                (hello {:msg "World"}))))

;; Or you can use it as a root component for the whole application
(ktoa.core/run-app! "[name-of-app]" wrapper)

;; Alternativly just call it from any place in your project to play with new ideas
(ktoa.core/run-app! "[name-of-app]" (component {:render #(c/text {} "debug me")}))

• This namespace currently exposes following wrapped with element React Native components:
  • activity-indicator
  • button
  • date-picker-ios
  • drawer-layout-android
  • image
  • keyboard-avoiding-view
  • list-view
  • map-view
  • modal
  • navigator
  • picker
  • picker-ios
  • progress-bar-android
  • progress-view-ios
  • refresh-control
  • scroll-view
  • segmented-control-ios
  • slider
  • status-bar
  • switch
  • tab-bar-ios
  • tab-bar-ios-item
  • text
  • text-input
  • toolbar-android
  • touchable-highlight
  • touchable-native-feedback
  • touchable-opacity
  • touchable-without-feedback
  • view
  • view-pager-android
  • web-view

Status

Early development, experimenting with right lib design. There are a lot of discussion happens in http://clojurians.net, on #cljsrn channel. Feel free to join

Alternatives

• https://github.com/drapanjanas/re-natal - Quick start templates for different frameworks and some tooling around
• https://github.com/mjmeintjes/boot-react-native - If you are into Boot

Credits

Big thanks to decker405 and his awesome idea how to use Figwheel with RN: https://github.com/decker405/figwheel-react-native