README.org

• 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