How to fix React Native zIndex issue?

Question

This is my renderItem function

function renderBookItem({ item }) {
    const bookProps = {
      bookId: item.id,
      title: item.bookInfo.title,
      author: item.bookInfo.author,
      translator: item.bookInfo.translator,
      publisher: item.bookInfo.publisher,
      aboutAuthor: item.aboutAuthor,
      quotes: item.bookQuotes,
      notes: item.myNotes,
    };

    const isItemSelected = toolboxId === item.id;

    function toggleToolbox(itemId) {
      setToolboxId((prevId) => (prevId === itemId ? null : itemId));
    }

    return (
      <View style={styles.itemContainer}>
        <BookListItem {...bookProps} onShowToolbox={toggleToolbox} />
        {isItemSelected && (
          <View style={styles.toolBox}>
            <ToolBox />
          </View>
        )}
      </View>
    );
  }

and now my main issue is the zIndex which I use in styles but it's not worked.

its the issue that face it:

Answer 1

the screenshot seems to be from Android OS. On Android, you should use elevation.

https://reactnative.dev/docs/view-style-props#elevation-android

const styles = StyleSheet.create({
    toolBox: {
        zIndex: 999, // for iOS
        elevation: 999, // for Android
    })
})