fix(android): spinner background issues (#290)

fixes #266
fixes #235
fixes #112

In order to fix issues with buggy color/style changes to spinner's background
I created custom background resource which should look identical to default one

It allowed to finally have proper color/background change possibilities.

With default background, if one had applied custom backgroundColor in JS,
it overriden whole background for spinner, which resulted in removing
dropdown icon completely.

With new custom background resource, we can apply color changes directly to
icon or spinner background.

As a side-effect, I introduced possibility to change icon ripple color also,
it is exposed as dropdownIconRippleColor prop

**NOTE**: minSdkVersion was increased to 21 (now it matches with react-native core)

Co-authored-by: Jesse Katsumata <[email protected]>

Author: mateusz1913

README.md

@@ -256,11 +256,21 @@ On Android, specifies how to display the selection items when the user taps on t
 
 ### `dropdownIconColor`
 
-On Android, specifies color of dropdown triangle. Input value should be hexadecimal string.
+On Android, specifies color of dropdown triangle. Input value should be value that is accepted by react-native `processColor` function.
 
-| Type   | Required | Platform |
-| ------ | -------- | -------- |
-| string | No       | Android  |
+| Type       | Required | Platform |
+| ---------- | -------- | -------- |
+| ColorValue | No       | Android  |
+
+---
+
+### `dropdownIconRippleColor`
+
+On Android, specifies ripple color of dropdown triangle. Input value should be value that is accepted by react-native `processColor` function.
+
+| Type       | Required | Platform |
+| ---------- | -------- | -------- |
+| ColorValue | No       | Android  |
 
 ---
 
@@ -338,9 +348,9 @@ Actual value on the Picker Item
 
 Displayed color on the Picker Item
 
-| Type    | Required | 
-| ------- | -------- | 
-| string  | no       | 
+| Type        | Required | 
+| ----------- | -------- | 
+| ColorValue  | no       | 
 
 
 ### `fontFamily`

android/gradle.properties

@@ -1,4 +1,4 @@
 ReactNativePicker_compileSdkVersion=28
 ReactNativePicker_buildToolsVersion=28.0.3
 ReactNativePicker_targetSdkVersion=28
-ReactNativePicker_minSdkVersion=16
+ReactNativePicker_minSdkVersion=21

android/src/main/java/com/reactnativecommunity/picker/ReactPicker.java

@@ -9,8 +9,13 @@
 
 import android.content.Context;
 import android.content.ContextWrapper;
+import android.content.res.ColorStateList;
 import android.content.res.Resources;
-import android.os.Build;
+import android.graphics.Color;
+import android.graphics.PorterDuff;
+import android.graphics.drawable.GradientDrawable;
+import android.graphics.drawable.LayerDrawable;
+import android.graphics.drawable.RippleDrawable;
 import android.util.AttributeSet;
 import android.util.TypedValue;
 import android.view.View;
@@ -66,40 +71,52 @@ public interface OnFocusListener {
   public ReactPicker(Context context) {
     super(context);
     handleRTL(context);
+    setSpinnerBackground();
   }
 
   public ReactPicker(Context context, int mode) {
     super(context, mode);
     mMode = mode;
     handleRTL(context);
+    setSpinnerBackground();
   }
 
   public ReactPicker(Context context, AttributeSet attrs) {
     super(context, attrs);
     handleRTL(context);
+    setSpinnerBackground();
   }
 
   public ReactPicker(Context context, AttributeSet attrs, int defStyle) {
     super(context, attrs, defStyle);
     handleRTL(context);
+    setSpinnerBackground();
   }
 
   public ReactPicker(Context context, AttributeSet attrs, int defStyle, int mode) {
     super(context, attrs, defStyle, mode);
     mMode = mode;
     handleRTL(context);
+    setSpinnerBackground();
+  }
+
+  private void setSpinnerBackground() {
+    this.setBackgroundResource(R.drawable.spinner_dropdown_background);
+    // If there are multiple spinners rendered, for some reason, next spinners are inheriting
+    // background color of previous spinners if there is no color provided as a style
+    // To prevent, let's set color manually in constructor, if any value will be provided as a style,
+    // it will override value that is set here.
+    this.setBackgroundColor(Color.TRANSPARENT);
   }
 
   private void handleRTL(Context context) {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
-      boolean isRTL = I18nUtil.getInstance().isRTL(context);
-      if (isRTL) {
-        this.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
-        this.setTextDirection(View.TEXT_DIRECTION_RTL);
-      } else {
-        this.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
-        this.setTextDirection(View.TEXT_DIRECTION_LTR);
-      }
+    boolean isRTL = I18nUtil.getInstance().isRTL(context);
+    if (isRTL) {
+      this.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
+      this.setTextDirection(View.TEXT_DIRECTION_RTL);
+    } else {
+      this.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
+      this.setTextDirection(View.TEXT_DIRECTION_LTR);
     }
   }
 
@@ -240,6 +257,24 @@ public void setPrimaryColor(@Nullable Integer primaryColor) {
     mPrimaryColor = primaryColor;
   }
 
+  public void setDropdownIconColor(@Nullable int color) {
+    LayerDrawable drawable = (LayerDrawable) this.getBackground();
+    RippleDrawable backgroundDrawable = (RippleDrawable) drawable.findDrawableByLayerId(R.id.dropdown_icon);
+    backgroundDrawable.setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
+  }
+
+  public void setDropdownIconRippleColor(@Nullable int color) {
+    LayerDrawable drawable = (LayerDrawable) this.getBackground();
+    RippleDrawable backgroundDrawable = (RippleDrawable) drawable.findDrawableByLayerId(R.id.dropdown_icon);
+    backgroundDrawable.setColor(ColorStateList.valueOf(color));
+  }
+
+  public void setBackgroundColor(@Nullable int color) {
+    LayerDrawable drawable = (LayerDrawable) this.getBackground();
+    GradientDrawable backgroundDrawable = (GradientDrawable) drawable.findDrawableByLayerId(R.id.dropdown_background);
+    backgroundDrawable.setColor(color);
+  }
+
   @VisibleForTesting
   public int getMode() {
     return mMode;

android/src/main/java/com/reactnativecommunity/picker/ReactPickerManager.java

@@ -8,9 +8,8 @@
 package com.reactnativecommunity.picker;
 
 import android.content.Context;
-import android.graphics.PorterDuff;
+import android.graphics.Color;
 import android.graphics.Typeface;
-import android.os.Build;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
@@ -111,9 +110,20 @@ public void setSelected(ReactPicker view, int selected) {
     view.setStagedSelection(selected);
   }
 
+  @ReactProp(name = ViewProps.BACKGROUND_COLOR)
+  @Override
+  public void setBackgroundColor(ReactPicker view, @Nullable int color) {
+    view.setBackgroundColor(color);
+  }
+
   @ReactProp(name = "dropdownIconColor")
   public void setDropdownIconColor(ReactPicker view, @Nullable int color) {
-    view.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
+    view.setDropdownIconColor(color);
+  }
+
+  @ReactProp(name = "dropdownIconRippleColor")
+  public void setDropdownIconRippleColor(ReactPicker view, @Nullable int color) {
+    view.setDropdownIconRippleColor(color);
   }
 
   @ReactProp(name = ViewProps.NUMBER_OF_LINES, defaultInt = 1)
@@ -261,6 +271,8 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
       if (style != null) {
         if (style.hasKey("backgroundColor") && !style.isNull("backgroundColor")) {
           convertView.setBackgroundColor(style.getInt("backgroundColor"));
+        } else {
+          convertView.setBackgroundColor(Color.TRANSPARENT);
         }
 
         if (style.hasKey("color") && !style.isNull("color")) {
@@ -285,19 +297,16 @@ private View getView(int position, View convertView, ViewGroup parent, boolean i
 
       if (item.hasKey("fontFamily") && !item.isNull("fontFamily")) {
         Typeface face = Typeface.create(item.getString("fontFamily"), Typeface.NORMAL);
-        // Typeface face = Typeface.create("MuseoSans-500", Typeface.NORMAL);
         textView.setTypeface(face);
       }
 
-      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
-        boolean isRTL = I18nUtil.getInstance().isRTL(convertView.getContext());
-        if (isRTL) {
-          convertView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
-          convertView.setTextDirection(View.TEXT_DIRECTION_RTL);
-        } else {
-          convertView.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
-          convertView.setTextDirection(View.TEXT_DIRECTION_LTR);
-        }
+      boolean isRTL = I18nUtil.getInstance().isRTL(convertView.getContext());
+      if (isRTL) {
+        convertView.setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
+        convertView.setTextDirection(View.TEXT_DIRECTION_RTL);
+      } else {
+        convertView.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
+        convertView.setTextDirection(View.TEXT_DIRECTION_LTR);
       }
 
       return convertView;

android/src/main/res/drawable/ic_dropdown.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="48"
+    android:viewportHeight="48"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/black"
+      android:pathData="M19,22l5,5 5,-5z"/>
+</vector>

android/src/main/res/drawable/spinner_dropdown_background.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:id="@+id/dropdown_background">
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/transparent" />
+        </shape>
+    </item>
+    <item
+        android:id="@+id/dropdown_icon"
+        android:gravity="end|center_vertical"
+        android:color="@android:color/black"
+        android:tint="@android:color/black">
+        <ripple
+            android:color="@android:color/darker_gray"
+            android:radius="18dp">
+            <item android:id="@android:id/mask">
+                <shape android:shape="rectangle">
+                    <solid android:color="@android:color/white" />
+                    <corners android:radius="18dp" />
+                </shape>
+            </item>
+            <item>
+                <selector>
+                    <item android:drawable="@drawable/ic_dropdown" />
+                </selector>
+            </item>
+        </ripple>
+    </item>
+</layer-list>

example/src/PickerExample.tsx

@@ -142,7 +142,7 @@ function PromptMultilinePickerExample() {
 function CustomDropdownArrowColorPickerExample() {
   return (
     <View>
-      <Picker dropdownIconColor="red">
+      <Picker dropdownIconColor="red" dropdownIconRippleColor="purple">
         <Item label="hello" value="key0" />
         <Item label="world" value="key1" />
       </Picker>
@@ -192,13 +192,23 @@ function ColorPickerExample() {
         }}
         onValueChange={(v) => setValue(v)}
         mode="dropdown">
-        <Item label="red" color="red" value="red" />
-        <Item label="green" color="green" value="green" />
-        <Item label="blue" color="blue" value="blue" />
+        <Item label="red" color="red" style={{color: 'red'}} value="red" />
+        <Item
+          label="green"
+          color="green"
+          style={{color: 'green', backgroundColor: 'red'}}
+          value="green"
+        />
+        <Item
+          label="blue"
+          color="blue"
+          style={{color: 'blue', backgroundColor: 'green'}}
+          value="blue"
+        />
       </Picker>
       <Text>{`Is input opened: ${isSecondFocused ? 'YES' : 'NO'}`}</Text>
       <Picker
-        style={{color: value}}
+        style={{color: value, backgroundColor: 'gray'}}
         selectedValue={value}
         onBlur={() => {
           setIsSecondFocused(false);

js/PickerAndroid.android.js

@@ -164,8 +164,8 @@ function PickerAndroid(props: PickerAndroidProps, ref: PickerRef): React.Node {
     prompt: props.prompt,
     selected,
     style: props.style,
-    backgroundColor: props.backgroundColor,
     dropdownIconColor: processColor(props.dropdownIconColor),
+    dropdownIconRippleColor: processColor(props.dropdownIconRippleColor),
     testID: props.testID,
     numberOfLines: props.numberOfLines,
   };

typings/Picker.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-import {
+import type {
   TextStyle,
   StyleProp,
   ViewProps,
   NativeSyntheticEvent,
   TargetedEvent,
 } from 'react-native';
+import { processColor } from 'react-native';
 
 export type ItemValue = number | string;
 
@@ -75,13 +76,18 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
   /**
    * Used to locate this view in end-to-end tests.
    */
-  testID?: string;
-  /**
-   * Color of arrow for spinner dropdown in hexadecimal format
-   * @platform android
-   */
-  dropdownIconColor?: string;
-  /**
+   testID?: string;
+   /**
+    * Color of arrow for spinner dropdown in hexadecimal format
+    * @platform android
+    */
+   dropdownIconColor?: ReturnType<typeof processColor>;
+   /**
+    * Ripple color of spinner's arrow
+    * @platform android
+    */
+   dropdownIconRippleColor?: ReturnType<typeof processColor>;
+   /**
    * On Android, 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