[#18461] Update docs about Reanimated apply-animations-to-style

[ulisesmac]

fixes #18461

Summary

Just a guidelines doc update about the vector syntax

status: ready

[ulisesmac]

This guideline is about having animated styles in a styles ns, just used the vector syntax

[ulisesmac]

This is the new guideline 👁️

[ulisesmac]

@ilmotta @briansztamfater @smohamedjavid @J-Son89

I'd appreciate your feedback a lot in order to make this guideline clear and understandable :)

[status-im-auto]

Jenkins Builds

❔	Commit	#️⃣	Finished (UTC)	Duration	Platform	Result
✔️	81b3bb9	#1	2024-01-11 02:50:25	~5 min	tests	📄log
✔️	81b3bb9	#1	2024-01-11 02:51:22	~6 min	ios	📱ipa 📲
✔️	81b3bb9	#1	2024-01-11 02:52:41	~7 min	android-e2e	🤖apk 📲
✔️	81b3bb9	#1	2024-01-11 02:52:45	~7 min	android	🤖apk 📲
✔️	8fd504f	#3	2024-01-12 00:37:42	~5 min	ios	📱ipa 📲
✔️	8fd504f	#3	2024-01-12 00:37:53	~5 min	tests	📄log
✔️	8fd504f	#3	2024-01-12 00:38:53	~6 min	android	🤖apk 📲
✔️	8fd504f	#3	2024-01-12 00:40:06	~8 min	android-e2e	🤖apk 📲

[ilmotta]

I totally forgot about suggesting changes in the guidelines in that PR introducing the vector syntax, so thank you for coming back to this.

[ilmotta]

@ulisesmac, the guidelines have grown and the more we increase it, the less devs will read it over and over. I have seen this problem dozens of times already, people missing what's already in the guidelines.

So in that spirit, I'm thinking if we can make this more concise and to the point.

Here's just one suggestion. I removed a little bit of code from the example and changed the text to start with an actionable verb prefer.

### 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)
for more information.

(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}}]))

[briansztamfater]

I totally agree with this. When I check the guidelines, I usually do a quick search and look for something like 'do not do this, do that instead.' Thus, the more concise the guideline, the better.

[ulisesmac]

Thanks for the suggestion @ilmotta !

[briansztamfater]

Thanks for addressing this @ulisesmac! I approved this as seems good enough for me, but also agree with @ilmotta that we can improve the guideline to be more concise.

[smohamedjavid]

Thank you for adding it in the guidelines 🙌 . Except minor verbal changes (straight to point) suggested by @ilmotta. LGTM!

[ulisesmac]

@status-im/mobile-devs

Just adding the missing guideline about vector syntax in the previous PR: #18381 👀