{"id":17182043,"url":"https://github.com/markokocic/rn-native-base","last_synced_at":"2025-07-27T04:31:41.095Z","repository":{"id":62434513,"uuid":"257255993","full_name":"markokocic/rn-native-base","owner":"markokocic","description":"native-base wrapper for Clojurescript","archived":false,"fork":false,"pushed_at":"2020-04-21T10:30:29.000Z","size":6,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-15T01:41:56.394Z","etag":null,"topics":["clojurescript","clojurescript-library"],"latest_commit_sha":null,"homepage":null,"language":"Clojure","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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-20T11:12:48.000Z","updated_at":"2024-10-26T02:52:19.000Z","dependencies_parsed_at":"2022-11-01T21:02:01.757Z","dependency_job_id":null,"html_url":"https://github.com/markokocic/rn-native-base","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markokocic%2Frn-native-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markokocic","download_url":"https://codeload.github.com/markokocic/rn-native-base/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227759922,"owners_count":17815629,"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":["clojurescript","clojurescript-library"],"created_at":"2024-10-15T00:35:52.185Z","updated_at":"2024-12-02T16:21:30.899Z","avatar_url":"https://github.com/markokocic.png","language":"Clojure","funding_links":[],"categories":[],"sub_categories":[],"readme":"# rn-native-base\nnative-base wrapper for Clojurescript\n\n[![Clojars](https://img.shields.io/clojars/v/rn-native-base.svg)](https://clojars.org/rn-native-base)\n\n## Full usage tutorial\nCreate a Clojurescript `react-native` project. For the detailed info how to do it, check the [rn-native-base-example-todo](https://github.com/markokocic/rn-native-base-example-todo) example project using this library. \n\n## Short usage info\n\n### Add Clojurscript `rn-native-base` dependency\nAdd `rn-native-base` as a dependency to your project.\n```clojure\n[rn-native-base \"\u003cLatest-Version\u003e\"]\n```\n\n### Add `native-base` dependency to `react-native`\nYou can use both `npm` and `yarn` tools\n```shell script\nyarn add native-base\n```\n```shell script\nnpm install --save native-base\n```\n\nAfter installing you need to link it to your project\n```shell script\nnpx react-native link\n```\n\n### Code\nImport rn-native base and start coding. The example below is from [rn-native-base-example-todo](https://github.com/markokocic/rn-native-base-example-todo) example project. Check it's source code for the sample working code. \n\n```clojure\n(ns rn.native-base-example-todo.todo-screen\n  (:require [steroid.rn.core :as rn]\n            [re-frame.core :as rf]\n            [reagent.core :as r]\n            [rn.native-base.core :as nb]\n            [rn.native-base.easy-grid :as eg]))\n\n(defn- todo-item [{:keys [key text checked]}]\n  [nb/list-item {:key key}\n   [nb/check-box {:checked  checked\n                  :on-press #(rf/dispatch [:todos/check key])}]\n   [nb/body {:style {:flex 1}}\n    [nb/text {:style {:font-size 17 :font-weight :bold :text-decoration-line (if checked :line-through :none)}}\n     (str text)]]\n   [rn/touchable-opacity {:on-press #(rf/dispatch [:todos/delete key])}\n    [nb/icon {:name \"trash\" :style {:font-size 30 :color :red}}]]])\n\n(defn- todos []\n  (let [todos (rf/subscribe [:todos/all])]\n    [rn/flat-list {:data @todos :render-fn todo-item}]))\n\n(defn- input-container []\n  (let [value (r/atom \"\")]\n    (fn []\n      [nb/list-item {:no-indent true :style {:border-bottom-width 3}}\n       [nb/input {:multiline      true\n                  :placeholder    \"What do you want to do today?\" :placeholder-text-color \"#abbabb\"\n                  :value          @value\n                  :on-change-text (fn [v] (reset! value v) (r/flush))}]\n       [rn/touchable-opacity {:on-press (fn [] (rf/dispatch [:todos/add @value]) (reset! value \"\"))}\n        [nb/icon {:name  :add :type \"MaterialIcons\"\n                  :style {:font-size 30 :color :blue}}]]])))\n\n(defn screen []\n  [nb/container\n   [nb/header {:transparent true}\n    [nb/left]\n    [nb/body\n     [nb/h1 {:style {:color :red}} \"Todo List\"]]]\n   [nb/view\n    [input-container]\n    [todos]]])\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkokocic%2Frn-native-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkokocic%2Frn-native-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkokocic%2Frn-native-base/lists"}