styles - React Native - zIndex

Question

I try to make FlatList where circles are different sizes, for each cirle, i need to have own zIndex.

Numbers in circles, show zIndex number, as you see its not working.

I use zIndex on <TouchableWithoutFeedback>

Here is my component:

<TouchableWithoutFeedback
        onPress={() => dispatch(selectHockeyPlayer(item))}
        style={[
          styles.listItem,
          {
            width: playerWidth,
            height: playerWidth,
            transform: [{scale: scaleNum + 1.2}],
            zIndex: Math.floor(scaleNum + 2),
          },
          isRated ? styles.isRated : null,
          styles.circle,
          activePlayer(item, styles.selectedListItem),
        ]}>

question from:https://stackoverflow.com/questions/66061558/react-native-zindex

Answer 1

Place a View inside of TouchableWithoutFeedback and apply TouchableWithoutFeedback styles to the View

Do this

<TouchableWithoutFeedback
        onPress={() => dispatch(selectHockeyPlayer(item))}>
        <View
          style={[
          styles.listItem,
          {
            width: playerWidth,
            height: playerWidth,
            transform: [{scale: scaleNum + 1.2}],
            zIndex: Math.floor(scaleNum + 2),
          },
          isRated ? styles.isRated : null,
          styles.circle,
          activePlayer(item, styles.selectedListItem),
        ]}>