Skip to content

zIndex breaking in Animated.View #74

Open
@peto59

Description

@peto59

I have multiple dropdowns in my scroll view

<KeyboardAwareScrollView
      style={{ backgroundColor: "#fff" }}
      contentContainerStyle={{ alignItems: "center", justifyContent: "center", flexGrow: 1 }}
      keyboardShouldPersistTaps="always"
>
dropdown1
dropdown2
dropdown3
dropdown4
<Animated.View style={{ height: specificZameranieOpacity, opacity: specificZameranieOpacity }} >
                        <AutocompleteDropdown
                            clearOnFocus={false}
                            closeOnBlur={false}
                            controller={controller => {
                                zameraniaMainController.current = controller;
                            }}
                            onChevronPress={() => {
                                if (zameraniaMain == null) {
                                    setZameraniaMain(vars.zamerania);
                                    if (zameraniaMainController != null) {
                                        zameraniaMainController.current.open();
                                    }
                                } else {
                                    if (zameraniaMainController != null) {
                                        zameraniaMainController.current.close();
                                    }
                                }
                            }}
                            onSelectItem={setSelectedItemMainZamerania}
                            dataSet={zameraniaMain}
                            showClear={true}
                            showChevron={true}
                            suggestionsListMaxHeight={Dimensions.get('window').height * 0.2}
                            onChangeText={getSuggestionsZameraniaMain}
                            suggestionsListContainerStyle={{
                                minWidth: Dimensions.get('window').width * 0.75,
                                maxWidth: Dimensions.get('window').width * 0.75,
                            }}
                            emptyResultText={"Zameranie nenájdené"}
                            textInputProps={{
                                placeholder: "Najbližšie zameranie",
                                editable: selectedItemZamerania != null ? selectedItemZamerania.title == "Iné" : false,
                            }}
                            inputContainerStyle={{
                                minWidth: Dimensions.get('window').width * 0.75,
                                maxWidth: Dimensions.get('window').width * 0.75,
                            }}
                        />
                        <TextInput/>
                    </Animated.View>
//more code

Each dropdown that is direct descendant of KeyboardAwareScrollView works perfectly fine
The one in Animated.View displays it's dropdown under elements that are under it. If I add zIndex to Animated.View it breaks scrolling for the given dropdown.
If I add zIndex to the dropdown in Animated.View nothing changes. I tried multiple combinations and nothing works. Can you help me figure out what am I doing wrong?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions