[RN 0.59.1] Android picker is always shown as dropdown

[xAlexV]

🐛 Bug Report

The picker on Android is always shown as a dropdown, even if the mode is set to dialog. On RN 0.58.6 it works according to the mode that is set ("dialog" or "dropdown").

RN 0.59.1

RN 0.58.6

To Reproduce

Initialize a new react native project: react-native init testPicker

Add the code example for the picker attached below to the return, as well in the constructor this.state = {language: "Java"};

Run the project: react-native run-android

Expected Behavior

I expect that when the picker mode is set to "dialog" (or not set, because the default mode is "dialog") to open the items in a new modal window, not as dropdown anchored to the picker view

Code Example

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Picker selectedValue={this.state.language} style={{height: 50, width: 100}} mode={"dialog"} onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue}) }> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /> </Picker>
</View>
);
}

Environment

react-native --version
react-native-cli: 2.0.1
react-native: 0.59.1

react-native info
info
React Native Environment Info:
System:
OS: Windows 10
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 23.85 GB / 31.88 GB
Binaries:
Yarn: 1.5.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.3.0.0 AI-182.5107.16.33.5314842

[ferrannp]

I see this is happening in master too now that we use AppCompatSpinner instead of Spinner in ReactPicker.java

api("androidx.appcompat:appcompat:1.0.2")

If you try to switch for RNTester to use the alpha though:

api("androidx.appcompat:appcompat:1.1.0-alpha03")

It works again. So I am hoping we can fix this just switching to 1.1.0 once it is stable

[xAlexV]

Hi @ferrannp,

Thanks a lot for your response, could you tell me how we can fix this on the current 0.59.1 version?
It is blocking our current release, it would be great if we don't have to revert the update :)

Thanks in advance.

[turnrye]

@xAlexV -- we'll need to wait for the release of androidx.appcompat to make stable and then update our dependencies. If you're hurting for a release and this is a blocker, reverting the update might be your best bet sadly.

[xAlexV]

@turnrye thanks for the update. I'll check with the team and hope that a downgrade is not required :D.

[ggenovese]

Any update on this issue?

[westcode]

As stated by @ferranp and @turnrye the issue is related to a bug in the used androidx.appcompat version and should be solved by updating the reference to 1.10 once its final gets released. https://developer.android.com/jetpack/androidx/releases/appcompat shows another alpha (4) got out last week. Guess we just have to wait untill it comes out.

[jmheik]

Would it be worthwhile to revert Picker from extending AppCompatSpinner until dependency with fix is available, if it solves this issue? Then it could be backported to 0.59.x releases.

[ferrannp]

CC @dulmandakh. What do you think?

[janbuerling]

What is the current status of this bug?

[VinceBT]

Any workaround ?

[mstllc]

I've been following this one as I really wanted that modal picker for an app I started with 0.59 as well. Seems like the comment above pretty much says what the RN team is thinking, they're waiting for Appcompat version 1.1.0 to drop a stable release before updating RN to use that version, which should solve this issue. You can keep checking here for progress on that: https://developer.android.com/jetpack/androidx/releases/appcompat

Other than that, I don't think you have any options other than using an older version of RN (pre-hooks 😢 ) or writing a custom native plugin. I ended up writing a native plugin because I really wanted this feature and was approaching a deadline. It was pretty straightforward, but may be more challenging if you don't have any experience working on the native side of RN.

I'm no expert and I'm not sure how much this will help you, but here's the relevant code for the native module I wrote. Follow the Native Modules guide in the docs for the initial native module setup on Android. Here's the code for the native method you want to expose:

    @ReactMethod
    public void alertPicker(String title, ReadableArray items, Promise promise) {
        AlertDialog.Builder builder = new AlertDialog.Builder(getCurrentActivity());
        builder.setTitle(title);
        builder.setCancelable(false);

        String[] values = new String[items.size()];
        for (int i = 0; i < items.size(); i++) {
            values[i] = items.getArray(i).getString(1);
        }

        builder.setItems(values, new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                WritableArray result = Arguments.createArray();

                result.pushString(items.getArray(which).getString(0));
                result.pushString(items.getArray(which).getString(1));

                promise.resolve(result);
            }
        });

        AlertDialog dialog = builder.create();
        dialog.show();
    }

