{"id":13609399,"url":"https://github.com/flexsurfer/rn-shadow-steroid","last_synced_at":"2025-04-13T18:33:47.026Z","repository":{"id":47425463,"uuid":"242360267","full_name":"flexsurfer/rn-shadow-steroid","owner":"flexsurfer","description":"React Native with shadow-cljs on steroids","archived":false,"fork":false,"pushed_at":"2022-08-10T19:35:43.000Z","size":3025,"stargazers_count":68,"open_issues_count":4,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T09:12:10.486Z","etag":null,"topics":["re-frame","react","react-native","reagent","shadow-cljs"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexsurfer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-22T15:00:06.000Z","updated_at":"2024-10-25T03:32:23.000Z","dependencies_parsed_at":"2022-09-14T00:12:10.860Z","dependency_job_id":null,"html_url":"https://github.com/flexsurfer/rn-shadow-steroid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Frn-shadow-steroid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Frn-shadow-steroid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Frn-shadow-steroid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexsurfer%2Frn-shadow-steroid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexsurfer","download_url":"https://codeload.github.com/flexsurfer/rn-shadow-steroid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760355,"owners_count":21157345,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["re-frame","react","react-native","reagent","shadow-cljs"],"created_at":"2024-08-01T19:01:34.636Z","updated_at":"2025-04-13T18:33:46.992Z","avatar_url":"https://github.com/flexsurfer.png","language":"Clojure","funding_links":[],"categories":["Clojure"],"sub_categories":[],"readme":"# rn-shadow-steroid\n\nA Clojure library with a few functions-steroids for react native app, **can be used only with shadow-cljs**\n\n![IMG](screencast.gif)\n\n[![Clojars](https://img.shields.io/clojars/v/rn-shadow-steroid.svg)](https://clojars.org/rn-shadow-steroid)\n\n## Usage\n\n```clojure\n{:dependencies [[rn-shadow-steroid \"0.2.8\"]]}\n```\n\nRegister root reagent component in app registry\n\n```clojure\n(:require [steroid.rn.core :as rn])\n\n(defn root-comp []\n  [rn/view\n   [rn/text \"HELLO WORLD\"]])\n\n(defn init []\n  (rn/register-comp \"app-name\" root-comp))\n```\n\nRegister root component with **HOT RELOAD**\n\n```clojure\n(:require [steroid.rn.core :as rn])\n\n(defn root-comp []\n  [rn/view\n   [rn/text \"HELLO WORLD\"]])\n\n(defn init []\n  (rn/register-reload-comp \"app-name\" root-comp))\n```\n\nshadow-cljs.edn\n```clojure\n{:source-paths [\"src\"]\n\n :dependencies [[rn-shadow-steroid \"0.2.6\"]]\n\n :builds       {:dev\n                {:target     :react-native\n                 :init-fn    app.core/init\n                 :output-dir \"app\"\n                 :devtools   {:after-load steroid.rn.core/reload\n                              :build-notify steroid.rn.core/build-notify}}}}\n```\n\nNow each time you change your code it will be hot reloaded keeping an app state. **NOTE react native fast refresh should be turned off**\n\n\n### React Native components\n\n#### Basic components\n```clojure\n[steroid.rn.core :as rn]\nrn/app-registry rn/view rn/text rn/image rn/text-input rn/scroll-view\nrn/touchable-highlight rn/touchable-native-feedback rn/touchable-opacity rn/touchable-without-feedback\n```\n\n#### UI components\n```clojure\n[steroid.rn.components.ui :as ui]\nui/button ui/switch\n```\n\n#### List components\n```clojure\n[steroid.rn.components.list :as list]\nlist/flat-list list/section-list\n```\n\n#### Platform\n```clojure\n[steroid.rn.components.platform :as platform]\nplatform/platform platform/os platform/version platform/android? platform/ios?\n```\n\n#### Other components\n```clojure\n[steroid.rn.components.other :as other]\nother/activity-indicator other/alert other/dimensions other/keyboard-avoiding-view other/modal other/refresh-control \n```\n\n#### StatusBar components\n```clojure\n[steroid.rn.components.status-bar :as status-bar]\n(status-bar/set-bar-style bar-style)\n(status-bar/set-background-color background-color)\n(status-bar/set-hidden hidden)\n(status-bar/set-network-activity-indicator-visible network-activity-indicator-visible)\n(status-bar/set-translucent translucent)\n```\n\n#### Picker component\n````bash\nyarn add @react-native-picker/picker\n````\n\n```clojure\n[steroid.rn.components.picker :as picker]\npicker/picker picker/item\n```\n\n#### DateTimePicker component\n````bash\nyarn add @react-native-community/datetimepicker\n````\n\n```clojure\n[steroid.rn.components.datetimepicker :as datetimepicker]\ndatetimepicker/date-time-picker\n```\n\n#### Async storage component\n````bash\nyarn add @react-native-async-storage/async-storage\n````\n\n```clojure\n[steroid.rn.components.async-storage :as async-storage]\n(async-storage/set-item \"key\" {:my-value \"value\"})\n(async-storage/get-item \"key\" #(println \"value\" %))\n(async-storage/remove-item \"key\")\n(async-storage/get-all-keys #(println \"keys\" %))\n(async-storage/clear)\n```\n     \n#### EXAMPLE\n\n```clojure\n(:require [steroid.rn.core :as rn]\n          [steroid.rn.components.list :as list])\n\n(defn item-render [{:keys [title image-url description]}]\n  [rn/touchable-opacity {:on-press #(do \"smth\")}\n   [rn/view {:style {:padding 5 :flex-direction :row :align-items :center}}\n    [rn/image {:style {:width 50 :height 50 :margin 5 :border-radius 25 :margin-right 10}\n               :source {:uri image-url}}]\n    [rn/view {:style {:flex 1}}\n     [rn/text {:style {:font-size 18 :font-family \"Inter\" :flex-shrink 1}} title]\n     [rn/text {:style {:font-family \"Inter\" :flex-shrink 1 :color :gray :margin-top 5}\n               :number-of-lines 2}\n      description]]]])\n\n(defn myapp []\n    [rn/view {:style {:flex 1 :background-color :white}}\n     [rn/text {:style {:font-size 22 :align-self :center :margin 10 :font-family \"Inter\"}}\n      \"MyApp\"]\n     [list/flat-list {:data data-vector :render-fn item-render}]])\n```\n \n### React Navigation with HOT RELOAD\n\n#### Navigation container component\n````bash\nyarn add @react-navigation/native\n````\n\n```clojure\n[steroid.rn.navigation.core :as rnn]\nrnn/navigation-container\nrnn/create-navigation-container-reload\n```\n\n#### Stack components\n````bash\nyarn add @react-navigation/stack\n````\n\n```clojure\n[steroid.rn.navigation.stack :as stack]\nstack/stack\n```\n\n#### Bottom tabs components\n````bash\nyarn add @react-navigation/bottom-tabs\n````\n\n```clojure\n[steroid.rn.navigation.bottom-tabs :as bottom-tabs]\nbottom-tabs/bottom-tab\n```\n\n#### Safe area components\n````bash\nyarn add react-native-safe-area-context\n````\n\n```clojure\n[steroid.rn.navigation.safe-area :as safe-area]\nsafe-area/safe-area-provider safe-area/safe-area-consumer safe-area/safe-area-view\n```\n\n#### EXAMPLE\n\n````bash\n`yarn add @react-navigation/native @react-navigation/stack @react-navigation/bottom-tab react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-masked-view/masked-view`\n\n`cd ios; pod install; cd ..`\n````\n\n```clojure\n  (:require [steroid.rn.core :as rn]\n            [re-frame.core :as re-frame]\n            [steroid.rn.navigation.core :as rnn]\n            [steroid.rn.navigation.stack :as stack]\n            [steroid.rn.navigation.bottom-tabs :as bottom-tabs]\n            [clojurernproject.views :as screens]\n            [steroid.rn.navigation.safe-area :as safe-area]\n            steroid.rn.navigation.events))\n\n(defn main-screens []\n  [bottom-tabs/bottom-tab\n   [{:name      :home\n     :component screens/home-screen}\n    {:name      :basic\n     :component screens/basic-screen}]])\n\n(defn root-stack []\n  [safe-area/safe-area-provider\n   [(rnn/create-navigation-container-reload\n     {:on-ready #(re-frame/dispatch [:init-app-db])}\n     [stack/stack {:mode :modal :header-mode :none}\n      [{:name      :main\n        :component main-screens}\n       {:name      :modal\n        :component screens/modal-screen}]])]])\n\n(defn init []\n  (rn/register-comp \"ClojureRNProject\" root-stack))\n```\n\nNotice that we register root-stack without hot reload but create navigation-container-reload.\n\n#### re-frame navigation events `steroid.rn.navigation.events`\n\nAfter `steroid.rn.navigation.events` has been required once, re-frame events are registered and you can use them for navigation\n\n`(re-frame/dispatch [:navigate-to :modal])`\n\n`(re-frame/dispatch [:navigate-to :basic])`\n\n`(re-frame/dispatch [:navigate-back])`\n\nENJOY!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexsurfer%2Frn-shadow-steroid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexsurfer%2Frn-shadow-steroid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexsurfer%2Frn-shadow-steroid/lists"}