fix: Issue 294 - selection color (#474)

Author: Adam Burdette

README.md

@@ -190,6 +190,7 @@ return <Picker
 - [`mode`](#mode)
 - [`prompt`](#prompt)
 - [`itemStyle`](#itemstyle)
+- [`selectionColor`](#selectionColor)
 
 ---
 
@@ -320,6 +321,12 @@ such that the total number of lines does not exceed this number. Default is '1'
 | --------- | -------- | -------- |
 | function  | no       | Android  |
 
+### `selectionColor`
+
+| Type      | Required | Platform |
+| ------- | -------- | -------- |
+| ColorValue  | no       | iOS  |
+
 ## Methods
 
 ### `blur` (Android only, lib version 1.16.0+)
@@ -396,6 +403,7 @@ If set to false, the specific item will be disabled, i.e. the user will not be a
 - [`itemStyle`](#itemstyle)
 - [`onValueChange`](#onvaluechange)
 - [`selectedValue`](#selectedvalue)
+- [`selectionColor`](#selectionColor)
 - [`themeVariant`](#themeVariant)
 
 ---
@@ -428,6 +436,14 @@ If set to false, the specific item will be disabled, i.e. the user will not be a
 
 ---
 
+### `selectionColor`
+
+| Type      | Required | Platform |
+| ------- | -------- | -------- |
+| ColorValue  | no       | iOS  |
+
+---
+
 ### `themeVariant`
 
 | Type | Required |

example/src/PickerIOSExample.tsx

@@ -132,6 +132,7 @@ function PickerStyleExample() {
     <PickerIOS
       itemStyle={styles.item}
       selectedValue={carMake}
+      selectionColor="rgba(0, 0, 0, 0.3)"
       onValueChange={(value) => setCarMake(value)}>
       {Object.keys(CAR_MAKES_AND_MODELS).map((value) => (
         <PickerIOS.Item

ios/RNCPicker.h

@@ -15,6 +15,7 @@
 
 @property (nonatomic, copy) NSArray<NSDictionary *> *items;
 @property (nonatomic, assign) NSInteger selectedIndex;
+@property (nonatomic, assign) NSInteger selectionColor;
 
 @property (nonatomic, strong) UIColor *color;
 @property (nonatomic, strong) UIFont *font;

ios/RNCPicker.m

@@ -20,9 +20,10 @@ - (instancetype)initWithFrame:(CGRect)frame
   if ((self = [super initWithFrame:frame])) {
     _color = [UIColor blackColor];
     _font = [UIFont systemFontOfSize:21]; // TODO: selected title default should be 23.5
+    _numberOfLines = 1;
     _selectedIndex = NSNotFound;
+    _selectionColor = 0;
     _textAlign = NSTextAlignmentCenter;
-    _numberOfLines = 1;
     self.delegate = self;
     self.dataSource = self;
     [self selectRow:0 inComponent:0 animated:YES]; // Workaround for missing selection indicator lines (see https://stackoverflow.com/questions/39564660/uipickerview-selection-indicator-not-visible-in-ios10)
@@ -108,6 +109,12 @@ - (UIView *)pickerView:(UIPickerView *)pickerView
     [view insertSubview:label atIndex:0];
   }
 
+  if (@available(iOS 14.0, *)) {
+      if (_selectionColor) {
+          pickerView.subviews[1].backgroundColor = [RCTConvert UIColor:@(_selectionColor)];
+      }
+  }
+    
   RNCPickerLabel* label = view.subviews[0];
   label.font = _font;
 

ios/RNCPickerManager.m

@@ -22,6 +22,7 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(items, NSArray<NSDictionary *>)
 RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
+RCT_EXPORT_VIEW_PROPERTY(selectionColor, NSInteger)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(textAlign, NSTextAlignment)

js/PickerIOS.ios.js

@@ -44,10 +44,11 @@ type Props = $ReadOnly<{|
   ...ViewProps,
   children: ChildrenArray<Element<typeof PickerIOSItem>>,
   itemStyle?: ?TextStyleProp,
+  numberOfLines: ?number,
   onChange?: ?(event: PickerIOSChangeEvent) => mixed,
   onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
   selectedValue: ?(number | string),
-  numberOfLines: ?number,
+  selectionColor: ?string,
   themeVariant: ?string,
 |}>;
 
@@ -99,19 +100,21 @@ class PickerIOS extends React.Component<Props, State> {
     if (numberOfLines < 1) {
       numberOfLines = 1;
     }
+
     return (
       <View style={this.props.style}>
         <RNCPickerNativeComponent
           ref={(picker) => {
             this._picker = picker;
           }}
-          themeVariant={this.props.themeVariant}
-          testID={this.props.testID}
-          style={[styles.pickerIOS, this.props.itemStyle]}
           items={this.state.items}
-          selectedIndex={this.state.selectedIndex}
-          onChange={this._onChange}
           numberOfLines={numberOfLines}
+          onChange={this._onChange}
+          selectedIndex={this.state.selectedIndex}
+          selectionColor={processColor(this.props.selectionColor)}
+          style={[styles.pickerIOS, this.props.itemStyle]}
+          testID={this.props.testID}
+          themeVariant={this.props.themeVariant}
         />
       </View>
     );

js/RNCPickerNativeComponent.js

@@ -35,11 +35,12 @@ type Label = Stringish | number;
 export type RNCPickerIOSType = HostComponent<
   $ReadOnly<{|
     items: $ReadOnlyArray<RNCPickerIOSTypeItemType>,
+    numberOfLines?: ?number,
     onChange: (event: PickerIOSChangeEvent) => void,
     selectedIndex: number,
+    selectionColor?: ?ProcessedColorValue,
     style?: ?TextStyleProp,
     testID?: ?string,
-    numberOfLines?: ?number,
     themeVariant?: ?string,
   |}>,
 >;

typings/Picker.d.ts

@@ -69,6 +69,11 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
    * @platform ios
    */
   itemStyle?: StyleProp<TextStyle>;
+  /**
+  * Color to apply to the selection indicator.
+  * @platform ios
+  */
+  selectionColor?: ColorValue;
   /**
    * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
    * @platform android