Items are not clickable over a MapView (Android)

I am using the expo-managed workflow, and I would need to use the dropdown at the top part of a screen view, and below I have a MapView (react-native-maps).

After opening the dropdown, items over the MapView are not clickable.

https://user-images.githubusercontent.com/48277672/120935627-043f8380-c704-11eb-9d7f-a020753d335d.mp4

I tried to write a simple code snippet in order to make it easily replicable:

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import MapView from "react-native-maps";

export default function App() {
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(null);
    const [items, setItems] = useState([
        { label: "Apple", value: "apple" },
        { label: "Banana", value: "banana" },
    ]);

    return (
        <View style={styles.container}>
            <View style={styles.top}>
                <DropDownPicker
                    open={open}
                    value={value}
                    items={items}
                    setOpen={setOpen}
                    setValue={setValue}
                    setItems={setItems}
                    zIndex={1000}
                />
            </View>

            <MapView style={styles.map}></MapView>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column",
        backgroundColor: "yellow",
    },
    top: {
        flexDirection: "column",
        marginTop: 40,
        height: 70,
        zIndex: 10,
    },
    map: {
        flex: 1,
        zIndex: 0,
    },
});

The same code is working perfectly on iOS.

I would appreciate it if you have some suggestions, thank you in advance!

[losheredos]

@sibandrew you can check this package as well, at least it solved my issues which is similar to yours. I tried few but this one looks easiest to use for now.

https://github.com/sohobloo/react-native-modal-dropdown

[mohammadrahmanian]

I’m using this dropdown picker inside a modal and I have the exact same issue. I’ve removed the zIndex for android devices but I still can’t select any items from the dropdown list. this is the code from my custom styles related to the zIndex: ...(Platform.OS !== 'android' && { zIndex: 11 }),