Created
November 10, 2015 01:03
-
-
Save mfikes/8542d2d2d5e7150a25c0 to your computer and use it in GitHub Desktop.
ClojureScript + React Native white screen workaround
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
;; Need to set js/React first so that Om can load | |
(set! js/React (js/require "react-native/Libraries/react-native/react-native.js")) | |
(ns future-app.core | |
(:require [om.core :as om])) | |
;; Reset js/React back as the form above loads in an different React | |
(set! js/React (js/require "react-native/Libraries/react-native/react-native.js")) | |
;; Setup some methods to help create React Native elements | |
(defn view [opts & children] | |
(apply js/React.createElement js/React.View (clj->js opts) children)) | |
(defn text [opts & children] | |
(apply js/React.createElement js/React.Text (clj->js opts) children)) | |
;; Set up our Om UI | |
(defonce app-state (atom {:text "Welcome to FutureApp"})) | |
(defn widget [data owner] | |
(reify | |
om/IRender | |
(render [this] | |
(try | |
(view {:style {:flexDirection "column" :margin 40}} | |
(xtext nil "hi") | |
(text nil (:text data))) | |
(catch :default e | |
(view {:style {:flexDirection "column" :margin 40 :backgroundColor "red"}} | |
(text nil (.-message e)))))))) | |
(om/root widget app-state {:target 1}) | |
(defn ^:export init [] | |
((fn render [] | |
(.requestAnimationFrame js/window render)))) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See demo at https://youtu.be/2DfYsgOYpW4