Again, this is probably not the best way to do this, but you can then call this from the JS side like
const [value, label] = await alertPicker("Picker Title", [ ["value1", "label1"], ["value2", "label2"] ])

[german970814]

@thorsonmscott Thanks

[wuifdesign]

any new updates/workarounds on this?

[AlexSeoven]

Any new workarounds / fixes on this issue?

[lucascardial]

Nothing here?

[ishaq-aym]

any updates about this issue? i can't downgrade my react version because of 64 bit support .

[ailton-moreira]

any one was able to resolve this bug?

[Firetuy]

Bug still ocurring

[stvmachine]

+1

[satheeshwaran]

+1 Need a workaround for this. My designer wants picker as it looks at 0.58.6.

[lucasgouvea]

Any workaround on this issue?

[sousaprogramador]

Notthing here ?

[ferrannp]

To everybody having problems with this, have you tried using https://github.com/react-native-community/react-native-picker ?

[manhthepixta]

To everybody having problems with this, have you tried using https://github.com/react-native-community/react-native-picker ?

I cannot install @react-native-community/picker via npm or yarn. "Not found" error occurs.

[BrandonKerr]

To everybody having problems with this, have you tried using https://github.com/react-native-community/react-native-picker ?

I cannot install @react-native-community/picker via npm or yarn. "Not found" error occurs.

This issue with npm appears to be resolved now: react-native-picker/picker#9

I'm personally running into errors for "Tried to register two views with the same name AndroidDropdownPicker" which I'm guessing is due to something else using the native-base version as a dependency. Others may want to give the react-native-community version a try and see if it resolves this issue for them.

[deserthurricane]

To everybody having problems with this, have you tried using https://github.com/react-native-community/react-native-picker ?

For me https://github.com/react-native-community/react-native-picker works just the same - only dropdown is shown despite the selected dialog mode.

[andrewsadowski]

Tried out the @react-native-community/picker package as suggested above on RN v59.1. Still showing Picker as dropdown only, even when mode='dialog' is set.

[janczizikow]

As a temporary workaround I've created a native-module as @thorsonmscott suggested. I'm also quite new to native modules, but it was interesting to try it out. Not sure if it will help anyone here (my use case was pretty simple), but I published it as a package to npm. You can find the repo here.

[amalsaad]

Any update on this issue?

[ricardo-mobiquity]

janczizikow's workaround works great! Thank you.

[chrisk8er]

any update?

[jesxr44]

Any expected date about when this will be fixed?

[wamry]

@janczizikow thanks bro, it worked

[BrandonKerr]

According to https://developer.android.com/jetpack/androidx/releases/appcompat the 1.1.0 stable released today. Is there any idea of a timeframe for RN to update accordingly?

[dulmandakh]

I would be happy to review a PR that would upgrade appcompat version

[AlirezaAzizi145]

@janczizikow thanks for your help. but how can i change styles and cancel text

[allanzi]

any new updates/workarounds on this?

[iYahya]

i found this work around an it works for me in [RN > 0.60]

in

android/app/src/main/res/value

if there is no 'styles.xml' file then create your own 'styles.xml'

and put the code below :

<resources>
<style name="SpinnerStyle" parent="@android:style/Widget.Spinner">
        <item name="android:background">@null</item>
    </style>
    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:gravity">right</item>
        <item name="android:textColor">#a2a2a2</item>
        <item name="android:textSize">12dp</item>
    </style>
    <style name="SpinnerDropDownItem" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:gravity">center</item>
        <item name="android:textColor">#000</item>
        <item name="android:textSize">13dp</item>
    </style>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:spinnerStyle">@style/SpinnerStyle</item>
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
        <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>
    </style>
</resources>

[idhowardgj94]

I had this same issue...
and thank @thorsonmscott again...

so when can react-native solve this solution, if this bug is solve here lol

[luiza-avelino]

@iYahya worked for me ! Thanks.

[AyeshaIftikharr]

Is there any update on this issue?

[lunaleaps]

Picker has been removed from react-native.
I'm trying to find the relevant issue in https://github.com/react-native-picker/picker/issues so we can push to get it fixed there but I can't find a similar issue -- if anyone else knows or wants to create an issue in that repo?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.