Skip to content

flexsurfer/rn-shadow-steroid

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

rn-shadow-steroid

A Clojure library with a few functions-steroids for react native app, can be used only with shadow-cljs

IMG

Clojars

Usage

{:dependencies [[rn-shadow-steroid "0.2.8"]]}

Register root reagent component in app registry

(:require [steroid.rn.core :as rn])

(defn root-comp []
  [rn/view
   [rn/text "HELLO WORLD"]])

(defn init []
  (rn/register-comp "app-name" root-comp))

Register root component with HOT RELOAD

(:require [steroid.rn.core :as rn])

(defn root-comp []
  [rn/view
   [rn/text "HELLO WORLD"]])

(defn init []
  (rn/register-reload-comp "app-name" root-comp))

shadow-cljs.edn

{:source-paths ["src"]

 :dependencies [[rn-shadow-steroid "0.2.6"]]

 :builds       {:dev
                {:target     :react-native
                 :init-fn    app.core/init
                 :output-dir "app"
                 :devtools   {:after-load steroid.rn.core/reload
                              :build-notify steroid.rn.core/build-notify}}}}

Now each time you change your code it will be hot reloaded keeping an app state. NOTE react native fast refresh should be turned off

React Native components

Basic components

[steroid.rn.core :as rn]
rn/app-registry rn/view rn/text rn/image rn/text-input rn/scroll-view
rn/touchable-highlight rn/touchable-native-feedback rn/touchable-opacity rn/touchable-without-feedback

UI components

[steroid.rn.components.ui :as ui]
ui/button ui/switch

List components

[steroid.rn.components.list :as list]
list/flat-list list/section-list

Platform

[steroid.rn.components.platform :as platform]
platform/platform platform/os platform/version platform/android? platform/ios?

Other components

[steroid.rn.components.other :as other]
other/activity-indicator other/alert other/dimensions other/keyboard-avoiding-view other/modal other/refresh-control 

StatusBar components

[steroid.rn.components.status-bar :as status-bar]
(status-bar/set-bar-style bar-style)
(status-bar/set-background-color background-color)
(status-bar/set-hidden hidden)
(status-bar/set-network-activity-indicator-visible network-activity-indicator-visible)
(status-bar/set-translucent translucent)

Picker component

yarn add @react-native-picker/picker
[steroid.rn.components.picker :as picker]
picker/picker picker/item

DateTimePicker component

yarn add @react-native-community/datetimepicker
[steroid.rn.components.datetimepicker :as datetimepicker]
datetimepicker/date-time-picker

Async storage component

yarn add @react-native-async-storage/async-storage
[steroid.rn.components.async-storage :as async-storage]
(async-storage/set-item "key" {:my-value "value"})
(async-storage/get-item "key" #(println "value" %))
(async-storage/remove-item "key")
(async-storage/get-all-keys #(println "keys" %))
(async-storage/clear)

EXAMPLE

(:require [steroid.rn.core :as rn]
          [steroid.rn.components.list :as list])

(defn item-render [{:keys [title image-url description]}]
  [rn/touchable-opacity {:on-press #(do "smth")}
   [rn/view {:style {:padding 5 :flex-direction :row :align-items :center}}
    [rn/image {:style {:width 50 :height 50 :margin 5 :border-radius 25 :margin-right 10}
               :source {:uri image-url}}]
    [rn/view {:style {:flex 1}}
     [rn/text {:style {:font-size 18 :font-family "Inter" :flex-shrink 1}} title]
     [rn/text {:style {:font-family "Inter" :flex-shrink 1 :color :gray :margin-top 5}
               :number-of-lines 2}
      description]]]])

(defn myapp []
    [rn/view {:style {:flex 1 :background-color :white}}
     [rn/text {:style {:font-size 22 :align-self :center :margin 10 :font-family "Inter"}}
      "MyApp"]
     [list/flat-list {:data data-vector :render-fn item-render}]])

React Navigation with HOT RELOAD

Navigation container component

yarn add @react-navigation/native
[steroid.rn.navigation.core :as rnn]
rnn/navigation-container
rnn/create-navigation-container-reload

Stack components

yarn add @react-navigation/stack
[steroid.rn.navigation.stack :as stack]
stack/stack

Bottom tabs components

yarn add @react-navigation/bottom-tabs
[steroid.rn.navigation.bottom-tabs :as bottom-tabs]
bottom-tabs/bottom-tab

Safe area components

yarn add react-native-safe-area-context
[steroid.rn.navigation.safe-area :as safe-area]
safe-area/safe-area-provider safe-area/safe-area-consumer safe-area/safe-area-view

EXAMPLE

`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`

`cd ios; pod install; cd ..`
  (:require [steroid.rn.core :as rn]
            [re-frame.core :as re-frame]
            [steroid.rn.navigation.core :as rnn]
            [steroid.rn.navigation.stack :as stack]
            [steroid.rn.navigation.bottom-tabs :as bottom-tabs]
            [clojurernproject.views :as screens]
            [steroid.rn.navigation.safe-area :as safe-area]
            steroid.rn.navigation.events))

(defn main-screens []
  [bottom-tabs/bottom-tab
   [{:name      :home
     :component screens/home-screen}
    {:name      :basic
     :component screens/basic-screen}]])

(defn root-stack []
  [safe-area/safe-area-provider
   [(rnn/create-navigation-container-reload
     {:on-ready #(re-frame/dispatch [:init-app-db])}
     [stack/stack {:mode :modal :header-mode :none}
      [{:name      :main
        :component main-screens}
       {:name      :modal
        :component screens/modal-screen}]])]])

(defn init []
  (rn/register-comp "ClojureRNProject" root-stack))

Notice that we register root-stack without hot reload but create navigation-container-reload.

re-frame navigation events steroid.rn.navigation.events

After steroid.rn.navigation.events has been required once, re-frame events are registered and you can use them for navigation

(re-frame/dispatch [:navigate-to :modal])

(re-frame/dispatch [:navigate-to :basic])

(re-frame/dispatch [:navigate-back])

ENJOY!

About

React Native with shadow-cljs on steroids

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published