React Native Pressable doesn't work in Android

Question

I am using Pressable does work in IOS but doesn't work in Android. I tried these ways:

1. Add elevation and z-index
2. Remove background image
3. Tried to change component orders

but none of these worked.

The problem looks ({pressed}) styling but couldn't find any solution

Here is the code:

<View style={styles.mainContainer}>
            <MainPageBackImage/>
          
            <Pressable activeOpacity={0.6}   style={
                ({pressed}) =>[
                    { shadowColor:"black", 
                    shadowRadius:2,
                    shadowOpacity: pressed? 0.1: 0.9,
                    shadowOffset: pressed ? {width:0, height:1} : {width:0, height:3},
                    transform:[pressed ? {translateY: 10}:{ translateY:0}],
                    },
                styles.parkingHistoryContainer]}
                onPress={handleParkingHistory}>
                <Image source={parkingHistory} style={styles.parkingHistoryImage}/>
                <View style={styles.historyTextContainer}>
                    <Text style={styles.parkingHistoryText}>Parking History</Text>
                </View>
            </Pressable> 
 </View>


const styles = StyleSheet.create({
    mainContainer:{
        position:"relative",
        width:"100%",
        height:"100%",
        paddingTop: height * 0.23,
        alignItems:"center",
        justifyContent:"center",
        backgroundColor:"#FFCC56",
    },

    parkingHistoryContainer:{
        position:"relative",
        width: width * 0.5,
        height: height * 0.15,
        borderTopEndRadius:500,
        alignItems:"center",
        borderWidth:0,
        justifyContent:"center",
        top: height * -0.66,
        left: width * 0.17,
    },

    parkingHistoryImage:{
        position:"absolute",
        width: width * 0.32,
        height: height * 0.10,
        top: height * 0.01,
    },

    historyTextContainer:{
        position:"absolute",
        top: height * 0.12,
        borderWidth:3,
        borderRadius:10,
        backgroundColor:"#FFCC56",
        padding:3,
    },

    parkingHistoryText:{
        fontFamily:"Rakkas",
        fontSize: width * 0.06,
    },

});

Background Image component:

const image = require('../../assets/images/road.png')
  
export default function MainPageBackImage() {

  
  const navigation = useNavigation()

  return (
  <View style={styles.mainContainer}>
        <Image source={image} style={styles.backgroundImage}/>
        <Image source={image} style={styles.backgroundImage2}/>
  </View>

)}

//Get screen height and width for responsive
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;


const styles = StyleSheet.create({
    mainContainer:{
        width:"100%",
        height:"100%",
        elevation:-3,
    },
    backgroundImage:{
        width: width * 1.6,
        height: height * 0.8,
        top: height * 0.34,
        left: width * -0.07,
        resizeMode: "stretch",
        zIndex: 10,
    },

    backgroundImage2:{
      width: width * 2.3,
      height: height * 1.1,
      top: height * -0.77,
      left: width * -0.73,
      zIndex:30,
      resizeMode:"stretch",
      transform: [{rotateY: '180deg'}]
    },
}) 

Thanks for your help