RN picker - implement background color

Summary:
add support to the android implementation of the Picker component for setting the background color.

Changelog: [Android] [Added] - Support item background color in Dialog Picker

Differential Revision: D20566131

fbshipit-source-id: d693b40803fa1051ec955c5728994c820fecd9e9

Author: Eddie Dugan

Libraries/Components/Picker/AndroidDialogPickerNativeComponent.js

@@ -41,6 +41,7 @@ type NativeProps = $ReadOnly<{|
 
   // Props
   color?: ?ColorValue,
+  backgroundColor?: ?ColorValue,
   enabled?: WithDefault<boolean, true>,
   items: $ReadOnlyArray<PickerItem>,
   prompt?: WithDefault<string, ''>,

Libraries/Components/Picker/AndroidDropdownPickerNativeComponent.js

@@ -41,6 +41,7 @@ type NativeProps = $ReadOnly<{|
 
   // Props
   color?: ?ColorValue,
+  backgroundColor?: ?ColorValue,
   enabled?: WithDefault<boolean, true>,
   items: $ReadOnlyArray<PickerItem>,
   prompt?: WithDefault<string, ''>,

Libraries/Components/Picker/Picker.js

@@ -96,6 +96,12 @@ type PickerProps = $ReadOnly<{|
    */
   itemStyle?: ?TextStyleProp,
 
+  /**
+   * Color of the item background.
+   * @platform android
+   */
+  backgroundColor?: ColorValue,
+
   /**
    * Prompt string for this picker, used on Android in dialog mode as the title of the dialog.
    * @platform android

Libraries/Components/Picker/PickerAndroid.android.js

@@ -21,6 +21,7 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import invariant from 'invariant';
 import processColor from '../../StyleSheet/processColor';
 
+import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
 import type {SyntheticEvent} from '../../Types/CoreEventTypes';
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 
@@ -36,6 +37,7 @@ type Props = $ReadOnly<{|
   accessibilityLabel?: ?Stringish,
   children?: React.Node,
   style?: ?TextStyleProp,
+  backgroundColor?: ?ColorValue,
   selectedValue?: ?PickerItemValue,
   enabled?: ?boolean,
   mode?: ?('dialog' | 'dropdown'),
@@ -123,6 +125,7 @@ function PickerAndroid(props: Props): React.Node {
       styles.pickerAndroid,
       props.style,
     ),
+    backgroundColor: props.backgroundColor,
     testID: props.testID,
   };
   return props.mode === 'dropdown' ? (

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/AndroidDialogPickerManagerDelegate.java

@@ -26,6 +26,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "color":
         mViewManager.setColor(view, value == null ? null : ((Double) value).intValue());
         break;
+      case "backgroundColor":
+        mViewManager.setBackgroundColor(view, value == null ? null : ((Double) value).intValue());
+        break;
       case "enabled":
         mViewManager.setEnabled(view, value == null ? true : (boolean) value);
         break;

ReactAndroid/src/main/java/com/facebook/react/viewmanagers/AndroidDialogPickerManagerInterface.java

@@ -15,6 +15,7 @@
 
 public interface AndroidDialogPickerManagerInterface<T extends View> {
   void setColor(T view, @Nullable Integer value);
+  void setBackgroundColor(T view, @Nullable int value);
   void setEnabled(T view, boolean value);
   void setItems(T view, @Nullable ReadableArray value);
   void setPrompt(T view, @Nullable String value);

ReactAndroid/src/main/java/com/facebook/react/views/picker/ReactDialogPickerManager.java

@@ -8,6 +8,7 @@
 package com.facebook.react.views.picker;
 
 import android.widget.Spinner;
+import androidx.annotation.NonNull;
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewManagerDelegate;
@@ -41,4 +42,9 @@ protected ReactPicker createViewInstance(ThemedReactContext reactContext) {
   protected ViewManagerDelegate<ReactPicker> getDelegate() {
     return mDelegate;
   }
+
+  @Override
+  public void setBackgroundColor(@NonNull ReactPicker view, int backgroundColor) {
+    view.setStagedBackgroundColor(backgroundColor);
+  }
 }

ReactAndroid/src/main/java/com/facebook/react/views/picker/ReactPicker.java

@@ -25,6 +25,7 @@ public class ReactPicker extends AppCompatSpinner {
   private @Nullable List<ReactPickerItem> mStagedItems;
   private @Nullable Integer mStagedSelection;
   private @Nullable Integer mStagedPrimaryTextColor;
+  private @Nullable Integer mStagedBackgroundColor;
 
   private final OnItemSelectedListener mItemSelectedListener =
       new OnItemSelectedListener() {
@@ -136,6 +137,10 @@ public OnSelectListener getOnSelectListener() {
     mStagedPrimaryTextColor = primaryColor;
   }
 
+  /* package */ void setStagedBackgroundColor(@Nullable Integer backgroundColor) {
+    mStagedBackgroundColor = backgroundColor;
+  }
+
   /**
    * Used to commit staged data into ReactPicker view. During this period, we will disable {@link
    * OnSelectListener#onItemSelected(int)} temporarily, so we don't get an event when changing the
@@ -171,6 +176,13 @@ public OnSelectListener getOnSelectListener() {
       mStagedPrimaryTextColor = null;
     }
 
+    if (mStagedBackgroundColor != null
+        && adapter != null
+        && mStagedBackgroundColor != adapter.getBackgroundColor()) {
+      adapter.setBackgroundColor(mStagedBackgroundColor);
+      mStagedBackgroundColor = null;
+    }
+
     setOnItemSelectedListener(mItemSelectedListener);
   }
 

ReactAndroid/src/main/java/com/facebook/react/views/picker/ReactPickerAdapter.java

@@ -23,6 +23,7 @@ class ReactPickerAdapter extends ArrayAdapter<ReactPickerItem> {
 
   private final LayoutInflater mInflater;
   private @Nullable Integer mPrimaryTextColor;
+  private @Nullable Integer mBackgroundColor;
 
   public ReactPickerAdapter(Context context, List<ReactPickerItem> data) {
     super(context, 0, data);
@@ -67,15 +68,28 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
       textView.setTextColor((ColorStateList) textView.getTag());
     }
 
+    if (mBackgroundColor != null) {
+      textView.setBackgroundColor(mBackgroundColor);
+    }
+
     return textView;
   }
 
   public @Nullable Integer getPrimaryTextColor() {
     return mPrimaryTextColor;
   }
 
+  public @Nullable Integer getBackgroundColor() {
+    return mBackgroundColor;
+  }
+
   public void setPrimaryTextColor(@Nullable Integer primaryTextColor) {
     mPrimaryTextColor = primaryTextColor;
     notifyDataSetChanged();
   }
+
+  public void setBackgroundColor(@Nullable Integer backgroundColor) {
+    mBackgroundColor = backgroundColor;
+    notifyDataSetChanged();
+  }
 }