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

artemyarulin / ktoa