From 9b2a0f78b04e78f39f4abce692e89e4e9307d478 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Fri, 20 Dec 2024 16:27:43 +0100
Subject: [PATCH 1/7] remove animated fromm SearchTypeMenuNarrow.tsx

---
 src/components/TabSelector/TabSelectorItem.tsx | 2 +-
 src/pages/Search/SearchTypeMenuNarrow.tsx      | 6 +++---
 src/styles/index.ts                            | 6 +++++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/TabSelector/TabSelectorItem.tsx b/src/components/TabSelector/TabSelectorItem.tsx
index 274813d9a44b..e0f4bebca84b 100644
--- a/src/components/TabSelector/TabSelectorItem.tsx
+++ b/src/components/TabSelector/TabSelectorItem.tsx
@@ -39,7 +39,7 @@ function TabSelectorItem({icon, title = '', onPress = () => {}, backgroundColor
     return (
         <AnimatedPressableWithFeedback
             accessibilityLabel={title}
-            style={[styles.tabSelectorButton, styles.tabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
+            style={[styles.tabSelectorButton, styles.animatedTabBackground(isHovered, isActive, backgroundColor), styles.userSelectNone]}
             wrapperStyle={[styles.flex1]}
             onPress={onPress}
             onHoverIn={() => setIsHovered(true)}
diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx
index 654379c46a77..9315456851d2 100644
--- a/src/pages/Search/SearchTypeMenuNarrow.tsx
+++ b/src/pages/Search/SearchTypeMenuNarrow.tsx
@@ -1,5 +1,5 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react';
-import {Animated, View} from 'react-native';
+import {View} from 'react-native';
 import type {TextStyle, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
@@ -178,7 +178,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                 onPress={openMenu}
             >
                 {({hovered}) => (
-                    <Animated.View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100, StyleUtils.getHeight(variables.componentSizeNormal)]}>
+                    <View style={[styles.tabSelectorButton, styles.tabBackground(hovered, true, theme.border), styles.w100, StyleUtils.getHeight(variables.componentSizeNormal)]}>
                         <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, titleViewStyles]}>
                             <Icon
                                 src={menuIcon}
@@ -197,7 +197,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title,
                                 small
                             />
                         </View>
-                    </Animated.View>
+                    </View>
                 )}
             </PressableWithFeedback>
             <Button
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9468a7af4da2..c898e26d0e73 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4370,7 +4370,11 @@ const styles = (theme: ThemeColors) =>
                 fontSize: variables.fontSizeLabel,
             } satisfies TextStyle),
 
