fix: allow wheelpicker to change tint for fader

Author: Asgaroth

src/components/sectionsWheelPicker/sectionsWheelPicker.api.json

@@ -24,9 +24,8 @@
     {"name": "inactiveTextColor", "type": "string", "description": "Text color for other, non-focused rows"},
     {"name": "textStyle", "type": "TextStyle", "description": "Row text style"},
     {"name": "xxx", "type": "xxxx", "description": "xxxxx"},
-    {"name": "testID", "type": "string", "description": "The component test id"}
+    {"name": "testID", "type": "string", "description": "The component test id"},
+    {"name": "tintColor", "type": "string", "description": "The tint color of the fade view."}
   ],
-  "snippet": [
-    "<SectionsWheelPicker sections={$1}/>"
-  ]
+  "snippet": ["<SectionsWheelPicker sections={$1}/>"]
 }

src/incubator/WheelPicker/index.tsx

@@ -78,6 +78,10 @@ export interface WheelPickerProps {
    */
   separatorsStyle?: ViewStyle;
   testID?: string;
+  /**
+   * Change the default (white) tint color of the fade view.
+   */
+  tintColor?: string;
 }
 
 const WheelPicker = ({
@@ -96,7 +100,8 @@ const WheelPicker = ({
   children,
   initialValue = 0,
   separatorsStyle,
-  testID
+  testID,
+  tintColor
 }: WheelPickerProps) => {
   const scrollView = useRef<Animated.ScrollView>();
   const offset = useSharedValue(0);
@@ -242,7 +247,7 @@ const WheelPicker = ({
   }, [flatListWidth, labelContainerStyle, label, labelProps, activeTextColor, labelStyle]);
 
   const fader = useMemo(() => (position: FaderPosition) => {
-    return <Fader visible position={position} size={60}/>;
+    return <Fader tintColor={tintColor} visible position={position} size={60}/>;
   },
   []);