From f29d3944a4285121eb3b18488c03878c26699b68 Mon Sep 17 00:00:00 2001 From: Keith Kurak Date: Mon, 19 Jun 2023 18:57:21 -0400 Subject: [PATCH] [go] upgrade @react-native-picker/picker to 2.4.10 (#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](https://github.com/react-native-picker/picker/pull/474) since SDK 48. # Test Plan Build Expo Go unversioned locally, tested NCL on iOS/ Android. # Checklist - [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 | 2 +- apps/native-component-list/package.json | 3 +- .../src/screens/PickerScreen.tsx | 32 ++++++++++++++++++- .../Core/Api/Components/Picker/RNCPicker.h | 1 + .../Core/Api/Components/Picker/RNCPicker.m | 9 +++++- .../Api/Components/Picker/RNCPickerManager.m | 1 + packages/expo/bundledNativeModules.json | 2 +- yarn.lock | 8 ++--- 8 files changed, 49 insertions(+), 9 deletions(-) diff --git a/apps/bare-expo/package.json b/apps/bare-expo/package.json index 843086c7eee68b..aec62a3b45f7b5 100644 --- a/apps/bare-expo/package.json +++ b/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", diff --git a/apps/native-component-list/package.json b/apps/native-component-list/package.json index fc743232a49a10..d557d0cde0a406 100644 --- a/apps/native-component-list/package.json +++ b/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", diff --git a/apps/native-component-list/src/screens/PickerScreen.tsx b/apps/native-component-list/src/screens/PickerScreen.tsx index 4d39263bbc5e8b..94e0e4e923861e 100644 --- a/apps/native-component-list/src/screens/PickerScreen.tsx +++ b/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() { )} + {Platform.OS === 'ios' && ( +
+ +
+ )} + + { + Platform.OS === 'ios' && ( +
+ +
+ ) /* seems to only work with some color types (like rgba), see https://github.com/react-native-picker/picker/pull/474 */ + } + {Platform.OS !== 'ios' && (
@@ -111,3 +125,19 @@ function FocusPicker(props: Partial>) { ); } +function GenericPickerIOS(props: any) { + const [value, setValue] = React.useState('java'); + + return ( + <> + setValue(item)}> + + + + + {props.children} + + Selected: {value} + + ); +} diff --git a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.h b/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.h index 024fa3b5078cde..cf9776d6e73be3 100644 --- a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.h +++ b/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.h @@ -15,6 +15,7 @@ @property (nonatomic, copy) NSArray *items; @property (nonatomic, assign) NSInteger selectedIndex; +@property (nonatomic, assign) NSInteger selectionColor; @property (nonatomic, strong) UIColor *color; @property (nonatomic, strong) UIFont *font; diff --git a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.m b/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.m index a2aa89e0b1cd1f..abe0eee031ccd5 100644 --- a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPicker.m +++ b/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; diff --git a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPickerManager.m b/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPickerManager.m index be5c37f3659d12..5ee8937e9ceb29 100644 --- a/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPickerManager.m +++ b/ios/Exponent/Versioned/Core/Api/Components/Picker/RNCPickerManager.m @@ -22,6 +22,7 @@ - (UIView *)view RCT_EXPORT_VIEW_PROPERTY(items, NSArray) 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) diff --git a/packages/expo/bundledNativeModules.json b/packages/expo/bundledNativeModules.json index 2eb842ef12aae5..6f487dfbddb920 100644 --- a/packages/expo/bundledNativeModules.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 273a2b7ca56b53..4db42094bac948 100644 --- a/yarn.lock +++ b/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/picker@2.4.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/picker@2.4.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/segmented-control@2.4.0": version "2.4.0"