Set of useful helpers and wrappers around React Native for ClojureScript development
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src/ktoa
.gitignore
BUCK
LICENSE
README.org
project.clj

README.org

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

Credits

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