* ktoa

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

** Example

#+BEGIN_SRC clojure

(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"})

#+END_SRC

** 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:

#+BEGIN_SRC clojure

(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")}))

#+END_SRC

- 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][https://github.com/drapanjanas/re-natal]] - Quick start templates for
  different frameworks and some tooling around
- [[https://github.com/mjmeintjes/boot-react-native][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