Using React Components

It is possible to use any React Native component ClojureScript via Reagent, including both built-in React Native components and those pulled in as npm dependencies. However, some components may require additional work to get working. This page collects short recipes for using React Native component in Reagent - please add your own.

Note that typically these snippets work similarly for both re-natal and boot-react-native.

react-native-video

;; in package.json: "react-native-video": "^0.9.0"

(def video (r/adapt-react-class (.-default (js/require "react-native-video/Video.js"))))

(defn my-ui []
   [video {:source {:uri uri}
          :muted true
          :repeat true
          :style {:width 400 :height 300)
          :resizeMode "cover"}])

Navigator

The Navigator component is tricky to use even from Javascript. The fundamental issue is that the Navigator API is inherently imperative, clashing with some React best practices. To learn how to use Navigator, a good first step is to read the official guide. Next, you need to translate this code to ClojureScript and Reagent.

Check ejelome's example (and part two) for how such a translation can work.