iOS dropdown presents itself behind other components

[ApluUalberta]

Though this component works well on Android, iOS applications get this weird behaviour:

The specific Front-end Tech stack that I use is React Native Expo, and the error presents itself on dev and Internal Builds. The display of the menu can be fixed as a result of zIndex: -1 and position: "absolute" in the parent View component, however this is far from adequate as this affects the component's positioning relative to other components. It is the exact same issue as here: Issue 212

Please provide an adequate solution for this on iOS that decouples it from other components. Thanks

[sevastijan]

In my case, it was enough to set the parent's zIndex to a higher value than the following elements. Try it at your case maybe it will work too 😄

[ApluUalberta]

In my case, it was enough to set the parent's zIndex to a higher value than the following elements. Try it at your case maybe it will work too 😄

I couldn't manage to get ti to work. Do you mind sharing an example?

[ApluUalberta]

In my case, it was enough to set the parent's zIndex to a higher value than the following elements. Try it at your case maybe it will work too 😄

I was able to resolve this issue. As it turns out, this is the solution, but this requires a nuanced understanding of component elevation and how your app styling is structured.

Here is my example:

• Using React Native Modal component, we have an already-elevated "root" component with a Stack component container:

const parentModal = () => {
   ...
   return (
      <View>
        ...
        <Stack
                 gap={2}
                style={{
                    zIndex: 1,
                }}
        >
           <ModalContents/>
        </Stack>
        ...
      </View>
   );
}

const ModalContents = () => {
   ...
   return (
      <View>
         ...
         <View style={{zIndex: 1}}>
               <AutoCompleteInput {...props}  
                  inputContainerStyle={[
                      {
                          position: "relative",
                          borderWidth: 0,
                          height: theme.spacing(8),
                      },
                      props.inputContainerStyle,
                  ]}
                  listContainerStyle={[
                      {
                          position: "absolute",
                          top: theme.spacing(8),
                          zIndex: 1,
                          width: "100%",
                      },
                      props.listContainerStyle,
                  ]}
            
               />
         </View>
      </View>
   
   );
}

In order to solve it in my case, I needed to somehow communicate between the "base" component and the autocomplete its elevation without losing its elevation within the nesting of it in views. Though this is very specific to my use-case. Perhaps the best way this can help someone else is to say i fixed it by playing around.

Hope this helps someone!