React Native Android zIndex elevation without rearranging

user_8660917 0
Viewed 677

I've got an app with a scrollview with a stickyHeaderIndices prop - applied to a text input. In iOS, the elements are arranged according to zIndex and arrangement. However, on Android the text input hides behind other elements arranged deeper down the code with elevation applied, see this video for reference.

It seems the solution is arranging the text input deeper down the code, but then the text input isn't positioned right. Changing the zIndex, disabling the elevation, disabling absolute positioning and giving the text input a higher elevation value also doesn't change the layering. Brief styling for the text input:

  search: {
    zIndex: 100,
    position: "absolute",
    top: -16,
    elevation: 9,
    paddingVertical: 12,
    alignSelf: "center",
  }

Brief styling for the tiles which cover the text input:

tile: {
    backgroundColor: colors.white,
    padding: 16,
    elevation: 8,
    zIndex: -5,
  },

Is there any way to prevent the textinput from hiding behind the tiles? If any additional code references are needed please let me know.

EDIT: the solution was adjusting the elevation of the textInput container so that it had a higher elevation value than the elements which were covering the textInput

react-native android
1 Answers

It seems the solution is arranging the text input deeper down the code

Yes, it is.

Using zIndex is a good solution when you cannot rearrange the order in which the elements are rendered on the screen. Since your search bar is positioned absolutely I am assuming you don't care where the component is placed in the code, so I would suggest putting it at the very bottom. So something like this:

<View style={{flex: 1}>
  <Flatlist [... your list of items here] >
  <SearchBar style={styles.search} />
</View>

but then the text input isn't positioned right.

You may have to adjust the top value or some other styles, but I think this is the way to go.

user_87981640
Related