Add guidelines for defining styles with apply-animations-to-style

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2023-03-28 11:29:54 -03:00
parent de86586208
commit 0f8aec00f2
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
1 changed files with 22 additions and 0 deletions

View File

@ -90,6 +90,28 @@ their styles in the top-level of the properties map, prefer to add them inside t
] ]
``` ```
### Always 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
(defn circle
[]
(let [opacity (reanimated/use-shared-value 1)]
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity opacity}
style/circle-container)}]))
;; good
(defn circle
[]
(let [opacity (reanimated/use-shared-value 1)]
[reanimated/view {:style (style/circle-container opacity)}]))
```
### Don't use percents to define width/height ### Don't use percents to define width/height
In ReactNative, all layouts use the [flexbox In ReactNative, all layouts use the [flexbox