feat: numberOfLines prop on iOS

Add multiline support for iOS picker. `numberOfLines` prop on iOS accepts integer value greater or equal to 1.
Picker rows' height is based on that prop.

**NOTE** in order to prevent multiline text being cut on leading and trailing edges on iOS 14, there is hardcoded horizontal padding of 20pts added to UILabel (Closes #212), potentially in future, it can be adjusted via `style` or `itemStyle` props

Author: mateusz1913

README.md

@@ -284,12 +284,12 @@ Style to apply to each of the item labels.
 
 ### `numberOfLines`
 
-On Android, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
+On Android & iOS, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
 such that the total number of lines does not exceed this number. Default is '1'
 
 | Type    | Required | Platform |
 | ------- | -------- | -------- |
-| number  | No       | Android  |
+| number  | No       | Android, iOS  |
 
 ### `onBlur`
 

ios/RNCPicker.h

@@ -9,6 +9,8 @@
 
 #import <React/UIView+React.h>
 
+#import "RNCPickerLabel.h"
+
 @interface RNCPicker : UIPickerView
 
 @property (nonatomic, copy) NSArray<NSDictionary *> *items;
@@ -18,6 +20,8 @@
 @property (nonatomic, strong) UIFont *font;
 @property (nonatomic, assign) NSTextAlignment textAlign;
 
+@property (nonatomic, assign) NSInteger numberOfLines;
+
 @property (nonatomic, copy) RCTBubblingEventBlock onChange;
 
 @end

ios/RNCPicker.m

@@ -22,6 +22,7 @@ - (instancetype)initWithFrame:(CGRect)frame
     _font = [UIFont systemFontOfSize:21]; // TODO: selected title default should be 23.5
     _selectedIndex = NSNotFound;
     _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)
@@ -48,6 +49,20 @@ - (void)setSelectedIndex:(NSInteger)selectedIndex
   }
 }
 
+- (void)setNumberOfLines:(NSInteger)numberOfLines
+{
+  _numberOfLines = numberOfLines;
+  [self reloadAllComponents];
+  [self setNeedsLayout];
+}
+
+- (void) setFont:(UIFont *)font
+{
+  _font = font;
+  [self reloadAllComponents];
+  [self setNeedsLayout];
+}
+
 #pragma mark - UIPickerViewDataSource protocol
 
 - (NSInteger)numberOfComponentsInPickerView:(__unused UIPickerView *)pickerView
@@ -70,33 +85,44 @@ - (NSString *)pickerView:(__unused UIPickerView *)pickerView
   return [RCTConvert NSString:_items[row][@"label"]];
 }
 
-- (CGFloat)pickerView:(__unused UIPickerView *)pickerView rowHeightForComponent:(NSInteger)__unused component {
-  return _font.pointSize + 19;
+- (CGFloat)pickerView:(__unused UIPickerView *)pickerView rowHeightForComponent:(__unused NSInteger) component {
+  return (_font.lineHeight) * _numberOfLines + 20;
 }
 
 - (UIView *)pickerView:(UIPickerView *)pickerView
             viewForRow:(NSInteger)row
           forComponent:(NSInteger)component
-           reusingView:(UILabel *)label
+           reusingView:(UIView *)view
 {
-  if (!label) {
-    label = [[UILabel alloc] initWithFrame:(CGRect){
-      CGPointZero,
-      {
-        [pickerView rowSizeForComponent:component].width,
-        [pickerView rowSizeForComponent:component].height,
-      }
-    }];
+  if (!view) {
+      CGFloat rowHeight = [pickerView rowSizeForComponent:component].height;
+      CGFloat rowWidth = [pickerView rowSizeForComponent:component].width;
+      view = [[UIView alloc] initWithFrame:CGRectZero];
+      RNCPickerLabel* label = [[RNCPickerLabel alloc] initWithFrame:(CGRect) {
+          CGPointZero,
+          {
+              rowWidth,
+              rowHeight,
+          }
+      }];
+    [view insertSubview:label atIndex:0];
   }
 
+  RNCPickerLabel* label = view.subviews[0];
   label.font = _font;
 
   label.textColor = [RCTConvert UIColor:_items[row][@"textColor"]] ?: _color;
 
   label.textAlignment = _textAlign;
   label.text = [self pickerView:pickerView titleForRow:row forComponent:component];
   label.accessibilityIdentifier = _items[row][@"testID"];
-  return label;
+    
+  label.numberOfLines = _numberOfLines;
+
+  label.leftInset = 20.0;
+  label.rightInset = 20.0;
+  
+  return view;
 }
 
 - (void)pickerView:(__unused UIPickerView *)pickerView

ios/RNCPicker.xcodeproj/project.pbxproj

@@ -8,6 +8,7 @@
 
 /* Begin PBXBuildFile section */
 		65A65136236317E000467FDE /* RNCPickerManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 65A65135236317E000467FDE /* RNCPickerManager.m */; };
+		83CE2A3626889B7700470183 /* RNCPickerLabel.m in Sources */ = {isa = PBXBuildFile; fileRef = 83CE2A3526889B7700470183 /* RNCPickerLabel.m */; };
 		B3E7B58A1CC2AC0600A0062D /* RNCPicker.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RNCPicker.m */; };
 /* End PBXBuildFile section */
 
