[RNMobile] Set tintColor for ActionSheetIOS (#42996)

* Set tintColor on action sheets for iOS

* [Code quality] Replace hex codes with CSS

* [Code quality] Refine 'buttonTitleColor' const

* Refactor code to use 'usePreferredColorScheme'

'usePreferredColorScheme' is used instead of 'usePreferredColorSchemeStyle' as only a hex code needs to be passed as a tintColor.

* Refactor to workaround test failures

The UI tests in Gutenberg Mobile were failing as 'styles' returns 'undefined' (in the tests) when called from the 'PickerComponent' function. Example: https://app.circleci.com/pipelines/github/wordpress-mobile/gutenberg-mobile/18255/workflows/16df0260-7972-465b-b400-ec37603dfd9e/jobs/100060

This commit seeks to workaround that error by only calling the internal styles from the main Picker class.

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>

packages/components/src/mobile/picker/index.ios.js

@@ -10,6 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { BottomSheetContext } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
 
 class Picker extends Component {
 	presentPicker() {
@@ -23,10 +29,16 @@ class Picker extends Component {
 			isBottomSheetOpened,
 			closeBottomSheet,
 			onHandleClosingBottomSheet,
+			colorScheme,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
+		const buttonTitleColor =
+			colorScheme === 'light'
+				? styles[ 'components-picker__button-title' ].color
+				: styles[ 'components-picker__button-title--dark' ].color;
+
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
 				title,
@@ -35,6 +47,7 @@ class Picker extends Component {
 				destructiveButtonIndex,
 				disabledButtonIndices,
 				anchor: getAnchor && getAnchor(),
+				tintColor: buttonTitleColor,
 			},
 			( buttonIndex ) => {
 				if ( buttonIndex === 0 ) {
@@ -66,13 +79,16 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
 
+	const colorScheme = usePreferredColorScheme();
+
 	return (
 		<Picker
 			ref={ ref }
 			{ ...props }
 			isBottomSheetOpened={ isBottomSheetOpened }
 			closeBottomSheet={ closeGeneralSidebar }
 			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
+			colorScheme={ colorScheme }
 		/>
 	);
 } );

packages/components/src/mobile/picker/styles.native.scss

@@ -19,3 +19,11 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.components-picker__button-title {
+	color: $blue-50;
+}
+
+.components-picker__button-title--dark {
+	color: $blue-30;
+}