[go] upgrade @react-native-picker/picker to 2.4.10 (expo#22919)

# Why

Upgrade @react-native-picker/picker vendored module.

# How

Ran `et uvm -m @react-native-picker/picker`.

Added `PickerIOS` tests to demo `selectionColor` prop, [the only
change](react-native-picker/picker#474) since
SDK 48.

# Test Plan

Build Expo Go unversioned locally, tested NCL on iOS/ Android.

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [x] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [x] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [x] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).

apps/bare-expo/package.json

@@ -65,7 +65,7 @@
     "@react-native-community/netinfo": "9.3.10",
     "@react-native-community/slider": "4.4.2",
     "@react-native-masked-view/masked-view": "0.2.9",
-    "@react-native-picker/picker": "2.4.8",
+    "@react-native-picker/picker": "2.4.10",
     "@react-native-segmented-control/segmented-control": "2.4.0",
     "@shopify/flash-list": "1.4.3",
     "expo": "~49.0.0-alpha.1",

apps/native-component-list/package.json

@@ -47,10 +47,11 @@
     "@react-native-community/netinfo": "9.3.10",
     "@react-native-community/slider": "4.4.2",
     "@react-native-masked-view/masked-view": "0.2.9",
-    "@react-native-picker/picker": "2.4.8",
+    "@react-native-picker/picker": "2.4.10",
     "@react-native-segmented-control/segmented-control": "2.4.0",
     "@react-navigation/bottom-tabs": "~6.4.0",
     "@react-navigation/drawer": "6.5.0",
+    "@react-navigation/elements": "~1.3.6",
     "@react-navigation/material-bottom-tabs": "~6.2.4 ",
     "@react-navigation/native": "~6.0.13",
     "@react-navigation/stack": "~6.3.2",

apps/native-component-list/src/screens/PickerScreen.tsx

@@ -1,4 +1,4 @@
-import { Picker, PickerProps } from '@react-native-picker/picker';
+import { Picker, PickerProps, PickerIOS } from '@react-native-picker/picker';
 import { Platform } from 'expo-modules-core';
 import * as React from 'react';
 import { Text, Button } from 'react-native';
@@ -19,6 +19,20 @@ export default function PickerScreen() {
         </Section>
       )}
 
+      {Platform.OS === 'ios' && (
+        <Section title="PickerIOS">
+          <GenericPickerIOS />
+        </Section>
+      )}
+
+      {
+        Platform.OS === 'ios' && (
+          <Section title="PickerIOS (override selected value color)">
+            <GenericPickerIOS selectionColor="rgba(200,100,100,.4)" />
+          </Section>
+        ) /* seems to only work with some color types (like rgba), see https://github.com/react-native-picker/picker/pull/474 */
+      }
+
       {Platform.OS !== 'ios' && (
         <Section title="Disabled">
           <GenericPicker enabled={false} />
@@ -111,3 +125,19 @@ function FocusPicker(props: Partial<React.ComponentProps<typeof Picker>>) {
     </>
   );
 }
+function GenericPickerIOS(props: any) {
+  const [value, setValue] = React.useState<any>('java');
+
+  return (
+    <>
+      <PickerIOS {...props} selectedValue={value} onValueChange={(item) => setValue(item)}>
+        <Picker.Item label="Java" value="java" />
+        <Picker.Item label="JavaScript" value="js" />
+        <Picker.Item label="Objective C" value="objc" />
+        <Picker.Item label="Swift" value="swift" />
+        {props.children}
+      </PickerIOS>
+      <Text>Selected: {value}</Text>
+    </>
+  );
+}

ios/Exponent/Versioned/Core/Api/Components/Picker/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/Exponent/Versioned/Core/Api/Components/Picker/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/Exponent/Versioned/Core/Api/Components/Picker/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)

packages/expo/bundledNativeModules.json

@@ -6,7 +6,7 @@
   "@react-native-community/netinfo": "9.3.10",
   "@react-native-community/slider": "4.4.2",
   "@react-native-community/viewpager": "5.0.11",
-  "@react-native-picker/picker": "2.4.8",
+  "@react-native-picker/picker": "2.4.10",
   "@react-native-segmented-control/segmented-control": "2.4.0",
   "@stripe/stripe-react-native": "0.27.2",
   "expo-analytics-amplitude": "~11.3.0",

yarn.lock

@@ -3318,10 +3318,10 @@
   resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.2.9.tgz#723a7a076d56b8f5f3fda076eaa5b6b82988e854"
   integrity sha512-Hs4vKBKj+15VxHZHFtMaFWSBxXoOE5Ea8saoigWhahp8Mepssm0ezU+2pTl7DK9z8Y9s5uOl/aPb4QmBZ3R3Zw==
 
-"@react-native-picker/[email protected].8":
-  version "2.4.8"
-  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.8.tgz#a1a21f3d6ecadedbc3f0b691a444ddd7baa081f8"
-  integrity sha512-5NQ5XPo1B03YNqKFrV6h9L3CQaHlB80wd4ETHUEABRP2iLh7FHLVObX2GfziD+K/VJb8G4KZcZ23NFBFP1f7bg==
+"@react-native-picker/[email protected].10":
+  version "2.4.10"
+  resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-2.4.10.tgz#339c7bfc6e1d9a5e934122eaaa7767dc1c5fb725"
+  integrity sha512-EvAlHmPEPOwvbP6Pjg/gtDV3XJzIjIxr10fXFNlX5r9HeHw582G1Zt2o8FLyB718nOttgj8HYUTGxvhu4N65sQ==
 
 "@react-native-segmented-control/[email protected]":
   version "2.4.0"