@@ -27,6 +28,8 @@
 		134814201AA4EA6300B7C361 /* libRNCPicker.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRNCPicker.a; sourceTree = BUILT_PRODUCTS_DIR; };
 		65A65134236317E000467FDE /* RNCPickerManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNCPickerManager.h; sourceTree = "<group>"; };
 		65A65135236317E000467FDE /* RNCPickerManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNCPickerManager.m; sourceTree = "<group>"; };
+		83CE2A3426889B7700470183 /* RNCPickerLabel.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNCPickerLabel.h; sourceTree = "<group>"; };
+		83CE2A3526889B7700470183 /* RNCPickerLabel.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNCPickerLabel.m; sourceTree = "<group>"; };
 		B3E7B5881CC2AC0600A0062D /* RNCPicker.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RNCPicker.h; sourceTree = "<group>"; };
 		B3E7B5891CC2AC0600A0062D /* RNCPicker.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RNCPicker.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
@@ -53,6 +56,8 @@
 		58B511D21A9E6C8500147676 = {
 			isa = PBXGroup;
 			children = (
+				83CE2A3426889B7700470183 /* RNCPickerLabel.h */,
+				83CE2A3526889B7700470183 /* RNCPickerLabel.m */,
 				65A65134236317E000467FDE /* RNCPickerManager.h */,
 				65A65135236317E000467FDE /* RNCPickerManager.m */,
 				B3E7B5881CC2AC0600A0062D /* RNCPicker.h */,
@@ -118,6 +123,7 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				83CE2A3626889B7700470183 /* RNCPickerLabel.m in Sources */,
 				B3E7B58A1CC2AC0600A0062D /* RNCPicker.m in Sources */,
 				65A65136236317E000467FDE /* RNCPickerManager.m in Sources */,
 			);

ios/RNCPickerLabel.h

@@ -0,0 +1,10 @@
+#import <UIKit/UIKit.h>
+
+@interface RNCPickerLabel : UILabel
+
+@property (nonatomic, assign) CGFloat topInset;
+@property (nonatomic, assign) CGFloat bottomInset;
+@property (nonatomic, assign) CGFloat leftInset;
+@property (nonatomic, assign) CGFloat rightInset;
+
+@end

ios/RNCPickerLabel.m

@@ -0,0 +1,31 @@
+#import "RNCPickerLabel.h"
+
+@implementation RNCPickerLabel
+
+- (instancetype)initWithFrame:(CGRect)frame
+{
+    self = [super initWithFrame:frame];
+    if (self) {
+        self.topInset = 0.0;
+        self.bottomInset = 0.0;
+        self.leftInset = 0.0;
+        self.rightInset = 0.0;
+    }
+    return self;
+}
+
+- (void)drawTextInRect:(CGRect)rect
+{
+    UIEdgeInsets insets = UIEdgeInsetsMake(self.topInset, self.leftInset, self.bottomInset, self.rightInset);
+    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];
+}
+
+- (CGSize)intrinsicContentSize
+{
+    CGSize intrinsicSuperViewContentSize = [super intrinsicContentSize];
+    intrinsicSuperViewContentSize.height += self.topInset + self.bottomInset;
+    intrinsicSuperViewContentSize.width += self.leftInset + self.rightInset;
+    return intrinsicSuperViewContentSize;
+}
+
+@end

ios/RNCPickerManager.m

@@ -25,6 +25,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(textAlign, NSTextAlignment)
+RCT_EXPORT_VIEW_PROPERTY(numberOfLines, NSInteger)
 RCT_CUSTOM_VIEW_PROPERTY(fontSize, NSNumber, RNCPicker)
 {
   view.font = [RCTFont updateFont:view.font withSize:json ?: @(defaultView.font.pointSize)];

js/PickerIOS.ios.js

@@ -57,6 +57,7 @@ type Props = $ReadOnly<{|
   onChange?: ?(event: PickerIOSChangeEvent) => mixed,
   onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
   selectedValue: ?(number | string),
+  numberOfLines: ?number,
 |}>;
 
 type State = {|
@@ -103,6 +104,10 @@ class PickerIOS extends React.Component<Props, State> {
   }
 
   render(): React.Node {
+    let numberOfLines = Math.round(this.props.numberOfLines ?? 1);
+    if (numberOfLines < 1) {
+      numberOfLines = 1;
+    }
     return (
       <View style={this.props.style}>
         <RNCPickerNativeComponent
@@ -114,6 +119,7 @@ class PickerIOS extends React.Component<Props, State> {
           items={this.state.items}
           selectedIndex={this.state.selectedIndex}
           onChange={this._onChange}
+          numberOfLines={numberOfLines}
         />
       </View>
     );

typings/Picker.d.ts

@@ -76,9 +76,9 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
      */
    dropdownIconColor?: string;
    /**
-   * On Android, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
+   * On Android & iOS, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
    * such that the total number of lines does not exceed this number. Default is '1'
-   * @platform android
+   * @platform android & iOS
    */
    numberOfLines?: number;
    /**

typings/PickerIOS.d.ts

@@ -18,6 +18,7 @@ export interface PickerIOSProps extends ViewProps {
 	onValueChange?: (itemValue: ItemValue, itemIndex: number) => void;
 	selectedValue?: ItemValue;
 	testID?: string;
+	numberOfLines?: number;
 }
 
 declare class PickerIOS extends React.Component<PickerIOSProps, {}> {