-        tabBackground: (hovered: boolean, isFocused: boolean, background: string | Animated.AnimatedInterpolation<string>) => ({
+        animatedTabBackground: (hovered: boolean, isFocused: boolean, background: string | Animated.AnimatedInterpolation<string>) => ({
+            backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
+        }),
+
+        tabBackground: (hovered: boolean, isFocused: boolean, background: string) => ({
             backgroundColor: hovered && !isFocused ? theme.highlightBG : background,
         }),
 

From 13003f0d3520027103ac6a8601468264cab70695 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 14 Jan 2025 13:22:10 +0100
Subject: [PATCH 2/7] add sample of reanimated code, add rule to not use
 animated to linter, migrate base overly

---
 .eslintrc.js                                  |  3 +-
 contributingGuides/TS_CHEATSHEET.md           | 38 ++++++++++++++-----
 .../Navigators/Overlay/BaseOverlay.tsx        |  7 +---
 .../AppNavigator/Navigators/Overlay/index.tsx |  1 -
 src/styles/index.ts                           | 13 -------
 src/styles/utils/index.ts                     | 12 +-----
 6 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fefad92ce29d..012d25260c08 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ const path = require('path');
 const restrictedImportPaths = [
     {
         name: 'react-native',
-        importNames: ['useWindowDimensions', 'StatusBar', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable', 'Text', 'ScrollView'],
+        importNames: ['useWindowDimensions', 'StatusBar', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable', 'Text', 'ScrollView', 'Animated'],
         message: [
             '',
             "For 'useWindowDimensions', please use '@src/hooks/useWindowDimensions' instead.",
@@ -11,6 +11,7 @@ const restrictedImportPaths = [
             "For 'StatusBar', please use '@libs/StatusBar' instead.",
             "For 'Text', please use '@components/Text' instead.",
             "For 'ScrollView', please use '@components/ScrollView' instead.",
+            "For 'Animated', please use 'Animated' from 'react-native-reanimated' instead."
         ].join('\n'),
     },
     {
diff --git a/contributingGuides/TS_CHEATSHEET.md b/contributingGuides/TS_CHEATSHEET.md
index 77d316bb861d..90dc326ae54b 100644
--- a/contributingGuides/TS_CHEATSHEET.md
+++ b/contributingGuides/TS_CHEATSHEET.md
@@ -100,22 +100,42 @@
 <a name="animated-style"></a><a name="1.4"></a>
 
 - [1.4](#animated-style) **Animated styles**
-
+  
+The only recommended way to create animations is by using the 
+`react-native-reanimated` library because it is much more efficient and convenient 
+than using `Animated` directly from `React Native`.
   ```ts
-  import {useRef} from 'react';
-  import {Animated, StyleProp, ViewStyle} from 'react-native';
+  import React from 'react';
+  import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+  import Animated, { useAnimatedStyle, useSharedValue, withTiming, SharedValue, WithTimingConfig } from 'react-native-reanimated';
 
   type MyComponentProps = {
-      style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  style: {
+    opacity: SharedValue<number>;
+    };
   };
-
+  
   function MyComponent({ style }: MyComponentProps) {
-      return <Animated.View style={style} />;
+    const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: style.opacity.get(),
+      };
+    });
+  
+    return <Animated.View style={animatedStyle}/>;
   }
-
+  
   function App() {
-      const anim = useRef(new Animated.Value(0)).current;
-      return <MyComponent style={{opacity: anim.interpolate({...})}} />;
+    const opacity = useSharedValue(0);
+    
+    const animate = () => {
+      opacity.set(withTiming(1, {
+      duration: 1000,
+      easing: Easing.inOut(Easing.quad),
+      reduceMotion: ReduceMotion.System,
+    }))}
+  
+    return <MyComponent style={{ opacity }} />;
   }
   ```
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
index b097ae6f1ce0..c0f5674e8780 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
@@ -7,9 +7,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
 type BaseOverlayProps = {
-    /* Whether to use native styles tailored for native devices */
-    shouldUseNativeStyles: boolean;
-
     /* Callback to close the modal */
     onPress?: () => void;
 
@@ -17,7 +14,7 @@ type BaseOverlayProps = {
     isModalOnTheLeft?: boolean;
 };
 
-function BaseOverlay({shouldUseNativeStyles, onPress, isModalOnTheLeft = false}: BaseOverlayProps) {
+function BaseOverlay({onPress, isModalOnTheLeft = false}: BaseOverlayProps) {
     const styles = useThemeStyles();
     const {current} = useCardAnimation();
     const {translate} = useLocalize();
@@ -25,7 +22,7 @@ function BaseOverlay({shouldUseNativeStyles, onPress, isModalOnTheLeft = false}:
     return (
         <Animated.View
             id="BaseOverlay"
-            style={shouldUseNativeStyles ? styles.nativeOverlayStyles(current) : styles.overlayStyles(current, isModalOnTheLeft)}
+            style={styles.overlayStyles(current, isModalOnTheLeft)}
         >
             <View style={[styles.flex1, styles.flexColumn]}>
                 {/* In the latest Electron version buttons can't be both clickable and draggable.
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
index c3f9710b90b4..a6232d209fe4 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx
@@ -5,7 +5,6 @@ import BaseOverlay from './BaseOverlay';
 function Overlay({...rest}: Omit<BaseOverlayProps, 'shouldUseNativeStyles'>) {
     return (
         <BaseOverlay
-            shouldUseNativeStyles={false}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
         />
diff --git a/src/styles/index.ts b/src/styles/index.ts
index fde0a0a2c4c5..8d4cff9fddd6 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2013,19 +2013,6 @@ const styles = (theme: ThemeColors) =>
                 }),
             } satisfies ViewStyle),
 
-        nativeOverlayStyles: (current: OverlayStylesParams) =>
-            ({
-                position: 'absolute',
-                backgroundColor: theme.overlay,
-                width: '100%',
-                height: '100%',
-                opacity: current.progress.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, variables.overlayOpacity],
-                    extrapolate: 'clamp',
-                }),
-            } satisfies ViewStyle),
-
         appContent: {
             backgroundColor: theme.appBG,
             overflow: 'hidden',
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 3bb80f71f1b5..8cad5a9aed1b 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1,5 +1,5 @@
 import {StyleSheet} from 'react-native';
-import type {AnimatableNumericValue, Animated, ColorValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {AnimatableNumericValue, ColorValue, ImageStyle, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
@@ -747,15 +747,6 @@ function getMaximumWidth(maxWidth: number): ViewStyle {
     };
 }
 
-/**
- * Return style for opacity animation.
- */
-function fade(fadeAnimation: Animated.Value): Animated.WithAnimatedValue<ViewStyle> {
-    return {
-        opacity: fadeAnimation,
-    };
-}
-
 type AvatarBorderStyleParams = {
     theme: ThemeColors;
     isHovered: boolean;
@@ -1192,7 +1183,6 @@ const staticStyleUtils = {
     getMinimumWidth,
     getMaximumHeight,
     getMaximumWidth,
-    fade,
     getHorizontalStackedAvatarBorderStyle,
     getHorizontalStackedAvatarStyle,
     getHorizontalStackedOverlayAvatarStyle,

From dcea680973735ff199b775bdcc75ef3927d990e2 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 14 Jan 2025 13:58:02 +0100
Subject: [PATCH 3/7] add exceptions for restricted imports

---
 src/components/TabSelector/TabIcon.tsx                           | 1 +
 src/components/TabSelector/TabLabel.tsx                          | 1 +
 src/components/TabSelector/TabSelectorItem.tsx                   | 1 +
 src/components/TabSelector/getBackground/index.native.ts         | 1 +
 src/components/TabSelector/getBackground/types.ts                | 1 +
 src/hooks/useTabNavigatorFocus/index.ts                          | 1 +
 .../Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx   | 1 +
 .../Navigation/AppNavigator/useModalCardStyleInterpolator.ts     | 1 +
 src/styles/index.ts                                              | 1 +
 9 files changed, 9 insertions(+)

diff --git a/src/components/TabSelector/TabIcon.tsx b/src/components/TabSelector/TabIcon.tsx
index 0431d4bb5b64..d81e2c884a0a 100644
--- a/src/components/TabSelector/TabIcon.tsx
+++ b/src/components/TabSelector/TabIcon.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {Animated, StyleSheet, View} from 'react-native';
 import Icon from '@components/Icon';
 import useTheme from '@hooks/useTheme';
diff --git a/src/components/TabSelector/TabLabel.tsx b/src/components/TabSelector/TabLabel.tsx
index 548b4ebccbc8..f80238154789 100644
--- a/src/components/TabSelector/TabLabel.tsx
+++ b/src/components/TabSelector/TabLabel.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {Animated, StyleSheet, View} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/components/TabSelector/TabSelectorItem.tsx b/src/components/TabSelector/TabSelectorItem.tsx
index d799f5e94abe..afe139b766d4 100644
--- a/src/components/TabSelector/TabSelectorItem.tsx
+++ b/src/components/TabSelector/TabSelectorItem.tsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/components/TabSelector/getBackground/index.native.ts b/src/components/TabSelector/getBackground/index.native.ts
index 2fd2a2ef6dd3..dac0b49a5996 100644
--- a/src/components/TabSelector/getBackground/index.native.ts
+++ b/src/components/TabSelector/getBackground/index.native.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type {Animated} from 'react-native';
 import type GetBackgroudColor from './types';
 
diff --git a/src/components/TabSelector/getBackground/types.ts b/src/components/TabSelector/getBackground/types.ts
index a207c3bab35e..e08006e8e9f5 100644
--- a/src/components/TabSelector/getBackground/types.ts
+++ b/src/components/TabSelector/getBackground/types.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type {Animated} from 'react-native';
 import type {ThemeColors} from '@styles/theme/types';
 
diff --git a/src/hooks/useTabNavigatorFocus/index.ts b/src/hooks/useTabNavigatorFocus/index.ts
index f85b630a0834..ebf0137e05cb 100644
--- a/src/hooks/useTabNavigatorFocus/index.ts
+++ b/src/hooks/useTabNavigatorFocus/index.ts
@@ -1,6 +1,7 @@
 import {useTabAnimation} from '@react-navigation/material-top-tabs';
 import {useIsFocused} from '@react-navigation/native';
 import {useEffect, useState} from 'react';
+// eslint-disable-next-line no-restricted-imports
 import type {Animated} from 'react-native';
 import DomUtils from '@libs/DomUtils';
 
diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
index c0f5674e8780..973b25c359ba 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
+++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/BaseOverlay.tsx
@@ -1,5 +1,6 @@
 import {useCardAnimation} from '@react-navigation/stack';
 import React from 'react';
+// eslint-disable-next-line no-restricted-imports
 import {Animated, View} from 'react-native';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
diff --git a/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts
index f4f6179782cc..f45e9601e58c 100644
--- a/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts
+++ b/src/libs/Navigation/AppNavigator/useModalCardStyleInterpolator.ts
@@ -1,4 +1,5 @@
 import type {StackCardInterpolatedStyle, StackCardInterpolationProps} from '@react-navigation/stack';
+// eslint-disable-next-line no-restricted-imports
 import {Animated} from 'react-native';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 8d4cff9fddd6..e3ed75779b38 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2,6 +2,7 @@
 import type {LineLayerStyleProps} from '@rnmapbox/maps/src/utils/MapboxStyles';
 import lodashClamp from 'lodash/clamp';
 import type {LineLayer} from 'react-map-gl';
+// eslint-disable-next-line no-restricted-imports
 import type {Animated, ImageStyle, TextStyle, ViewStyle} from 'react-native';
 import {Platform, StyleSheet} from 'react-native';
 import type {CustomAnimation} from 'react-native-animatable';

From baf916e78da025df15ecd6ef73498b5271cf3f02 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 14 Jan 2025 14:04:34 +0100
Subject: [PATCH 4/7] npm run prettier

---
 .eslintrc.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 012d25260c08..98b4f4ff0fa2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,18 @@ const path = require('path');
 const restrictedImportPaths = [
     {
         name: 'react-native',
-        importNames: ['useWindowDimensions', 'StatusBar', 'TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight', 'Pressable', 'Text', 'ScrollView', 'Animated'],
+        importNames: [
+            'useWindowDimensions',
+            'StatusBar',
+            'TouchableOpacity',
+            'TouchableWithoutFeedback',
+            'TouchableNativeFeedback',
+            'TouchableHighlight',
+            'Pressable',
+            'Text',
+            'ScrollView',
+            'Animated',
+        ],
         message: [
             '',
             "For 'useWindowDimensions', please use '@src/hooks/useWindowDimensions' instead.",
@@ -11,7 +22,7 @@ const restrictedImportPaths = [
             "For 'StatusBar', please use '@libs/StatusBar' instead.",
             "For 'Text', please use '@components/Text' instead.",
             "For 'ScrollView', please use '@components/ScrollView' instead.",
-            "For 'Animated', please use 'Animated' from 'react-native-reanimated' instead."
+            "For 'Animated', please use 'Animated' from 'react-native-reanimated' instead.",
         ].join('\n'),
     },
     {

From a9d28d7fdaf4123db84a443ef77984e4421917e0 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 14 Jan 2025 14:19:27 +0100
Subject: [PATCH 5/7] add exception to restricted import

---
 src/components/TabSelector/getOpacity/types.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/TabSelector/getOpacity/types.ts b/src/components/TabSelector/getOpacity/types.ts
index a15eacf0d8cc..ccef8cd018d0 100644
--- a/src/components/TabSelector/getOpacity/types.ts
+++ b/src/components/TabSelector/getOpacity/types.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-restricted-imports
 import type {Animated} from 'react-native';
 
 /**

From 6d1ba820370a5f7c7fc693bc078b3d635bbd54e6 Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Tue, 14 Jan 2025 14:27:13 +0100
Subject: [PATCH 6/7] fix eslint check

---
 src/styles/utils/index.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 8cad5a9aed1b..bbfa1e5515be 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -4,9 +4,9 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {EdgeInsets} from 'react-native-safe-area-context';
 import type {ValueOf} from 'type-fest';
 import type ImageSVGProps from '@components/ImageSVG/types';
-import * as Browser from '@libs/Browser';
+import {isMobile} from '@libs/Browser';
 import getPlatform from '@libs/getPlatform';
-import * as UserUtils from '@libs/UserUtils';
+import {hashText} from '@libs/UserUtils';
 // eslint-disable-next-line no-restricted-imports
 import {defaultTheme} from '@styles/theme';
 import colors from '@styles/theme/colors';
@@ -275,7 +275,7 @@ function getAvatarBorderStyle(size: AvatarSizeName, type: string): ViewStyle {
  * Helper method to return workspace avatar color styles
  */
 function getDefaultWorkspaceAvatarColor(text: string): ViewStyle {
-    const colorHash = UserUtils.hashText(text.trim(), workspaceColorOptions.length);
+    const colorHash = hashText(text.trim(), workspaceColorOptions.length);
     return workspaceColorOptions.at(colorHash) ?? {backgroundColor: colors.blue200, fill: colors.blue700};
 }
 
@@ -296,7 +296,7 @@ function getEReceiptColorCode(transaction: OnyxEntry<Transaction>): EReceiptColo
         return CONST.ERECEIPT_COLORS.YELLOW;
     }
 
-    const colorHash = UserUtils.hashText(transactionID.trim(), eReceiptColors.length);
+    const colorHash = hashText(transactionID.trim(), eReceiptColors.length);
 
     return eReceiptColors.at(colorHash) ?? CONST.ERECEIPT_COLORS.YELLOW;
 }
@@ -962,7 +962,7 @@ function getComposeTextAreaPadding(isComposerFullSize: boolean): TextStyle {
  * Returns style object for the mobile on WEB
  */
 function getOuterModalStyle(windowHeight: number, viewportOffsetTop: number): ViewStyle {
-    return Browser.isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
+    return isMobile() ? {maxHeight: windowHeight, marginTop: viewportOffsetTop} : {};
 }
 
 /**

From 351777fc5bb1e90e6cd11fdc63c7f8baec49ebbf Mon Sep 17 00:00:00 2001
From: sumo_slonik <jakub.nowakowski@swmansion.com>
Date: Wed, 15 Jan 2025 12:35:23 +0100
Subject: [PATCH 7/7] changes after review

---
 contributingGuides/TS_CHEATSHEET.md | 56 +++++++++++++++--------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/contributingGuides/TS_CHEATSHEET.md b/contributingGuides/TS_CHEATSHEET.md
index 90dc326ae54b..e8c899a0aafb 100644
--- a/contributingGuides/TS_CHEATSHEET.md
+++ b/contributingGuides/TS_CHEATSHEET.md
@@ -100,43 +100,47 @@
 <a name="animated-style"></a><a name="1.4"></a>
 
 - [1.4](#animated-style) **Animated styles**
-  
-The only recommended way to create animations is by using the 
-`react-native-reanimated` library because it is much more efficient and convenient 
-than using `Animated` directly from `React Native`.
+
+The recommended approach to creating animations is by using the `react-native-reanimated` library,
+as it offers greater efficiency and convenience compared to using the `Animated` API directly from
+React Native.
+
   ```ts
   import React from 'react';
   import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
   import Animated, { useAnimatedStyle, useSharedValue, withTiming, SharedValue, WithTimingConfig } from 'react-native-reanimated';
-
+  
   type MyComponentProps = {
-  style: {
-    opacity: SharedValue<number>;
-    };
+    opacity: Animated.SharedValue<number>;
   };
   
-  function MyComponent({ style }: MyComponentProps) {
-    const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: style.opacity.get(),
-      };
-    });
+  const MyComponent = ({ opacity }: MyComponentProps) => {
+    const animatedStyle = useAnimatedStyle(() => ({
+      opacity: opacity.value,
+    }));
   
-    return <Animated.View style={animatedStyle}/>;
-  }
+    return (
+      <Animated.View style={[styles.box, animatedStyle]} />
+    );
+  };
   
-  function App() {
+  const App = () => {
     const opacity = useSharedValue(0);
-    
-    const animate = () => {
-      opacity.set(withTiming(1, {
-      duration: 1000,
-      easing: Easing.inOut(Easing.quad),
-      reduceMotion: ReduceMotion.System,
-    }))}
   
-    return <MyComponent style={{ opacity }} />;
-  }
+    const startAnimation = () => {
+      opacity.value = withTiming(1, {
+        duration: 1000,
+        easing: Easing.inOut(Easing.quad),
+      });
+    };
+  
+    return (
+      <View style={styles.container}>
+        <MyComponent opacity={opacity} />
+        <Button title="Animate" onPress={startAnimation} /> 
+      </View>
+    );
+  };
   ```
 
 <a name="render-prop"></a><a name="1.5"></a>