From f10755c9d8a027c7f163a8d3c503d44a68d489a7 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Thu, 22 Aug 2024 10:40:32 +0300
Subject: [PATCH 01/14] fixed style override in grid list item image (#3222)

* fixed style override in grid list item image

* gridView screen fix
---
 demo/src/screens/componentScreens/GridViewScreen.tsx | 3 ++-
 src/components/gridListItem/index.tsx                | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/demo/src/screens/componentScreens/GridViewScreen.tsx b/demo/src/screens/componentScreens/GridViewScreen.tsx
index 152b6e8ecf..aea16a09b3 100644
--- a/demo/src/screens/componentScreens/GridViewScreen.tsx
+++ b/demo/src/screens/componentScreens/GridViewScreen.tsx
@@ -12,6 +12,7 @@ class GridViewScreen extends Component {
         _.map(contacts, contact => ({
           imageProps: {source: {uri: contact.thumbnail}, borderRadius: 999, style: {backgroundColor: Colors.grey60}},
           title: _.split(contact.name, ' ')[0],
+          titleLines: 1,
           onPress: () => Alert.alert('My name is ' + contact.name)
         })))(conversations),
     products: _.flow(products => _.take(products, 8),
@@ -174,7 +175,7 @@ class GridViewScreen extends Component {
           <GridView items={pairs} numColumns={2}/>
           <Text marginV-s5 text60BO>
             Dynamic itemSize
-            <Text text90>  (Using maxItemWidth)</Text>
+            <Text text90> (Using maxItemWidth)</Text>
           </Text>
           <GridView items={dynamicLayout} maxItemWidth={120}/>
           <Text marginV-s5 text60BO>
diff --git a/src/components/gridListItem/index.tsx b/src/components/gridListItem/index.tsx
index 9f39b52425..8b5968a870 100644
--- a/src/components/gridListItem/index.tsx
+++ b/src/components/gridListItem/index.tsx
@@ -213,7 +213,7 @@ class GridListItem extends Component<GridListItemProps> {
         accessible={renderCustomItem ? true : undefined}
         {...Modifiers.extractAccessibilityProps(this.props)}
       >
-        {imageProps && <Image style={itemSize} {...imageProps} customOverlayContent={children}/>}
+        {imageProps && <Image {...imageProps} style={[itemSize, imageProps?.style]} customOverlayContent={children}/>}
         {!_.isNil(renderCustomItem) && <View style={{width}}>{renderCustomItem()}</View>}
         {renderOverlay && <View style={[styles.overlay, itemSize]}>{renderOverlay()}</View>}
         <TextContainer {...textContainerStyle}>

From 58e958afa6266be97ea4b4bcca83adf50ecb62f1 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Thu, 22 Aug 2024 10:42:04 +0300
Subject: [PATCH 02/14] button border width grow outside the container (#3221)

* button border width grow outside the container

* removed forEach for round button
---
 .../TextFieldScreen.spec.js.snap              |  4 +-
 .../__snapshots__/index.spec.js.snap          | 40 +++++++++----------
 src/components/button/index.tsx               | 21 +---------
 3 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
index b5e809facf..cd6d85d9b8 100644
--- a/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
+++ b/demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap
@@ -3521,8 +3521,8 @@ exports[`TextField Screen renders screen 1`] = `
               "marginLeft": 20,
               "minWidth": 66,
               "opacity": 1,
-              "paddingHorizontal": 10,
-              "paddingVertical": 2,
+              "paddingHorizontal": 11,
+              "paddingVertical": 3,
             }
           }
         >
diff --git a/src/components/button/__tests__/__snapshots__/index.spec.js.snap b/src/components/button/__tests__/__snapshots__/index.spec.js.snap
index 359617374d..b0b2837880 100644
--- a/src/components/button/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/button/__tests__/__snapshots__/index.spec.js.snap
@@ -482,8 +482,8 @@ exports[`Button backgroundColor should return undefined if this button is outlin
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1230,8 +1230,8 @@ exports[`Button container size should reduce padding by outlineWidth in case of
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 18,
-      "paddingVertical": 7.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1408,8 +1408,8 @@ exports[`Button container size should return style for large button 2`] = `
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -1591,8 +1591,8 @@ exports[`Button container size should return style for medium button 2`] = `
       "justifyContent": "center",
       "minWidth": 77,
       "opacity": 1,
-      "paddingHorizontal": 15,
-      "paddingVertical": 5.5,
+      "paddingHorizontal": 16,
+      "paddingVertical": 6.5,
     }
   }
 >
@@ -1867,8 +1867,8 @@ exports[`Button container size should return style for small button 2`] = `
       "justifyContent": "center",
       "minWidth": 70,
       "opacity": 1,
-      "paddingHorizontal": 13,
-      "paddingVertical": 3.5,
+      "paddingHorizontal": 14,
+      "paddingVertical": 4.5,
     }
   }
 >
@@ -2055,8 +2055,8 @@ exports[`Button container size should return style for xSmall button 2`] = `
       "justifyContent": "center",
       "minWidth": 66,
       "opacity": 1,
-      "paddingHorizontal": 10,
-      "paddingVertical": 2,
+      "paddingHorizontal": 11,
+      "paddingVertical": 3,
     }
   }
 >
@@ -4191,8 +4191,8 @@ exports[`Button outline should render button with an outline 1`] = `
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4371,8 +4371,8 @@ exports[`Button outline should render button with outline and outlineColor 1`] =
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4461,8 +4461,8 @@ exports[`Button outline should return custom borderWidth according to outlineWid
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 17,
-      "paddingVertical": 6.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
@@ -4551,8 +4551,8 @@ exports[`Button outline should return disabled color for outline if button is di
       "justifyContent": "center",
       "minWidth": 90,
       "opacity": 1,
-      "paddingHorizontal": 19,
-      "paddingVertical": 8.5,
+      "paddingHorizontal": 20,
+      "paddingVertical": 9.5,
     }
   }
 >
diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
index 0f4f774128..486ef756d2 100644
--- a/src/components/button/index.tsx
+++ b/src/components/button/index.tsx
@@ -149,16 +149,8 @@ class Button extends PureComponent<Props, ButtonState> {
   }
 
   getContainerSizeStyle() {
-    const {
-      outline,
-      avoidMinWidth,
-      avoidInnerPadding,
-      round,
-      size: propsSize,
-      outlineWidth: propsOutlineWidth
-    } = this.props;
+    const {avoidMinWidth, avoidInnerPadding, round, size: propsSize} = this.props;
     const size = propsSize || DEFAULT_SIZE;
-    const outlineWidth = propsOutlineWidth || 1;
 
     const CONTAINER_STYLE_BY_SIZE: Dictionary<any> = {};
     CONTAINER_STYLE_BY_SIZE[Button.sizes.xSmall] = round
@@ -190,17 +182,6 @@ class Button extends PureComponent<Props, ButtonState> {
         minWidth: MIN_WIDTH.LARGE
       };
 
-    if (outline) {
-      _.forEach(CONTAINER_STYLE_BY_SIZE, style => {
-        if (round) {
-          style.padding -= outlineWidth; // eslint-disable-line
-        } else {
-          style.paddingVertical -= outlineWidth; // eslint-disable-line
-          style.paddingHorizontal -= outlineWidth; // eslint-disable-line
-        }
-      });
-    }
-
     const containerSizeStyle = CONTAINER_STYLE_BY_SIZE[size];
 
     if (this.isLink || (this.isIconButton && !round)) {

From 4b6d8f311239a5cc5e68dc06f3a0593c1c0b64d7 Mon Sep 17 00:00:00 2001
From: Gaya Blau <86973357+gayablau@users.noreply.github.com>
Date: Thu, 22 Aug 2024 15:08:12 +0300
Subject: [PATCH 03/14] Fix/tab page nested in scroll view (#3224)

* fix tab page nested in scroll view

* clean

* expand to style prop

* change prop name
---
 src/components/tabController/TabPage.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/tabController/TabPage.tsx b/src/components/tabController/TabPage.tsx
index eddf6f4667..09d6fa014d 100644
--- a/src/components/tabController/TabPage.tsx
+++ b/src/components/tabController/TabPage.tsx
@@ -1,5 +1,5 @@
 import React, {PropsWithChildren, useCallback, useContext, useState, useMemo} from 'react';
-import {StyleSheet} from 'react-native';
+import {type StyleProp, StyleSheet, type ViewStyle} from 'react-native';
 import Reanimated, {useAnimatedStyle, useAnimatedReaction, runOnJS} from 'react-native-reanimated';
 // import {Freeze} from 'react-freeze';
 import TabBarContext from './TabBarContext';
@@ -25,6 +25,10 @@ export interface TabControllerPageProps {
    * Used as a testing identifier
    */
   testID?: string;
+  /**
+   * add style properties to tab page
+   */
+  style?: StyleProp<ViewStyle>;
 }
 
 /**
@@ -36,6 +40,7 @@ export default function TabPage({
   index,
   lazy,
   renderLoading,
+  style,
   lazyLoadTime = 100,
   ...props
 }: PropsWithChildren<TabControllerPageProps>) {
@@ -81,12 +86,17 @@ export default function TabPage({
     };
   });
 
-  const style = useMemo(() => {
-    return [!asCarousel && styles.page, animatedPageStyle, {width: asCarousel ? containerWidth : undefined}];
-  }, [asCarousel, animatedPageStyle, containerWidth]);
+  const _style = useMemo(() => {
+    return [
+      !asCarousel && styles.page,
+      animatedPageStyle,
+      {width: asCarousel ? containerWidth : undefined},
+      style
+    ];
+  }, [asCarousel, animatedPageStyle, containerWidth, style]);
 
   return (
-    <Reanimated.View style={style} testID={testID}>
+    <Reanimated.View style={_style} testID={testID}>
       {!shouldLoad && renderLoading?.()}
       {shouldLoad && props.children}
       {/* <Freeze freeze={!shouldLoad || !focused}>{props.children}</Freeze> */}

From e095f512721e7a187d2203a3af0628a0fae7eb79 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 25 Aug 2024 17:00:57 +0300
Subject: [PATCH 04/14] button driver getIcon/LAbel styles (#3217)

---
 src/components/button/Button.driver.new.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/button/Button.driver.new.ts b/src/components/button/Button.driver.new.ts
index 3953d0fbdb..1160c84c1a 100644
--- a/src/components/button/Button.driver.new.ts
+++ b/src/components/button/Button.driver.new.ts
@@ -1,3 +1,4 @@
+import {StyleSheet} from 'react-native';
 import {useComponentDriver, ComponentProps, usePressableDriver, TextDriver, ImageDriver} from '../../testkit';
 
 export const ButtonDriver = (props: ComponentProps) => {
@@ -17,9 +18,17 @@ export const ButtonDriver = (props: ComponentProps) => {
     return labelDriver;
   };
 
+  const getLabelStyle = () => {
+    return labelDriver?.getStyle();
+  };
+
   const getIcon = () => {
     return iconDriver;
   };
 
-  return {getLabel, getIcon, ...driver};
+  const getIconStyle = () => {
+    return StyleSheet.flatten(iconDriver?.getElement().props.style);
+  };
+
+  return {getLabel, getLabelStyle, getIconStyle, getIcon, ...driver};
 };

From 439bfc5fb8a5b0288bb00aa1ac11e9e77babe0f9 Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 26 Aug 2024 12:13:34 +0300
Subject: [PATCH 05/14] enabled partial sizes to the chip size (#3230)

---
 src/components/chip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chip/index.tsx b/src/components/chip/index.tsx
index 7da3edd408..6e2f94cc38 100644
--- a/src/components/chip/index.tsx
+++ b/src/components/chip/index.tsx
@@ -17,7 +17,7 @@ export type ChipProps = ViewProps &
     /**
      * Chip's size. Number or a width and height object.
      */
-    size?: number | {width: number; height: number};
+    size?: number | Partial<{width: number; height: number}>;
     /**
      * On Chip press callback
      */

From 820745626cc20698882fe8406e8c45ad4251c4fa Mon Sep 17 00:00:00 2001
From: Nitzan Yizhar <nitzany@wix.com>
Date: Mon, 26 Aug 2024 15:33:58 +0300
Subject: [PATCH 06/14] Incubator.Dialog - Fixed content component being
 created on every render. (#3231)

* fixed DialogContent component being created on every render and casuing mounts and unmounts

* rename variable
---
 src/incubator/Dialog/index.tsx            | 4 ++--
 src/incubator/Dialog/useDialogContent.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/incubator/Dialog/index.tsx b/src/incubator/Dialog/index.tsx
index eb4d32cf6c..f95137fe03 100644
--- a/src/incubator/Dialog/index.tsx
+++ b/src/incubator/Dialog/index.tsx
@@ -127,7 +127,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const {DialogContent, containerProps, containerStyle} = useDialogContent({
+  const {renderDialogContent, containerProps, containerStyle} = useDialogContent({
     showCloseButton,
     close,
     closeButtonProps,
@@ -215,7 +215,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     <GestureDetector gesture={panGesture}>
       {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
-        <DialogContent/>
+        {renderDialogContent()}
       </View>
     </GestureDetector>
   );
diff --git a/src/incubator/Dialog/useDialogContent.tsx b/src/incubator/Dialog/useDialogContent.tsx
index b7cf992ea8..a573e2426f 100644
--- a/src/incubator/Dialog/useDialogContent.tsx
+++ b/src/incubator/Dialog/useDialogContent.tsx
@@ -49,7 +49,7 @@ const useDialogContent = (props: InternalDialogCloseButtonProps) => {
     return showCloseButton ? [propsContainerStyle, styles.transparent] : propsContainerStyle;
   }, [showCloseButton, propsContainerStyle]);
 
-  const DialogContent = () => {
+  const renderDialogContent = () => {
     const DialogContent = (
       <>
         {headerProps && <DialogHeader {...headerProps}/>}
@@ -69,7 +69,7 @@ const useDialogContent = (props: InternalDialogCloseButtonProps) => {
     }
   };
 
-  return {DialogContent, containerStyle, containerProps};
+  return {renderDialogContent, containerStyle, containerProps};
 };
 
 export default useDialogContent;

From 612c26c3a93115183604c9b135605741b0ecc45b Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 1 Sep 2024 12:01:40 +0300
Subject: [PATCH 07/14] update thumbStyle when tintColor changes (#3211)

---
 src/incubator/Slider/index.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/incubator/Slider/index.tsx b/src/incubator/Slider/index.tsx
index 08594b018b..e221e4c954 100644
--- a/src/incubator/Slider/index.tsx
+++ b/src/incubator/Slider/index.tsx
@@ -270,11 +270,9 @@ const Slider = React.memo((props: Props) => {
   }, [value, setInitialPositions]);
 
   useEffect(() => {
-    if (!thumbStyle) {
-      _thumbStyle.value = StyleUtils.unpackStyle(defaultThumbStyle, {flatten: true});
-    }
+    _thumbStyle.value = StyleUtils.unpackStyle(thumbStyle ? customThumbStyle : defaultThumbStyle, {flatten: true});
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultThumbStyle, thumbStyle]);
+  }, [defaultThumbStyle, customThumbStyle, thumbStyle]);
 
   const onValueChangeThrottled = useCallback(_.throttle(value => {
     if (!didValueUpdate.current) { // NOTE: don't invoke onValueChange when slider's value prop updated programmatically

From 0aa3ee0b7e59a8ada7946fdd4c6078e1bf2874ec Mon Sep 17 00:00:00 2001
From: Inbal Tish <33805983+Inbal-Tish@users.noreply.github.com>
Date: Sun, 1 Sep 2024 12:57:58 +0300
Subject: [PATCH 08/14] Reanimated and GestureHandler upgrade (#3203)

* SectionsWheelPicker - wrap with GestureHandlerRootView

* remove redundent

* remove // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)

* Modal - applying useGestureHandlerRootView on iOS as well

* TouchableOpacity - migrate from deprecated onGestureEvent to onHandleStateChange

* PanView - migrate from PanGestureHandler with deprecated onGestureEvent to GestureDetector component with gesture

* Calendar header - ignore TS error

* upgrade libraries

* gesture upgrade to 2.16.0

* gestureHandler to 2.14.1

* Modal - update docs

* WheelPicker - wrap with GestureHandlerRootView, instead of wrapping the screen

* Wrapping SectionWheelPickerScreen instead of WheelPicker component

* clean

* Remove migration from useAnimatedGestureHandler

* //@ts-expect-error - useAnimatedGestureHandler migration

* fix TS error on ConnectionStatusBar NetInfo.fetch

* Revert "fix TS error on ConnectionStatusBar NetInfo.fetch"

This reverts commit 323a558252e44d5e8302becf5aaf4cc79e8a243e.

* Revert "//@ts-expect-error - useAnimatedGestureHandler migration"

This reverts commit 03a695ce9f23161482f1274e03387206a98ba8b8.

* Revert "Remove migration from useAnimatedGestureHandler"

This reverts commit 795780513d013a22e2eccb5af6230ab6400838ee.

* Wrap screens with gestureHandlerRootHOC

* Fix TabController's indicator

* Fix PanView (and screen)

* Remove missed comment

* Change to map (also fixes initial indicator)

---------

Co-authored-by: M-i-k-e-l <michaelle@wix.com>
---
 demo/src/screens/componentScreens/index.js    |   8 +-
 .../incubatorScreens/PanViewScreen.tsx        |   5 +-
 package.json                                  |   4 +-
 src/components/marquee/index.tsx              |   2 -
 src/components/modal/api/modal.api.json       |   3 +-
 src/components/modal/index.tsx                |   7 +-
 .../sortableGridList/SortableItem.tsx         |   2 -
 src/components/tabController/PageCarousel.tsx |   1 -
 src/components/tabController/TabBarItem.tsx   |   1 -
 .../tabController/useScrollToItem.ts          |  28 ++--
 src/components/textField/ClearButton.tsx      |   2 -
 src/incubator/Calendar/Header.tsx             |   2 +-
 src/incubator/Calendar/TodayButton.tsx        |   2 -
 src/incubator/Dialog/index.tsx                |   2 -
 src/incubator/Slider/Thumb.tsx                |   2 -
 src/incubator/Slider/index.tsx                |   1 -
 src/incubator/TouchableOpacity.tsx            |  61 +++----
 src/incubator/panView/index.tsx               |  14 +-
 src/incubator/panView/usePanGesture.ts        |  27 ++-
 yarn.lock                                     | 156 ++++++++++++++++--
 20 files changed, 223 insertions(+), 107 deletions(-)

diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 3c764feeba..2dfb53ecd1 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -15,7 +15,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ChipsInputScreen', () => require('./ChipsInputScreen').default);
-  registrar('unicorn.components.ColorPickerScreen', () => require('./ColorPickerScreen').default);
+  registrar('unicorn.components.ColorPickerScreen', () => gestureHandlerRootHOC(require('./ColorPickerScreen').default));
   registrar('unicorn.components.ColorSwatchScreen', () => require('./ColorSwatchScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);
   registrar('unicorn.components.DateTimePickerScreen', () => require('./DateTimePickerScreen').default);
@@ -28,7 +28,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
   registrar('unicorn.components.ImageScreen', () => require('./ImageScreen').default);
   registrar('unicorn.components.GridListScreen', () => require('./GridListScreen').default);
-  registrar('unicorn.components.GridViewScreen', () => require('./GridViewScreen').default);
+  registrar('unicorn.components.GridViewScreen', () => gestureHandlerRootHOC(require('./GridViewScreen').default));
   registrar('unicorn.components.KeyboardAwareScrollViewScreen', () => require('./KeyboardAwareScrollViewScreen').default);
   registrar('unicorn.components.MaskedInputScreen', () => require('./MaskedInputScreen').default);
   registrar('unicorn.components.MarqueeScreen', () => require('./MarqueeScreen').default);
@@ -38,12 +38,12 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.PanDismissibleScreen', () => require('./PanDismissibleScreen').default);
   registrar('unicorn.components.PanListenerScreen', () => require('./PanListenerScreen').default);
   registrar('unicorn.components.PanResponderScreen', () => require('./PanResponderScreen').default);
-  registrar('unicorn.components.PickerScreen', () => require('./PickerScreen').default);
+  registrar('unicorn.components.PickerScreen', () => gestureHandlerRootHOC(require('./PickerScreen').default));
   registrar('unicorn.animations.ProgressBarScreen', () => require('../componentScreens/ProgressBarScreen').default);
   registrar('unicorn.components.ProgressiveImageScreen', () => require('./ProgressiveImageScreen').default);
   registrar('unicorn.components.RadioButtonScreen', () => require('./RadioButtonScreen').default);
   registrar('unicorn.components.ScrollBarScreen', () => require('./ScrollBarScreen').default);
-  registrar('unicorn.components.SectionsWheelPickerScreen', () => require('./SectionsWheelPickerScreen').default);
+  registrar('unicorn.components.SectionsWheelPickerScreen', () => gestureHandlerRootHOC(require('./SectionsWheelPickerScreen').default));
   registrar('unicorn.components.SegmentedControlScreen', () => require('./SegmentedControlScreen').default);
   registrar('unicorn.components.SharedTransitionScreen', () => require('./SharedTransitionScreen').default);
   registrar('unicorn.components.SkeletonViewScreen', () => require('./SkeletonViewScreen').default);
diff --git a/demo/src/screens/incubatorScreens/PanViewScreen.tsx b/demo/src/screens/incubatorScreens/PanViewScreen.tsx
index efc4c5bcf5..ce15754904 100644
--- a/demo/src/screens/incubatorScreens/PanViewScreen.tsx
+++ b/demo/src/screens/incubatorScreens/PanViewScreen.tsx
@@ -146,9 +146,8 @@ class PanViewScreen extends Component {
 
   render() {
     const {showToast, showDialog} = this.state;
-    const Container = showDialog ? View : GestureHandlerRootView;
     return (
-      <Container style={styles.root}>
+      <GestureHandlerRootView style={styles.root}>
         <View marginL-page height={50} centerV>
           <Text text50>New Pan View</Text>
         </View>
@@ -164,7 +163,7 @@ class PanViewScreen extends Component {
         </ScrollView>
         {showToast && this.renderToast()}
         {showDialog && this.renderDialog()}
-      </Container>
+      </GestureHandlerRootView>
     );
   }
 }
diff --git a/package.json b/package.json
index 86120ef9ce..76624636b8 100644
--- a/package.json
+++ b/package.json
@@ -106,12 +106,12 @@
     "react-dom": "^18.2.0",
     "react-native": "0.71.12",
     "react-native-fs": "^2.20.0",
-    "react-native-gesture-handler": "2.9.0",
+    "react-native-gesture-handler": "2.14.1",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
     "react-native-mmkv": "2.11.0",
     "react-native-navigation": "7.32.1",
-    "react-native-reanimated": "3.4.0",
+    "react-native-reanimated": "3.8.1",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
     "react-native-svg-transformer": "1.1.0",
diff --git a/src/components/marquee/index.tsx b/src/components/marquee/index.tsx
index 0e83b9cb3c..9c9a7d8620 100644
--- a/src/components/marquee/index.tsx
+++ b/src/components/marquee/index.tsx
@@ -76,7 +76,6 @@ function Marquee(props: MarqueeProps) {
     }
   }, [viewLayout, textLayout]);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const translateStyle = useAnimatedStyle(() => {
     if (offset.value) {
       return {
@@ -90,7 +89,6 @@ function Marquee(props: MarqueeProps) {
 
   return (
     <View style={[styles.container, containerStyle]} onLayout={onLayoutView}>
-      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View reanimated style={[translateStyle]}>
         <Text style={[styles.text, labelStyle]} onLayout={onLayoutText}>
           {label}
diff --git a/src/components/modal/api/modal.api.json b/src/components/modal/api/modal.api.json
index 85c56251b7..7785707398 100644
--- a/src/components/modal/api/modal.api.json
+++ b/src/components/modal/api/modal.api.json
@@ -33,8 +33,7 @@
     {
       "name": "useGestureHandlerRootView",
       "type": "boolean",
-      "description": "Should add a GestureHandlerRootView",
-      "note": "Android only"
+      "description": "Should add a GestureHandlerRootView"
     }
   ],
   "snippet": [
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index 2329d219dd..482bc998dd 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -45,7 +45,7 @@ export interface ModalProps extends RNModalProps {
    */
   accessibilityLabel?: string;
   /**
-   * Should add a GestureHandlerRootView (Android only)
+   * Should add a GestureHandlerRootView
    */
   useGestureHandlerRootView?: boolean;
   /**
@@ -112,9 +112,8 @@ class Modal extends Component<ModalProps> {
       ...others
     } = this.props;
     const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
-    const useGestureHandler = useGestureHandlerRootView && Constants.isAndroid;
-    const GestureContainer = useGestureHandler ? GestureHandlerRootView : React.Fragment;
-    const gestureContainerProps = useGestureHandler ? {style: styles.fill} : {};
+    const GestureContainer = useGestureHandlerRootView ? GestureHandlerRootView : React.Fragment;
+    const gestureContainerProps = useGestureHandlerRootView ? {style: styles.fill} : {};
     const useKeyboardAvoiding = useKeyboardAvoidingView && Constants.isIOS;
     const KeyboardAvoidingContainer = useKeyboardAvoiding ? KeyboardAvoidingView : React.Fragment;
     const keyboardAvoidingContainerProps = useKeyboardAvoiding
diff --git a/src/components/sortableGridList/SortableItem.tsx b/src/components/sortableGridList/SortableItem.tsx
index 6f7c4ee023..cad24f8ae2 100644
--- a/src/components/sortableGridList/SortableItem.tsx
+++ b/src/components/sortableGridList/SortableItem.tsx
@@ -171,7 +171,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
       }
     });
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const scale = withSpring(isDragging.value ? 1.1 : 1);
     const zIndex = isDragging.value ? 100 : withTiming(0, animationConfig);
@@ -183,7 +182,6 @@ function SortableItem(props: PropsWithChildren<SortableItemProps & ReturnType<ty
   });
 
   return (
-    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[style, animatedStyle]} onLayout={onLayout}>
       <GestureDetector gesture={dragOnLongPressGesture}>
         <View>{props.children}</View>
diff --git a/src/components/tabController/PageCarousel.tsx b/src/components/tabController/PageCarousel.tsx
index d9974415d4..484f70c57e 100644
--- a/src/components/tabController/PageCarousel.tsx
+++ b/src/components/tabController/PageCarousel.tsx
@@ -104,7 +104,6 @@ function PageCarousel(props: ScrollViewProps) {
     <Reanimated.ScrollView
       {...others}
       style={_style}
-      // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
       ref={carousel}
       horizontal
       pagingEnabled
diff --git a/src/components/tabController/TabBarItem.tsx b/src/components/tabController/TabBarItem.tsx
index 1ecf2ca5df..422a1cb8c1 100644
--- a/src/components/tabController/TabBarItem.tsx
+++ b/src/components/tabController/TabBarItem.tsx
@@ -105,7 +105,6 @@ export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spr
 interface Props extends TabControllerItemProps {
   index: number;
   targetPage: any; // TODO: typescript?
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   currentPage: Reanimated.Adaptable<number>;
   onLayout?: (event: LayoutChangeEvent, index: number) => void;
 }
diff --git a/src/components/tabController/useScrollToItem.ts b/src/components/tabController/useScrollToItem.ts
index 6aeac8550d..ff06062f0e 100644
--- a/src/components/tabController/useScrollToItem.ts
+++ b/src/components/tabController/useScrollToItem.ts
@@ -128,13 +128,6 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     const rightOffsets = [];
     rightOffsets.push(-containerWidth + widths[0] + outerSpacing + innerSpacing);
     while (index < itemsCount) {
-      /* map animated widths and offsets */
-      itemsWidthsAnimated.value[index] = widths[index];
-      if (index > 0) {
-        itemsOffsetsAnimated.value[index] =
-            itemsOffsetsAnimated.value[index - 1] + itemsWidthsAnimated.value[index - 1];
-      }
-
       /* calc center, left and right offsets */
       centeredOffsets[index] = currentCenterOffset - screenCenter + widths[index] / 2;
       ++index;
@@ -154,9 +147,24 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
 
     setOffsets({CENTER: centeredOffsets, LEFT: leftOffsets, RIGHT: rightOffsets}); // default for DYNAMIC is CENTER
 
-    // trigger value change
-    itemsWidthsAnimated.value = [...itemsWidthsAnimated.value];
-    itemsOffsetsAnimated.value = [...itemsOffsetsAnimated.value];
+    // Update shared values
+    itemsWidthsAnimated.modify((value) => {
+      'worklet';
+      value.forEach((_, index) => {
+        value[index] = widths[index];
+      });
+      return value;
+    });
+
+    itemsOffsetsAnimated.modify((value) => {
+      'worklet';
+      value.forEach((_, index) => {
+        if (index > 0) {
+          value[index] = value[index - 1] + widths[index - 1];
+        }
+      });
+      return value;
+    });
   },
   [itemsCount, outerSpacing, innerSpacing, addOffsetMargin, containerWidth]);
 
diff --git a/src/components/textField/ClearButton.tsx b/src/components/textField/ClearButton.tsx
index 749c6c01da..cff3c3fda9 100644
--- a/src/components/textField/ClearButton.tsx
+++ b/src/components/textField/ClearButton.tsx
@@ -22,7 +22,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
   const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
   const animatedOpacity = useSharedValue(hasValue ? 1 : 0);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{translateY: animatedValue.value}, {translateX: 0}],
@@ -49,7 +48,6 @@ const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onCl
   };
 
   return (
-    //@ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={style} testID={`${testID}.container`}>
       <Button
         link
diff --git a/src/incubator/Calendar/Header.tsx b/src/incubator/Calendar/Header.tsx
index 0454caa1d5..4643e18ac2 100644
--- a/src/incubator/Calendar/Header.tsx
+++ b/src/incubator/Calendar/Header.tsx
@@ -58,11 +58,11 @@ const Header = (props: HeaderProps) => {
       return <Text style={styles.title}>{title}</Text>;
     }
     return (
+      //@ts-expect-error - hack to animate the title text change
       <AnimatedTextInput 
         value={getTitle(selectedDate.value)} // setting initial value
         {...{animatedProps}}
         editable={false}
-        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={styles.title}
       />);
   };
diff --git a/src/incubator/Calendar/TodayButton.tsx b/src/incubator/Calendar/TodayButton.tsx
index aefc190fc5..123b38ded2 100644
--- a/src/incubator/Calendar/TodayButton.tsx
+++ b/src/incubator/Calendar/TodayButton.tsx
@@ -16,7 +16,6 @@ const TodayButton = (props: TodayButtonProps) => {
   const {containerStyle, buttonProps} = props;
   const {selectedDate, setDate} = useContext(CalendarContext);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [
@@ -40,7 +39,6 @@ const TodayButton = (props: TodayButtonProps) => {
   [buttonProps]);
 
   return (
-    // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
     <View reanimated style={[styles.container, containerStyle, animatedStyle]}>
       <Button
         outline
diff --git a/src/incubator/Dialog/index.tsx b/src/incubator/Dialog/index.tsx
index f95137fe03..bf64bb2856 100644
--- a/src/incubator/Dialog/index.tsx
+++ b/src/incubator/Dialog/index.tsx
@@ -137,7 +137,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     children
   });
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     if (isVertical) {
       return {
@@ -213,7 +212,6 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
 
   const renderDialog = () => (
     <GestureDetector gesture={panGesture}>
-      {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
       <View {...containerProps} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
         {renderDialogContent()}
       </View>
diff --git a/src/incubator/Slider/Thumb.tsx b/src/incubator/Slider/Thumb.tsx
index 87c15f6b01..9ee5c58876 100644
--- a/src/incubator/Slider/Thumb.tsx
+++ b/src/incubator/Slider/Thumb.tsx
@@ -87,7 +87,6 @@ const Thumb = (props: ThumbProps) => {
     });
   gesture.enabled(!disabled);
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
     return {
@@ -110,7 +109,6 @@ const Thumb = (props: ThumbProps) => {
     <GestureDetector gesture={gesture}>
       <View
         reanimated
-        // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
         style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]}
         hitSlop={hitSlop}
         onLayout={onThumbLayout}
diff --git a/src/incubator/Slider/index.tsx b/src/incubator/Slider/index.tsx
index e221e4c954..6a5649f088 100644
--- a/src/incubator/Slider/index.tsx
+++ b/src/incubator/Slider/index.tsx
@@ -373,7 +373,6 @@ const Slider = React.memo((props: Props) => {
     }
   };
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {
diff --git a/src/incubator/TouchableOpacity.tsx b/src/incubator/TouchableOpacity.tsx
index 58d6cbd069..83767181be 100644
--- a/src/incubator/TouchableOpacity.tsx
+++ b/src/incubator/TouchableOpacity.tsx
@@ -1,7 +1,6 @@
 import React, {PropsWithChildren, useCallback, useMemo} from 'react';
 import {LayoutChangeEvent} from 'react-native';
 import Reanimated, {
-  useAnimatedGestureHandler,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -104,35 +103,41 @@ function TouchableOpacity(props: Props) {
     isActive.value = withTiming(value, {duration: 200});
   };
 
-  const tapGestureHandler = useAnimatedGestureHandler({
-    onStart: () => {
-      toggleActive(1);
-    },
-    onEnd: () => {
-      toggleActive(0);
-      runOnJS(onPress)();
-    },
-    onFail: () => {
-      if (!isLongPressed.value) {
+  const tapGestureHandler = ({nativeEvent: {state}}: any) => {
+    switch (state) {
+      case State.BEGAN:
+        toggleActive(1);
+        break;
+      case State.CANCELLED:
+      case State.END:
         toggleActive(0);
-      }
+        runOnJS(onPress)();
+        break;
+      case State.FAILED:
+        if (!isLongPressed.value) {
+          toggleActive(0);
+        }
+        break;
     }
-  });
-
-  const longPressGestureHandler = useAnimatedGestureHandler({
-    onActive: () => {
-      if (!isLongPressed.value) {
-        isLongPressed.value = true;
-        runOnJS(onLongPress)();
-      }
-    },
-    onFinish: () => {
-      toggleActive(0);
-      isLongPressed.value = false;
+  };
+
+  const longPressGestureHandler = ({nativeEvent: {state}}: any) => {
+    switch (state) {
+      case State.ACTIVE:
+        if (!isLongPressed.value) {
+          isLongPressed.value = true;
+          runOnJS(onLongPress)();
+        }
+        break;
+      case State.CANCELLED:
+      case State.END:
+      case State.FAILED:
+        toggleActive(0);
+        isLongPressed.value = false;
+        break;
     }
-  });
+  };
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     const activeColor = feedbackColor || backgroundColor;
     const opacity = interpolate(isActive.value, [0, 1], [1, activeOpacity]);
@@ -151,12 +156,12 @@ function TouchableOpacity(props: Props) {
 
   return (
     <TapGestureHandler
-      onGestureEvent={tapGestureHandler}
+      onHandlerStateChange={tapGestureHandler}
       shouldCancelWhenOutside
       enabled={!disabled}
     >
       <Reanimated.View>
-        <Container onGestureEvent={longPressGestureHandler} shouldCancelWhenOutside>
+        <Container onHandlerStateChange={longPressGestureHandler} shouldCancelWhenOutside>
           <Reanimated.View
             {...others}
             ref={forwardedRef}
diff --git a/src/incubator/panView/index.tsx b/src/incubator/panView/index.tsx
index 3f9374146f..d3cfa8c663 100644
--- a/src/incubator/panView/index.tsx
+++ b/src/incubator/panView/index.tsx
@@ -1,12 +1,11 @@
-import {isEmpty} from 'lodash';
 import React from 'react';
 import {StyleProp, View as RNView, ViewStyle} from 'react-native';
 import {useAnimatedStyle} from 'react-native-reanimated';
-import {PanGestureHandler} from 'react-native-gesture-handler';
+import {GestureDetector} from 'react-native-gesture-handler';
 import {asBaseComponent} from '../../commons/new';
 import View, {ViewProps} from '../../components/view';
-import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
 import useHiddenLocation from '../hooks/useHiddenLocation';
+import {PanningDirections, PanningDirectionsEnum} from './panningUtil';
 import usePanGesture, {
   PanGestureProps,
   PanViewDirections,
@@ -15,6 +14,7 @@ import usePanGesture, {
   DEFAULT_DIRECTIONS,
   DEFAULT_ANIMATION_CONFIG
 } from './usePanGesture';
+
 export {
   PanningDirections,
   PanningDirectionsEnum,
@@ -50,7 +50,7 @@ const PanView = (props: Props) => {
   } = props;
 
   const {setRef, onLayout, hiddenLocation} = useHiddenLocation<RNView>();
-  const {translation, panGestureEvent} = usePanGesture({
+  const {translation, gesture} = usePanGesture({
     directions,
     dismissible,
     animateToOrigin,
@@ -60,7 +60,6 @@ const PanView = (props: Props) => {
     hiddenLocation
   });
 
-  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{translateX: translation.x.value}, {translateY: translation.y.value}]
@@ -69,12 +68,11 @@ const PanView = (props: Props) => {
 
   return (
     <View ref={setRef} style={containerStyle} onLayout={onLayout}>
-      <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
-        {/* @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881) */}
+      <GestureDetector gesture={gesture}>
         <View reanimated style={animatedStyle}>
           <View {...others}>{children}</View>
         </View>
-      </PanGestureHandler>
+      </GestureDetector>
     </View>
   );
 };
diff --git a/src/incubator/panView/usePanGesture.ts b/src/incubator/panView/usePanGesture.ts
index 0fc7cadd81..9e811d147a 100644
--- a/src/incubator/panView/usePanGesture.ts
+++ b/src/incubator/panView/usePanGesture.ts
@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
-import {PanGestureHandlerEventPayload} from 'react-native-gesture-handler';
-import {useSharedValue, withSpring, withTiming, useAnimatedGestureHandler, runOnJS} from 'react-native-reanimated';
+import {useSharedValue, withSpring, withTiming, runOnJS} from 'react-native-reanimated';
+import {PanGestureHandlerEventPayload, Gesture} from 'react-native-gesture-handler';
 import {
   PanningDirections,
   PanningDirectionsEnum,
@@ -69,6 +69,7 @@ const usePanGesture = (props: PanGestureProps) => {
   const waitingForDismiss = useSharedValue<boolean>(false);
   const translationX = useSharedValue<number>(0);
   const translationY = useSharedValue<number>(0);
+  const initialTranslation = useSharedValue<Frame>({x: 0, y: 0});
 
   const getTranslationOptions = () => {
     'worklet';
@@ -112,14 +113,14 @@ const usePanGesture = (props: PanGestureProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animateToOrigin]);
 
-  const onGestureEvent = useAnimatedGestureHandler({
-    onStart: (_event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
-      context.initialTranslation = {x: translationX.value, y: translationY.value};
-    },
-    onActive: (event: PanGestureHandlerEventPayload, context: {initialTranslation: Frame}) => {
-      setTranslation(event, context.initialTranslation);
-    },
-    onEnd: (event: PanGestureHandlerEventPayload) => {
+  const panGesture = Gesture.Pan()
+    .onStart(() => {
+      initialTranslation.value = {x: translationX.value, y: translationY.value};
+    })
+    .onUpdate((event: PanGestureHandlerEventPayload) => {
+      setTranslation(event, initialTranslation.value);
+    })
+    .onEnd((event: PanGestureHandlerEventPayload) => {
       if (dismissible) {
         const velocity = getDismissVelocity(event, directions, getTranslationOptions(), threshold);
         if (velocity) {
@@ -141,11 +142,9 @@ const usePanGesture = (props: PanGestureProps) => {
       } else {
         returnToOrigin();
       }
-    }
-  },
-  [directions, dismissible, setTranslation, returnToOrigin]);
+    });
 
-  return {translation: {x: translationX, y: translationY}, panGestureEvent: onGestureEvent, reset};
+  return {translation: {x: translationX, y: translationY}, gesture: panGesture, reset};
 };
 
 export default usePanGesture;
diff --git a/yarn.lock b/yarn.lock
index 38a19e9cb7..6b16625ba8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -39,6 +39,14 @@
     "@babel/highlight" "^7.24.2"
     picocolors "^1.0.0"
 
+"@babel/code-frame@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
+  integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
+  dependencies:
+    "@babel/highlight" "^7.24.7"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.1.tgz#31c1f66435f2a9c329bb5716a6d6186c516c3742"
@@ -106,6 +114,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
+  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
+  dependencies:
+    "@babel/types" "^7.25.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -223,6 +241,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
   integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
 
+"@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz#94ee67e8ec0e5d44ea7baeb51e571bd26af07878"
+  integrity sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==
+
 "@babel/helper-remap-async-to-generator@^7.18.9", "@babel/helper-remap-async-to-generator@^7.22.20":
   version "7.22.20"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
@@ -255,6 +278,14 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.7.tgz#5f8fa83b69ed5c27adc56044f8be2b3ea96669d9"
+  integrity sha512-IO+DLT3LQUElMbpzlatRASEyQtfhSE0+m465v++3jyyXeBTBUjtVZg28/gHeV5mrTJqvEKhKroBGAvhW+qPHiQ==
+  dependencies:
+    "@babel/traverse" "^7.24.7"
+    "@babel/types" "^7.24.7"
+
 "@babel/helper-split-export-declaration@^7.22.6":
   version "7.22.6"
   resolved "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
@@ -267,11 +298,21 @@
   resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
   integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
 
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.22.20":
   version "7.22.20"
   resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
   integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
 
+"@babel/helper-validator-identifier@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
+  integrity sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==
+
 "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
@@ -314,6 +355,16 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
+"@babel/highlight@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
+  integrity sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.7"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.13.16", "@babel/parser@^7.14.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.0", "@babel/parser@^7.20.7", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.7.0":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
@@ -324,6 +375,13 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
+"@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
+  version "7.25.3"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz#b645d9ba8c2bc5b7af50f0fe949f9edbeb07c8cf"
@@ -584,6 +642,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-arrow-functions@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz#4f6886c11e423bd69f3ce51dbf42424a5f275514"
+  integrity sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-async-generator-functions@^7.24.3":
   version "7.24.3"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz#8fa7ae481b100768cc9842c8617808c5352b8b89"
@@ -807,6 +872,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-nullish-coalescing-operator@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.7.tgz#1de4534c590af9596f53d67f52a92f12db984120"
+  integrity sha512-Ts7xQVk1OEocqzm8rHMXHlxvsfZ0cEF2yomUqpKENHWMF4zKk175Y4q8H5knJes6PgYad50uuRmt3UJuhBw8pQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
@@ -823,13 +896,6 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-transform-object-assign@^7.16.7":
-  version "7.24.1"
-  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.24.1.tgz#46a70169e56970aafd13a6ae677d5b497fc227e7"
-  integrity sha512-I1kctor9iKtupb7jv7FyjApHCuKLBKCblVAeHVK9PB6FW7GI0ac6RtobC3MwwJy8CZ1JxuhQmnbrsqI5G8hAIg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.24.0"
-
 "@babel/plugin-transform-object-rest-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz#5a3ce73caf0e7871a02e1c31e8b473093af241ff"
@@ -856,6 +922,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-transform-optional-chaining@^7.0.0-0":
+  version "7.24.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.8.tgz#bb02a67b60ff0406085c13d104c99a835cdf365d"
+  integrity sha512-5cTOLSMs9eypEy8JUVvIKOu6NgvbJMnpG62VpIHrTmROdQ+L5mDAaI40g25k5vXti55JWNX5jCkq3HZxXBQANw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.8"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.7"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-transform-optional-chaining@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6"
@@ -978,6 +1053,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-shorthand-properties@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz#85448c6b996e122fa9e289746140aaa99da64e73"
+  integrity sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-spread@^7.0.0", "@babel/plugin-transform-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz#a1acf9152cbf690e4da0ba10790b3ac7d2b2b391"
@@ -1000,6 +1082,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-template-literals@^7.0.0-0":
+  version "7.24.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz#a05debb4a9072ae8f985bcf77f3f215434c8f8c8"
+  integrity sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.7"
+
 "@babel/plugin-transform-typeof-symbol@^7.24.1":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.1.tgz#6831f78647080dec044f7e9f68003d99424f94c7"
@@ -1207,6 +1296,15 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
+"@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
 "@babel/traverse@^7.20.0", "@babel/traverse@^7.24.1", "@babel/traverse@^7.7.0":
   version "7.24.1"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
@@ -1223,6 +1321,19 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.24.7":
+  version "7.25.3"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
+  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.0"
+    "@babel/parser" "^7.25.3"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.2"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.21.3", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.24.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.24.0"
   resolved "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
@@ -1232,6 +1343,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.24.7", "@babel/types@^7.25.0", "@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -6858,10 +6978,10 @@ react-native-fs@^2.20.0:
     base-64 "^0.1.0"
     utf8 "^3.0.0"
 
-react-native-gesture-handler@2.9.0:
-  version "2.9.0"
-  resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.9.0.tgz#2f63812e523c646f25b9ad660fc6f75948e51241"
-  integrity sha512-a0BcH3Qb1tgVqUutc6d3VuWQkI1AM3+fJx8dkxzZs9t06qA27QgURYFoklpabuWpsUTzuKRpxleykp25E8m7tg==
+react-native-gesture-handler@2.14.1:
+  version "2.14.1"
+  resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.14.1.tgz#930640231024b7921435ab476aa501dd4a6b2e01"
+  integrity sha512-YiM1BApV4aKeuwsM6O4C2ufwewYEKk6VMXOt0YqEZFMwABBFWhXLySFZYjBSNRU2USGppJbfHP1q1DfFQpKhdA==
   dependencies:
     "@egjs/hammerjs" "^2.0.17"
     hoist-non-react-statics "^3.3.0"
@@ -6900,12 +7020,16 @@ react-native-navigation@7.32.1:
     react-lifecycles-compat "2.0.0"
     tslib "1.9.3"
 
-react-native-reanimated@3.4.0:
-  version "3.4.0"
-  resolved "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.4.0.tgz#93b4d0b4b48e712fdc93f6828654b93083c6531d"
-  integrity sha512-B5cZJseoIkYlZTRBRN0xuU1NBxUza/6GSHhiEBQfbOufWVlUMMcWUecIRVglW49l8d2wXbfCdQlNyVoFqmHkaQ==
+react-native-reanimated@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.8.1.tgz#45c13d4bedebef8df3d5a8756f25072de65960d7"
+  integrity sha512-EdM0vr3JEaNtqvstqESaPfOBy0gjYBkr1iEolWJ82Ax7io8y9OVUIphgsLKTB36CtR1XtmBw0RZVj7KArc7ZVA==
   dependencies:
-    "@babel/plugin-transform-object-assign" "^7.16.7"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0-0"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.0.0-0"
+    "@babel/plugin-transform-optional-chaining" "^7.0.0-0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0-0"
+    "@babel/plugin-transform-template-literals" "^7.0.0-0"
     "@babel/preset-typescript" "^7.16.7"
     convert-source-map "^2.0.0"
     invariant "^2.2.4"

From c708c6a2b6f4a9401202a9c929fd38ab3b41a14f Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 1 Sep 2024 13:32:46 +0300
Subject: [PATCH 09/14] wheel picker separators code refcator (#3232)

---
 src/components/WheelPicker/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/WheelPicker/index.tsx b/src/components/WheelPicker/index.tsx
index 92d1f5b831..f133338249 100644
--- a/src/components/WheelPicker/index.tsx
+++ b/src/components/WheelPicker/index.tsx
@@ -349,6 +349,7 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
 
   return (
     <View testID={testID} bg-$backgroundDefault style={style}>
+      {separators}
       <View row centerH>
         <View flexG>
           <AnimatedFlatList
@@ -383,7 +384,6 @@ const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>)
       {label && labelContainer}
       {fader(FaderPosition.BOTTOM)}
       {fader(FaderPosition.TOP)}
-      {separators}
     </View>
   );
 };

From abf77aa78e6ca1c18bc26c1b4b654e451f7024e0 Mon Sep 17 00:00:00 2001
From: Adi Mordo <adids1221@gmail.com>
Date: Sun, 1 Sep 2024 15:56:17 +0300
Subject: [PATCH 10/14] removed default background from picker item list
 (#3233)

---
 src/components/picker/PickerItemsList.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index edbeafbc76..26db3b6e97 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -168,7 +168,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   };
 
   return (
-    <View bg-$backgroundDefault style={wrapperContainerStyle} useSafeArea={useSafeArea}>
+    <View style={wrapperContainerStyle} useSafeArea={useSafeArea}>
       {renderPickerHeader()}
       {renderContent()}
     </View>

From fd931ea2044d9ae255050508b970d0657d3f7b90 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Tue, 3 Sep 2024 13:27:53 +0300
Subject: [PATCH 11/14] Support rendering TabController inside a ScrollView
 (with a header) (#3235)

* Support rendering TabController inside a ScrollView (with a header)

* Wrap screen with gestureHandlerRootHOC

* Small fix - code review
---
 demo/src/screens/MenuStructure.js             |  1 +
 .../TabControllerWithStickyHeaderScreen.tsx   | 68 +++++++++++++++++++
 demo/src/screens/componentScreens/index.js    |  1 +
 src/components/tabController/TabBarContext.ts |  1 +
 src/components/tabController/TabPage.tsx      | 19 +++---
 .../tabController/apis/tabController.api.json |  7 ++
 src/components/tabController/index.tsx        |  8 ++-
 7 files changed, 96 insertions(+), 9 deletions(-)
 create mode 100644 demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx

diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 4b85987a68..3b2bfbe003 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -114,6 +114,7 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'TabControllerWithStickyHeader', tags: 'tabbar controller native sticky header', screen: 'unicorn.components.TabControllerWithStickyHeaderScreen'},
       {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',
diff --git a/demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx b/demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx
new file mode 100644
index 0000000000..41fd1ed0cf
--- /dev/null
+++ b/demo/src/screens/componentScreens/TabControllerWithStickyHeaderScreen.tsx
@@ -0,0 +1,68 @@
+import React, {Component} from 'react';
+import {ScrollView} from 'react-native';
+import {View, Text, Card, Image, TabController} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&w=500&dpr=1';
+const items = [
+  {key: 'tab1', label: 'Tab 1'},
+  {key: 'tab2', label: 'Tab 2'}
+];
+
+export default class TabControllerWithStickyHeaderScreen extends Component {
+  renderHeader = () => {
+    return (
+      <View bg-red30 height={280} bottom>
+        <Image source={{uri: IMAGE_URL}} style={{flex: 1}}/>
+      </View>
+    );
+  };
+
+  renderTab1 = () => {
+    return (
+      <View bg-green80 paddingT-s5>
+        {_.times(7, i => {
+          return (
+            <Card key={i} height={100} marginB-s5 marginH-s5 center>
+              <Text text40>item {i}</Text>
+            </Card>
+          );
+        })}
+      </View>
+    );
+  };
+
+  renderTab2 = () => {
+    return (
+      <View bg-orange40 paddingT-s5>
+        {_.times(15, i => {
+          return (
+            <View key={i} height={100} marginB-s5 marginH-s5 center bg-orange60>
+              <Text text40> item {i}</Text>
+            </View>
+          );
+        })}
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <TabController items={items} nestedInScrollView>
+        <ScrollView
+          // stickyHeaderHiddenOnScroll
+          stickyHeaderIndices={[1]}
+        >
+          {this.renderHeader()}
+          <TabController.TabBar/>
+
+          <View flex>
+            <TabController.TabPage index={0}>{this.renderTab1()}</TabController.TabPage>
+            <TabController.TabPage index={1}>{this.renderTab2()}</TabController.TabPage>
+          </View>
+        </ScrollView>
+      </TabController>
+    );
+  }
+}
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 2dfb53ecd1..630ecdcb86 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -55,6 +55,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.StepperScreen', () => require('./StepperScreen').default);
   registrar('unicorn.components.SwitchScreen', () => require('./SwitchScreen').default);
   registrar('unicorn.components.TabControllerScreen', () => require('./TabControllerScreen').default);
+  registrar('unicorn.components.TabControllerWithStickyHeaderScreen', () => gestureHandlerRootHOC(require('./TabControllerWithStickyHeaderScreen').default));
   registrar('unicorn.components.TextFieldScreen', () => require('./TextFieldScreen').default);
   registrar('unicorn.components.TextScreen', () => require('./TextScreen').default);
   registrar('unicorn.components.ToastsScreen', () => require('./ToastsScreen').default);
diff --git a/src/components/tabController/TabBarContext.ts b/src/components/tabController/TabBarContext.ts
index 6a1e0ac1b4..69a11e6f18 100644
--- a/src/components/tabController/TabBarContext.ts
+++ b/src/components/tabController/TabBarContext.ts
@@ -6,6 +6,7 @@ interface TabControllerContext {
   items?: any[];
   itemsCount: number;
   asCarousel?: boolean;
+  nestedInScrollView?: boolean;
   containerWidth: number;
   pageWidth: number;
   /** static page index */
diff --git a/src/components/tabController/TabPage.tsx b/src/components/tabController/TabPage.tsx
index 09d6fa014d..20a22bfbb5 100644
--- a/src/components/tabController/TabPage.tsx
+++ b/src/components/tabController/TabPage.tsx
@@ -44,7 +44,7 @@ export default function TabPage({
   lazyLoadTime = 100,
   ...props
 }: PropsWithChildren<TabControllerPageProps>) {
-  const {currentPage, asCarousel, containerWidth} = useContext(TabBarContext);
+  const {currentPage, asCarousel, nestedInScrollView, containerWidth} = useContext(TabBarContext);
   const [shouldLoad, setLoaded] = useState(!lazy);
   // const [focused, setFocused] = useState(false);
 
@@ -80,19 +80,22 @@ export default function TabPage({
 
   const animatedPageStyle = useAnimatedStyle(() => {
     const isActive = Math.round(currentPage.value) === index;
-    return {
+
+    // TODO: Fix to proper animated style once Reanimated export AnimatedStyleProp
+    const style: any = {
       opacity: isActive || asCarousel ? 1 : 0,
       zIndex: isActive || asCarousel ? 1 : 0
     };
+
+    if (nestedInScrollView) {
+      style.position = isActive ? 'relative' : 'absolute';
+    }
+
+    return style;
   });
 
   const _style = useMemo(() => {
-    return [
-      !asCarousel && styles.page,
-      animatedPageStyle,
-      {width: asCarousel ? containerWidth : undefined},
-      style
-    ];
+    return [!asCarousel && styles.page, animatedPageStyle, {width: asCarousel ? containerWidth : undefined}, style];
   }, [asCarousel, animatedPageStyle, containerWidth, style]);
 
   return (
diff --git a/src/components/tabController/apis/tabController.api.json b/src/components/tabController/apis/tabController.api.json
index 5bea7bd9b5..f838bfbfae 100644
--- a/src/components/tabController/apis/tabController.api.json
+++ b/src/components/tabController/apis/tabController.api.json
@@ -19,6 +19,13 @@
       "description": "When using TabController.PageCarousel this should be turned on",
       "default": "false"
     },
+    {
+      "name": "nestedInScrollView",
+      "type": "boolean",
+      "description": "Pass when TabController is render inside a ScrollView (with a header)",
+      "note": "Does not work with asCarousel",
+      "default": "false"
+    },
     {"name": "carouselPageWidth;", "type": "number", "description": "Pass for custom carousel page width"}
   ],
   "snippet": [
diff --git a/src/components/tabController/index.tsx b/src/components/tabController/index.tsx
index 6a39a9015a..88f20ca6d6 100644
--- a/src/components/tabController/index.tsx
+++ b/src/components/tabController/index.tsx
@@ -37,6 +37,10 @@ export interface TabControllerProps {
    * When using TabController.PageCarousel this should be turned on
    */
   asCarousel?: boolean;
+  /**
+   * Pass when TabController is render inside a ScrollView (with a header)
+   */
+  nestedInScrollView?: boolean;
   /**
    * Pass for custom carousel page width
    */
@@ -65,6 +69,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
   const {
     initialIndex = 0,
     asCarousel = false,
+    nestedInScrollView = false,
     items,
     onChangeIndex = _.noop,
     carouselPageWidth,
@@ -123,6 +128,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
       initialIndex,
       asCarousel,
       pageWidth,
+      nestedInScrollView,
       /* Items */
       items,
       ignoredItems,
@@ -135,7 +141,7 @@ const TabController = React.forwardRef((props: PropsWithChildren<TabControllerPr
       onChangeIndex,
       setCurrentIndex
     };
-  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth]);
+  }, [initialIndex, asCarousel, items, onChangeIndex, screenWidth, nestedInScrollView]);
 
   return <TabBarContext.Provider value={context}>{children}</TabBarContext.Provider>;
 });

From 430c875dc0765d22f3a3cc736f23f7ab84fb0c0e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 4 Sep 2024 08:00:54 +0300
Subject: [PATCH 12/14] Bump micromatch from 4.0.5 to 4.0.8 (#3237)

Bumps [micromatch](https://github.com/micromatch/micromatch) from 4.0.5 to 4.0.8.
- [Release notes](https://github.com/micromatch/micromatch/releases)
- [Changelog](https://github.com/micromatch/micromatch/blob/master/CHANGELOG.md)
- [Commits](https://github.com/micromatch/micromatch/compare/4.0.5...4.0.8)

---
updated-dependencies:
- dependency-name: micromatch
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 6b16625ba8..0fb46591d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3031,7 +3031,14 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4365,6 +4372,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 finalhandler@1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -6231,11 +6245,11 @@ metro@0.73.10:
     yargs "^17.5.1"
 
 micromatch@^4.0.4:
-  version "4.0.5"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
-    braces "^3.0.2"
+    braces "^3.0.3"
     picomatch "^2.3.1"
 
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":

From abeac15af2ea3559cabe404986732fbc219109d5 Mon Sep 17 00:00:00 2001
From: Illia Panasenko <hottdogg2008@gmail.com>
Date: Wed, 4 Sep 2024 07:08:30 +0200
Subject: [PATCH 13/14] fix types for TextField `validate` props (#3160)

* fix types for TextField `validate` props

* Fix PR TS errors

---------

Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
---
 demo/src/screens/componentScreens/NumberInputScreen.tsx | 2 ++
 src/components/textField/types.ts                       | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/demo/src/screens/componentScreens/NumberInputScreen.tsx b/demo/src/screens/componentScreens/NumberInputScreen.tsx
index c561970b84..f35c92d33d 100644
--- a/demo/src/screens/componentScreens/NumberInputScreen.tsx
+++ b/demo/src/screens/componentScreens/NumberInputScreen.tsx
@@ -111,6 +111,7 @@ const NumberInputScreen = () => {
     if (currentData.current?.type === 'valid') {
       return currentData.current.number > MINIMUM_PRICE;
     }
+    return false;
   }, []);
 
   const isWithinDiscountPercentage = useCallback(() => {
@@ -119,6 +120,7 @@ const NumberInputScreen = () => {
         currentData.current.number >= DISCOUNT_PERCENTAGE.min && currentData.current.number <= DISCOUNT_PERCENTAGE.max
       );
     }
+    return false;
   }, []);
 
   const validate = useMemo((): Incubator.TextFieldProps['validate'] => {
diff --git a/src/components/textField/types.ts b/src/components/textField/types.ts
index d2939b5362..f74e0dec75 100644
--- a/src/components/textField/types.ts
+++ b/src/components/textField/types.ts
@@ -37,7 +37,7 @@ export enum Presets {
 
 export type ValidationMessagePositionType = `${ValidationMessagePosition}` | ValidationMessagePosition;
 
-export type Validator = Function | keyof typeof formValidators;
+export type Validator = ((value?: string) => boolean) | keyof typeof formValidators;
 
 export interface FieldStateProps extends InputProps {
   validateOnStart?: boolean;

From c95d43f621662f3f3899656502019b16f04829fb Mon Sep 17 00:00:00 2001
From: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Date: Wed, 4 Sep 2024 10:26:36 +0300
Subject: [PATCH 14/14] TabController - fix indicator when using old reanimated
 (ignore TS) (#3241)

---
 src/components/tabController/useScrollToItem.ts | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/tabController/useScrollToItem.ts b/src/components/tabController/useScrollToItem.ts
index ff06062f0e..ffbd7ab99c 100644
--- a/src/components/tabController/useScrollToItem.ts
+++ b/src/components/tabController/useScrollToItem.ts
@@ -100,8 +100,8 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     innerSpacing = 0
   } = props;
   const itemsWidths = useRef<(number | null)[]>(_.times(itemsCount, () => null));
-  const itemsWidthsAnimated = useSharedValue(_.times(itemsCount, () => 0));
-  const itemsOffsetsAnimated = useSharedValue(_.times(itemsCount, () => 0));
+  const itemsWidthsAnimated = useSharedValue<number[]>(_.times(itemsCount, () => 0));
+  const itemsOffsetsAnimated = useSharedValue<number[]>(_.times(itemsCount, () => 0));
   const currentIndex = useRef<number>(selectedIndex || 0);
   const [offsets, setOffsets] = useState<Offsets>({CENTER: [], LEFT: [], RIGHT: []});
   const {scrollViewRef, scrollTo, onContentSizeChange, onLayout} = useScrollTo<T>({scrollViewRef: propsScrollViewRef});
@@ -148,12 +148,10 @@ const useScrollToItem = <T extends ScrollToSupportedViews>(props: ScrollToItemPr
     setOffsets({CENTER: centeredOffsets, LEFT: leftOffsets, RIGHT: rightOffsets}); // default for DYNAMIC is CENTER
 
     // Update shared values
+    // @ts-expect-error pretty sure this is a bug in reanimated since itemsWidthsAnimated is defined as SharedValue<number[]>
     itemsWidthsAnimated.modify((value) => {
       'worklet';
-      value.forEach((_, index) => {
-        value[index] = widths[index];
-      });
-      return value;
+      return value.map((_, index) => widths[index]);
     });
 
     itemsOffsetsAnimated.modify((value) => {