status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-01-12 01:34:31 +00:00
Code Issues Projects Releases Wiki Activity

[#18461] Update guideline about apply-animations-to-style (#18462)

Browse Source
This commit is contained in:
Ulises Manuel 2024-01-11 19:17:07 -06:00 committed by GitHub
parent a14e228e3a
commit 5cc027a1f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
doc/new-guidelines.md
View File

@ -212,16 +212,15 @@ Properties must be set on view level
:bottom 0}
```
### Apply animated styles in the style file
### Animated styles in the style file
```clojure
;; bad
(defn circle
[]
(let [opacity (reanimated/use-shared-value 1)]
[reanimated/view {:style (reanimated/apply-animations-to-style
{:opacity opacity}
style/circle-container)}]))
[reanimated/view {:style [{:opacity opacity}
style/circle-container]}]))
;; good
(defn circle
@ -230,6 +229,38 @@ Properties must be set on view level
[reanimated/view {:style (style/circle-container opacity)}]))
```
### Pass a vector of styles to Reanimated view
Prefer to pass a vector of styles to `react-native.reanimated/view` `:style`
prop instead of using `apply-animations-to-style` directly. For more details, check out Reanimated docs about [inline
styles](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/your-first-animation/#defining-a-shared-value)
and [useAnimatedStyle](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/animating-styles-and-props/#animating-styles).
```clojure
(defn f-view []
(let [scroll-x (reanimated/use-shared-value 0)
opacity (reanimated/interpolate scroll-x [0 45 50] [1 1 0])]
[reanimated/view
;; bad
{:style (reanimated/apply-animations-to-style
{:opacity opacity
:transform [{:translate-x scroll-x}]}
{:flex-direction :row})}
;; good
{:style [{:opacity opacity
:transform [{:translate-x scroll-x}]}
{:flex-direction :row}]}
;; other valid and good variants
{:style [{:opacity opacity}
{:transform [{:translate-x scroll-x}]}
{:flex-direction :row}]}
{:style {:opacity opacity
:transform [{:translate-x scroll-x}]
:flex-direction :row}}]))
```
### Don't use percents to define width/height
In ReactNative, all layouts use the [flexbox