Touchableopacity problem, negative margin and Android - React Native

Question

I have a problem with TouchableOpacity using negative margin so that different TouchableOpacities stay a little on top of each other (I’ll post an image to better understand). These buttons are being rendered into a FlatList and impressively on iOS works well, but on Android gets pretty strange.

On Android when I click on a button in front, is fired the back button.

Those are the buttons inside the FlatList, each button is on top of the other.

iOS	Android
Click on the image to view it in its original size	Click on the image to view it in its original size

On Android, when I clicked on the written button "Proposta 70", the written button "Proposta 78" was fired.
Android totally ignores the above items and always fires the item below, IE, the item that was rendered first

The code of FlatList

<View style={styles.containerList}>
<FlatList
  data={proposalsList}
  keyExtractor={item => item.proposta_id}
  renderItem={({ item, index }) => (
    <RenderItem
      item={item}
      index={index}
      isLoweredCard={
        openedCardIndex !== null && index === openedCardIndex + 1
      }
      changeOpenedCardIndex={changeOpenedCardIndex}
    />
  )}
  refreshing={loading}
  onRefresh={() => getProposalsAndNotifications()}
/>

the button code (Renderitems)

<TouchableOpacity
  style={styles.container(index, isLoweredCard)}
  onPress={() => changeOpenedCardIndex(index)}
>
  <>
    <View
      style={[
        styles.lineContainer,
        { marginBottom: metrics.padding * 1.5 },
      ]}
    >
      <View
        style={{
          width: '50%',
        }}
      >
        <Text style={styles.proposalId}>
          {`Proposta ${item.proposta_id}`}
        </Text>
        <Text style={styles.proposalDate}>
          {dayjs(item?.proposta_data_criacao).format('DD.MM.YYYY')}
        </Text>
      </View>
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'flex-end',
        }}
      >
        <View style={styles.statusContainer}>
          <Text style={{ fontSize: wp(4), fontWeight: 'bold' }}>
            <TypeStatus status={item?.proposta_status} />
          </Text>
        </View>
      </View>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor solicitado</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_financiado)}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor liberado</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_financiado)}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Parcelas</Text>
      <Text style={styles.proposalDetailValue}>
        {`${item?.proposta_valor_prazo}x`}
      </Text>
    </View>
    <View style={styles.lineContainer}>
      <Text style={styles.proposalDetailLabel}>Valor da parcela</Text>
      <Text style={styles.proposalDetailValue}>
        {formatCurrency(item?.proposta_valor_parcela)}
      </Text>
    </View>
    <View style={styles.buttonContainer}>
      <Button
        onPress={goToDetails}
        title="Ver detalhes"
        titleStyle={styles.proposalButtonText}
        style={styles.button}
      />
    </View>
  </>
</TouchableOpacity>

And the styles of the buttons

import {
widthPercentageToDP as wp,
heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

import { metrics, colors } from '../../../../constants';

const styles = StyleSheet.create({
container: (index, isLoweredCard) => ({
 backgroundColor: `#00${index}F${index}C`,
 marginTop: !isLoweredCard && index !== 0 ? -wp(53) : metrics.padding,
 marginHorizontal: metrics.padding,
 alignContent: 'center',
 padding: metrics.padding,
 borderRadius: metrics.radius,
 zIndex: -(index + 999),
}),
lineContainer: {
 width: '100%',
 justifyContent: 'space-between',
 flexDirection: 'row',
 marginBottom: metrics.padding / 2,
},
statusContainer: {
 backgroundColor: colors.white,
 borderRadius: 20,
 width: '70%',
 paddingVertical: 3,
 alignItems: 'center',
 justifyContent: 'center',
},
proposalId: {
 color: colors.white,
 fontWeight: 'bold',
 fontSize: wp(4.5),
},
proposalDate: {
 color: 'rgba(0, 0, 0, 0.5)',
 fontWeight: 'bold',
 fontSize: wp(3.5),
},
proposalDetailLabel: {
 fontSize: wp(4),
 color: 'rgba(0, 0, 0, 0.9)',
},
proposalDetailValue: {
 fontSize: wp(4.5),
 color: colors.white,
 fontWeight: 'bold',
},
proposalButtonText: {
 color: colors.white,
 fontWeight: 'bold',
 fontSize: wp(4),
},
button: {
 borderRadius: metrics.radius,
 backgroundColor: '#002F6C',
 paddingHorizontal: metrics.padding * 3,
},
buttonContainer: {
 width: '100%',
 marginTop: metrics.padding,
 alignItems: 'center',
},
});

export default styles;