kevinmungai/using_shadow_cljs_with_react_native.md

## using_shadow_cljs_with_react_native.md

      
    Raw
  

              using_shadow_cljs_with_react_native.md
            
          
    How to use Shadow CLJS with React Native

This guides does not assume you are using expo.
It is not yet perfect, especially the hot reloading part but maybe shadow-cljs could be modified.

Create the React Native Project

react-native init <NameOfYourProject>

yarn add --dev shadow-cljs

Initialize Shadow CLJS

This command will ask to create a shadow-cljs.edn file.
shadow-cljs init

Modify the shadow-cljs.edn file as follows

{:source-paths [...]
 :dependencies [...]
 ...
 :builds
 {:app
  {:target :react-native
   :init-fn <the clojurescript function to be called e.g. AppRegistry>
   :output-dir "<Folder For Your JS OUTPUT>"}}}


Create your src folder for your Clojurescript.


Change the MainApplication.java to the JS output folder. Remember no first slash ahead of the folder name.
Note shadow-cljs creates its own index.js file.


    @Override
    protected String getJSMainModuleName() {
      return "app/index";
    }

Change the app level build.gradle to the JS output folder as above.

project.ext.react = [
    entryFile: "app/index.js"
Running the Application


Start Shadow-CLJS

shadow-cljs watch app --this "app" depends on what you called your build

Start react-native

react-native run-android 
Hot Reloading your application

In order to see the changes of your Clojurescript on the phone just type this command every time or create a keyboard macro.
adb shell input text "RR"