diff --git a/doc/new-guidelines.md b/doc/new-guidelines.md index 90b44f6a83..ae126d63a5 100644 --- a/doc/new-guidelines.md +++ b/doc/new-guidelines.md @@ -36,6 +36,50 @@ Pay special attention to: ## Dos and don'ts +### Hiccup + +Never use anonymous inline function in hiccup, this will lead to reinitialization of component on each render of parent component + +```clojure +;; bad +(defn checkbox-view + [{:keys [size]}] + [rn/view + [(fn [] [rn/view])]]) + +;; good +(defn comp [] + [rn/view]) + +(defn checkbox-view + [{:keys [size]}] + [rn/view + [comp]]) +``` + +This mistake mostly happens with functional components + +```clojure +;; bad +(fn [] + (let [atom (rf/sub [:sub])] + (fn [] + [:f> + (fn [] + [rn/text atom] + +;; good +(defn f-comp [atom] + [rn/text atom]) + +(fn [] + (let [atom (rf/sub [:sub])] + (fn [] + [:f> f-comp atom]))) +``` + +it's important to name functional components with `f-` prefix + ### Component styles Prefer to define styles in a separate file named `style.cljs`, colocated with @@ -90,11 +134,38 @@ their styles in the top-level of the properties map, prefer to add them inside t ] ``` -### Always apply animated styles in the style file +Also its fine to keep one liner styles in view + +```clojure +;; ok +[rn/view {:style {:flex 1 :padding-top 5}}] +``` + +### Don't define properties in styles ns + +Properties must be set on view level + +```clojure +;; bad +{:style {:position :absolute + :left 0 + :right 0 + :bottom 0} + :blur-amount 30 + :blur-radius 25 + :blur-type :transparent + :overlay-color :transparent} + +;; good +{:position :absolute + :left 0 + :right 0 + :bottom 0} +``` + + +### Apply animated styles in the style file -When implementing styles for reanimated views, we should always define -them in the style file and apply animations with reanimated/apply-animations-to-style -in the style definition. ```clojure ;; bad