Dropdown List Appears Behind Modal and Cannot Be Selected

[lucasAzS]

I am encountering an issue when using the react-native-autocomplete-dropdown library within a React Native modal. The dropdown list appears behind the modal and is not interactable. Additionally, when I attempt to modify the styles and positioning, the dropdown list either does not appear or remains below other elements, making it unusable.

Code Example:

import React, { useState } from 'react';
import { StyleSheet, Text, View, Modal, Button } from 'react-native';
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';

const data = [
    { id: '77772', title: 'Isabel ' },
    { id: '77773', title: 'Elson ' },
    { id: '77774', title: 'Rodrigo ' },
    { id: '77775', title: 'Diogo ' },
    { id: '77792', title: 'Filipa ' },
    { id: '80830', title: 'Lucas' },
    { id: '99998', title: 'AutomatedTests' },
    { id: '99999', title: 'AutomatedTests' },
    { id: '121212', title: 'Karina ' },
    { id: '233217', title: 'Joaquim ' },
    { id: '999999', title: 'Processamento ' },
];

export const SandBoxMainScreen = React.memo(() => {
    const [modalVisible, setModalVisible] = useState(false);

    return (
        <View style={styles.container}>
            <Text>SandBox</Text>
            <Button title="Show Modal" onPress={() => setModalVisible(true)} />
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.modalView}>
                    <Text style={styles.modalText}>Hello, this is a modal!</Text>
                    <Button title="Close Modal" onPress={() => setModalVisible(false)} />

                    <AutocompleteDropdown dataSet={data} inputContainerStyle={styles.input} />
                </View>
            </Modal>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    modalView: {
        backgroundColor: 'white',
        borderRadius: 20,
        padding: 20,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        position: 'absolute',
        width: '100%',
        height: '50%',
    },
    modalText: {
        marginBottom: 15,
        textAlign: 'center',
    },
    input: {
        width: '100%',
        height: 40,
        padding: 10,
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
        borderRadius: 5,
        backgroundColor: 'white',
    },
});

Screenshots

[lucasAzS]

I try to put the flatlist in the dropdown.js inside a modal, but then he fill all the screen

import React, { memo, useMemo } from 'react'
import { StyleSheet, FlatList, View, Keyboard, Modal } from 'react-native'

export const Dropdown = memo(
  ({ dataSet, suggestionsListMaxHeight, renderItem, ListEmptyComponent, ...props }) => {
    const ItemSeparatorComponent = useMemo(() => {
      return () =>
        props.ItemSeparatorComponent ?? <View style={{ height: 1, width: '100%', backgroundColor: '#ddd' }} />
    }, [props.ItemSeparatorComponent])

    return (
        <View
            style={{
                ...styles.listContainer,
                ...props.suggestionsListContainerStyle,
            }}
        >
            <Modal>
                <FlatList
                    keyboardDismissMode="on-drag"
                    keyboardShouldPersistTaps="handled"
                    nestedScrollEnabled={true}
                    onScrollBeginDrag={Keyboard.dismiss}
                    data={dataSet}
                    style={{ maxHeight: suggestionsListMaxHeight }}
                    renderItem={renderItem}
                    keyExtractor={(item) => item.id}
                    ListEmptyComponent={ListEmptyComponent}
                    ItemSeparatorComponent={ItemSeparatorComponent}
                    {...props.flatListProps}
                />
            </Modal>
        </View>
    );
  }
)

const styles = StyleSheet.create({
  container: {},
  listContainer: {
    backgroundColor: '#fff',
    width: '100%',
    zIndex: 9,
    borderRadius: 5,
    shadowColor: '#00000099',
    shadowOffset: {
      width: 0,
      height: 12
    },
    shadowOpacity: 0.3,
    shadowRadius: 15.46,

    elevation: 20
  }
})

https://github.com/onmotion/react-native-autocomplete-dropdown/assets/55214084/53f2de32-adde-4400-804d-322c9a04cf7e

[lucasAzS]

Ok, I see in the examples that using AutocompleteDropdownContextProvider inside the modal fixes the issue. I think that example should be included in the README.

import React, { useState } from 'react';
import { StyleSheet, Text, View, Modal, Button } from 'react-native';
import {
    AutocompleteDropdown,
    AutocompleteDropdownContextProvider,
} from 'react-native-autocomplete-dropdown';

const data = [
    { id: '77772', title: 'Isabel ' },
    { id: '77773', title: 'Elson ' },
    { id: '77774', title: 'Rodrigo ' },
    { id: '77775', title: 'Diogo ' },
    { id: '77792', title: 'Filipa ' },
    { id: '80830', title: 'Lucas' },
    { id: '99998', title: 'AutomatedTests' },
    { id: '99999', title: 'AutomatedTests' },
    { id: '121212', title: 'Karina ' },
    { id: '233217', title: 'Joaquim ' },
    { id: '999999', title: 'Processamento ' },
];

export const SandBoxMainScreen = React.memo(() => {
    const [modalVisible, setModalVisible] = useState(false);

    return (
        <View style={styles.container}>
            <Text>SandBox</Text>
            <Button title="Show Modal" onPress={() => setModalVisible(true)} />
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    setModalVisible(!modalVisible);
                }}
            >
                <AutocompleteDropdownContextProvider>
                    <View style={styles.modalView}>
                        <AutocompleteDropdown
                            dataSet={data}
                            inputContainerStyle={styles.input}
                            direction="up"
                        />
                        <Text style={styles.modalText}>Hello, this is a modal!</Text>
                        <Button title="Close Modal" onPress={() => setModalVisible(false)} />
                    </View>
                </AutocompleteDropdownContextProvider>
            </Modal>
        </View>
    );
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    modalView: {
        backgroundColor: 'white',
        borderRadius: 20,
        padding: 20,
        alignItems: 'center',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 4,
        elevation: 5,
        bottom: 0,
        left: 0,
        right: 0,
        // zIndex: 1000,
        position: 'absolute',
        width: '100%',
        height: '50%',
    },
    modalText: {
        marginBottom: 15,
        textAlign: 'center',
    },
    input: {
        width: '100%',
        height: 40,
        padding: 10,
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
        borderRadius: 5,
        backgroundColor: 'white',
    },
});

[cristianfavaro]

I was trying to use it with React Navigation Modal Stack, but no luck to... Your workaround make the list element appears, but it loses all the references to the element bar and open far away.

[mzorzella]

I'm using this component inside a tamagui Sheet component. I added the AutocompleteDropdownContextProvider inside <Sheet.Frame> and the dropdown appears apart from the text box. See image below.

[pwetherbee]

I'm seeing the same issue with the expo-router Stack.Screen component when presentation is "modal"

[ishanAhuja]

+1 for expo-router Stack.Screen

[mutschler]

Same for me, when presentation of the Stack is set to modal the popup doesn't appear