{"id":17182046,"url":"https://github.com/markokocic/rn-native-base-example-todo","last_synced_at":"2026-03-09T14:06:26.312Z","repository":{"id":48546292,"uuid":"256530939","full_name":"markokocic/rn-native-base-example-todo","owner":"markokocic","description":"Example application using Clojurescript, react-native, shadow-cljs and native-base using rn-native-base","archived":false,"fork":false,"pushed_at":"2025-11-27T14:10:17.000Z","size":411,"stargazers_count":10,"open_issues_count":2,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-11-30T07:05:33.640Z","etag":null,"topics":["clojurescript","clojurescript-library","native-base","react-native","shadow-cljs"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"epl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markokocic.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-17T14:49:31.000Z","updated_at":"2025-11-27T14:10:22.000Z","dependencies_parsed_at":"2022-08-28T18:32:57.437Z","dependency_job_id":null,"html_url":"https://github.com/markokocic/rn-native-base-example-todo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/markokocic/rn-native-base-example-todo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base-example-todo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base-example-todo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base-example-todo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base-example-todo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markokocic","download_url":"https://codeload.github.com/markokocic/rn-native-base-example-todo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base-example-todo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30297918,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T13:46:43.843Z","status":"ssl_error","status_checked_at":"2026-03-09T13:46:42.821Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clojurescript","clojurescript-library","native-base","react-native","shadow-cljs"],"created_at":"2024-10-15T00:35:52.460Z","updated_at":"2026-03-09T14:06:26.289Z","avatar_url":"https://github.com/markokocic.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"This project is a step by step example how to start `react-native` project using Clojurescript, `shadow-cljs` and `reagent` libraries. It also uses `native-base` as react-native component library, wrapped to Clojurescript using `rn-native-base` Clojurescript library. \n\n# Setup Instructions\n\n## Step 0 - Install prerequisites\nHave installed `nodejs`, `npm` and `yarn`.\n\n## Step 1 - Create a bare bone react-native project\n```\nnpx react-native init RnNativeBaseExampleTodo\n```\nThis will create a sample `react-native` project.\n\n## Step 2 - Create a Clojurescript file with an init method\nCreate a new file in `src/rn/native_base_example_todo/core.cljs` with the following content\n```Clojure\n(ns rn.native-base-example-todo.core\n  (:require [steroid.rn.core :as rn]))\n\n(defn app-root []\n  [rn/text \"Hello\"])\n\n(defn init []\n  (rn/register-reload-comp \"RnNativeBaseExampleTodo\" app-root)) \n```\n\n## Step 3 - Add shadow-cljs config file\nCreate file `shadow-cljs.edn` with the following content:\n```Clojure\n{:deps  true\n :nrepl {:port 7002}\n :builds\n        {:app {:target     :react-native\n               :init-fn    rn.native-base-example-todo.core/init\n               :output-dir \"app\"\n               :devtools   {:autoload   true\n                            :after-load steroid.rn.core/reload\n                            :preloads   [re-frisk-rn.preload]\n                            }}}}\n```\nThis is the basic shadow-cljs configuration which refers to `dep.edn` file for managing dependencies. It is also possible to configure shadow-cljs as a standalone config, or to use Leiningen `project.clj` instead of `deps.end`. Both approaches are documented in shadow-cljs documentation and are left as an exercise for the reader.\n\nAlso create a clojure tools configuration `deps.edn`\n```Clojure\n{:deps  {org.clojure/clojure       {:mvn/version \"1.10.1\"}\n         org.clojure/clojurescript {:mvn/version \"1.10.520\"}\n         thheller/shadow-cljs      {:mvn/version \"2.9.1\"}\n         rn-shadow-steroid         {:mvn/version \"0.1.1\"}\n         rn-native-base            {:mvn/version \"0.1.1\"}\n         reagent                   {:mvn/version \"0.10.0\" :exclusions [cljsjs/react cljsjs/react-dom]}\n         re-frame                  {:mvn/version \"0.12.0\"}\n         ;re-frisk-rn               {:mvn/version \"0.1.1\"}\n         }\n :paths [\"src\"]}\n```\nIf you get compilation errors later when trying to compile Clojurescript code, please make sure that you have properly configured shadow-cljs, clojure and clojurescript versions, as explained in shadow-cljs home page.\n\n## Step 4 - Configure react native to use Clojurescript\nUpdate the `index.js` file to point to our compilation target. Replace the file content with the following:\n```Javascript\nimport \"./app/index.js\";\n```\nThis will tell react native launcher to use our code. At that point Javascript source code can be deleted.\n```\nrm -f App.js\n```\n\n## Step 5 - Compiling and starting the application\n\n### Build Clojurescript source\nRun the following command in the console:\n```\nnpx shadow-cljs watch app\n```\nThis can take a while, but needs to be done only once. After that, it will quickly re-compile source on every change.\n\n### Start react native\nRun the following command in another terminal window:\n```\nnpx react-native start\n```\n\n### Start mobile device\nJust execute `npx react-native run-android` or `npx react-native run-ios`\n\n### Enable shadow-cljs reloading\nOnce the application is started, you should disable react-native reloading feature. Start debug menu and disable the \"Fast Refresh\" option. Once disabled, shadow-cljs will be responsible for reloading the application code, which is much faster and keeps application state between reloads.\n\n## Step 6 - happy coding\nThat's it. You can now continue on your own coding react-native application in Clojurescript.\n\nYou may also want to take a look at this repo for a sample application that use `native-base` library.\n\n## Step 6 - Add `native-base`\nIn order to use any react-native library, it needs to be added by your favourite node package manager. Use either  `npm` or `yarn`.\n```\nyarn add native-base\n```\nor\n```\nnpm install --save native-base\n```\nIf you are using older version of the `react-native` it also needs to be linked to the react-native\n```\nnpx react-native link native-base\n```\nThis linking step is not required when using `react-native` version of `0.60` or newer.\n\nNote: If you plan to use `Icon`s you need to set up `react-native-vector-icons` as described on its [home page](https://github.com/oblador/react-native-vector-icons).\n\n### Note on native dependencies\nAfter adding any native dependency you need to re-run the application by running `npx react-native run-android`. If you still have issues, you need to manualy delete android build files located in `./android/app/build*`, uninstall the application from your device, and re-run `npx react-native run-android` to fully rebuild the appliacation.\n\nAdd the latest `rn-native-base` as a dependency to your project.\n\nAfter adding, it's required to restart react-native and rebuild and restart application.\n\n\n# Credits\n\nHeavy lifting is done using the excellent [/flexsurfer/rn-shadow-steroid](/flexsurfer/rn-shadow-steroid) library. Take a look at it for more documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkokocic%2Frn-native-base-example-todo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkokocic%2Frn-native-base-example-todo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkokocic%2Frn-native-base-example-todo/lists"}