Fixing phantom label on the wheel picker. (#2839)

* Every item label was rendering. We didn't see it because the color is white and the background is also white. If you put any darker color you were seeing it

* Fixed callback dependecies

* reverting changes to wheelpicker

* Formattings

* Added 0 opacity to the fake label

* Changed flatten to compose. Its better when the labelStyle is not given

* Changed composed to flatten

Author: nitzanyiz

src/components/WheelPicker/Item.tsx

@@ -73,6 +73,7 @@ const WheelPickerItem = memo(({
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
 
+  const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
   return (
     <AnimatedTouchableOpacity
       activeOpacity={1}
@@ -88,22 +89,11 @@ const WheelPickerItem = memo(({
       testID={testID}
       row
     >
-      <AnimatedText
-        text60R
-        testID={`${testID}.text`}
-        numberOfLines={1}
-        style={textStyle}
-        recorderTag={'unmask'}
-      >
+      <AnimatedText text60R testID={`${testID}.text`} numberOfLines={1} style={textStyle} recorderTag={'unmask'}>
         {label}
       </AnimatedText>
       {fakeLabel && (
-        <Text
-          text80M
-          $textDefaultLight
-          {...fakeLabelProps}
-          style={fakeLabelStyle}
-        >
+        <Text text80M $textDefaultLight {...fakeLabelProps} style={_fakeLabelStyle}>
           {fakeLabel}
         </Text>
       )}
@@ -122,5 +112,8 @@ const styles = StyleSheet.create({
   },
   disableRTL: {
     flexDirection: 'row-reverse'
+  },
+  hidden: {
+    opacity: 0
   }
 });