TouchableOpacity / Pressable Not working on view with position absolute even with position relative React Native

Question

Hi guys I am currently facing a problem where in the touchableopacity or pressable is not working inside an absolute view position .

Here's my code

<View style={styles.Wallet}>
          <Text style={styles.Wallet_Text}>Wallet</Text>
            <TouchableOpacity onPress={()=> console.log('Pressed')}
            <Image 
              source={require('../../Assets/Icons/ui-walelt_icon-history.png')}
              resizeMode='contain'
              style={styles.Wallet_History}
            />
            </TouchableOpacity>
          <Text style={styles.Wallet_Amount}>₱0.00</Text>
          <Image 
            source={require('../../Assets/Icons/ui-walelt_icon-wallet.png')}
            resizeMode='contain'
            style={styles.Wallet_CashIn}
          />
          <Text style={styles.Wallet_TextCashIn}>Cash In</Text>
          <Image 
          source={require('../../Assets/Icons/ui-walelt_icon-transfer.png')}
          resizeMode='contain'
          style={styles.Wallet_Transfer}
          />
          <Text style={styles.Wallet_TextTransfer}>Transfer</Text>
</View>

my style look like this

Wallet: {
    position:'absolute',
    top:0,
    right:0,
    bottom:0,
    left:0,
    alignItems:'flex-start',
    zIndex:1,
  },
  Wallet_Text:{
    color:'#fff',
    marginTop: 180,
    marginLeft: 40,
    fontSize:20,
    fontWeight: 'bold',
  },
  Wallet_History:{
    width:35,
    height:35,
    alignSelf:'flex-end',
    marginRight: 40,
    marginTop: -40,
    tintColor:'#fff',
  }, 
  Wallet_Amount:{
    color:'#fff',
    marginTop: 20,
    alignSelf:'flex-end',
    marginRight: 40,
    fontSize:20,
    fontWeight: 'bold',
  },
  Wallet_CashIn:{
    width:20,
    height:20,
    alignSelf:'flex-end',
    marginRight: 230,
    marginTop: 25,
    tintColor:'#fdeb1d',
  }, 
  Wallet_TextCashIn:{
    color:'#fff',
    marginTop: -20,
    alignSelf:'flex-end',
    marginRight: 170,
    fontSize:15,
  },
  Wallet_Transfer:{
    width:20,
    height:20,
    alignSelf:'flex-end',
    marginRight: 120,
    marginTop: -20,
    tintColor:'#fdeb1d',
  },
  Wallet_TextTransfer:{
    color:'#fff',
    marginTop: -20,
    alignSelf:'flex-end',
    marginRight: 55,
    fontSize:15,
  }, 

What I've tried so far is this

I put zIndex on

Wallet: {
   zIndex: 1,
}

Tried also using import { TouchableOpacity } from 'react-native-gesture-handler'; instead of TouchableOpacity of react-native

Answer 1

For those who still have trouble I found out about TouchableWithoutFeedback and used instead of onPress i used onPressIn the only downside of this one is that it is only for a single react child for example like this

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
   </TouchableWithoutFeedback>

</View>

but if you use it like this

<View>
   <TouchableWithoutFeedback onPressIn={youFunctionHere}>
       <Image />
       <Text></Text>
   </TouchableWithoutFeedback>

</View>

This will not work. Hope it helps you guys