React-Native Placing Pressable above background Image

Question

I have a background Image that I am placing overtop of all of my other elements.

Screen

  ...other stuff...

  return (
    <View style={styles.body}>
          
        <FlatList
            style={styles.prizeList}
            data={TEST_DATA}
            numColumns={2}
            renderItem={({item, index}) => {
              let bgShelfImage = FULL_SHELF;

              if (index === TEST_DATA.length - 1) {
                bgShelfImage = FULL_SHELF;
              } else {
                if (index % 2 === 1) {
                  bgShelfImage = SECOND_HALF_SHELF;
                } else {
                  bgShelfImage = FIRST_HALF_SHELF;
                }
              }

              return (
                <PrizeShelfCard
                  prize={item}
                  bgShelfImage={bgShelfImage}
                  handleShowPrize={handleShowPrize}
                  handleDisplayPrizeTitleChange={handleDisplayPrizeTitleChange}
                  handleDisplayPrizeDescChange={handleDisplayPrizeDescChange}
                  handleDisplayPrizeTypeChange={handleDisplayPrizeTypeChange}
                  handleDisplayPrizeTierChange={handleDisplayPrizeTierChange}
                />
              );
            }}
            keyExtractor={item => item.prizeId}
          />
 
      <ImageBackground
        style={styles.backgroundContainer}
        source={bookshelf}
        resizeMode="stretch"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    backgroundColor: '#29211F',
  },
  backgroundContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  prizeList: {
    marginTop: hp('5%'),
    display: 'flex',
  },
});

PrizeDisplayCard

  ...other stuff....

  return (
    <View style={styles.body}>
      <ImageBackground
        style={styles.backgroundContainer}
        source={shelfImage}
        resizeMode="stretch"
      />
      <Pressable
        style={styles.pressable}
        onPress={() => {
          console.log('prize clicked!');
        }}>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  body: {
    flex: 1,
    height: hp('25%'),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#29211F',
  },
  backgroundContainer: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
  pressable: {
    height: '50%',
    width: '50%',
    marginBottom: hp('5%'),
    backgroundColor: 'red'
  },
});

The problem is this. In the Screen code, I have an imageBackground which I place above all other elements. I need to do this because the background needs to overlay the other elements.

In this image, the outline of the "bookshelf" is this image:

overlayed and the rest is rendered by the flatlist since there will be a dynamic amount of elements. The red box is a pressable element. The pressable cannot be pressed because the Background template is overtop of the pressable. How can I make it so that the pressable is above the background Image? Is this possible the way that I'm doing it or do I need to find a different way?

I tried playing around with the zIndex, but that wasn't much help

Edit

Got rid of irrelevent parts of the code

Answer 1

zIndex only works on ios. I assume thaty ou are using android, that you can use elevation instead ;)