I’m using DropDownPicker from the ‘react-native-dropdown-picker’ library. When I click on DropDownPicker at the moment of touch it becomes opacity . How can I set my own opacity value that is applied at the moment of touch?
I’m using react native expo. iPhone SE2020 device.
Here is the component code:

import React, { useState } from "react";
import { View, StyleSheet } from "react-native";
import DropDownPicker from 'react-native-dropdown-picker';

const myTheme = require("../constants/MyCategoryPickerTheme/myTheme");
DropDownPicker.addTheme("MyThemeName", myTheme);

export function CategoryPicker() {        
    const [open, setOpen] = useState(false);
    const [value, setValue] = useState(null);
    const [items, setItems] = useState([
        {label: 'Spain', value: 'spain'},    
        {label: 'Italy', value: 'italy'},
        {label: 'Finland', value: 'finland'},
    ]);

    return (
        <View style={styles.container}>
            <DropDownPicker
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                maxHeight={300}

                theme="MyThemeName"
                multiple={false}
                mode="SIMPLE"
                translation={{
                    PLACEHOLDER: "Select an country"
                }}
                placeholderStyle={{
                    color: "lightgrey",
                    fontSize: 16
                }}
                dropDownDirection="AUTO"
                closeOnBackPressed={true}
            />
        </View>
    );
};
const styles = StyleSheet.create({
    container: {
        borderWidth:0,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',    
        marginBottom:64,
        zIndex:1
    },
});

//myTheme.js:

import {
    StyleSheet
} from 'react-native';

export const ICONS = {
     ARROW_DOWN: require('./icons/arrow-down.png'),
     ARROW_UP: require('./icons/arrow-up.png'),
     TICK: require('./icons/tick.png'),
     CLOSE: require('./icons/close.png')
};

export default StyleSheet.create({
    container: {
        width: '100%',
    },
    style: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        width: '100%',
        minHeight: 50,
        borderRadius: 8,
        borderWidth: 1,
        borderColor: 'lightgray',
        paddingHorizontal: 10,
        paddingVertical: 3,
        backgroundColor: 'white'
    },    
    
    label: {
        flex: 1,
        color: 'black'
    },
    labelContainer: {
        flex: 1,
        flexDirection: 'row',
    },
    arrowIcon: {
        width: 20,
        height: 20
    },
    tickIcon: {
        width: 20,
        height: 20
    },
    closeIcon: {
        width: 30,
        height: 30
    },
    badgeStyle: {
        flexDirection: 'row',
        alignItems: 'center',
        borderRadius: 10,
        backgroundColor: 'black',
        paddingHorizontal: 10,
        paddingVertical: 5
    },
    badgeDotStyle: {
        width: 10,
        height: 10,
        borderRadius: 10 / 2,
        marginRight: 8,
        backgroundColor: 'lightgray'
    },
    badgeSeparator: {
        width: 5,
    },
    listBody: {
        height: '100%',
    },
    listBodyContainer: {
        flexGrow: 1,
        alignItems: 'center',
    },
    dropDownContainer: {
        position: 'absolute',
        backgroundColor: 'white',
        borderRadius: 8,
        borderColor:'lightgray',
        borderWidth: 1,
        width: '100%',
        overflow: 'hidden',
        zIndex: 1000,                    
    },
    modalContentContainer: {
        flexGrow: 1,
    },
    listItemContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 10,
        height: 40
    },
    listItemLabel: {
        flex: 1,
        color: 'black'
    },
    iconContainer: {
        marginRight: 10
    },
    arrowIconContainer: {
        marginLeft: 10
    },
    tickIconContainer: {
        marginLeft: 10
    },
    closeIconContainer: {
        marginLeft: 10
    },
    listParentLabel: {

    },
    listChildLabel: {

    },
    listParentContainer: {

    },
    listChildContainer: {
        paddingLeft: 40,
    },
    searchContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        padding: 10,
        borderBottomColor: 'black',
        borderBottomWidth: 1
    },
    searchTextInput: {
        flexGrow: 1,
        flexShrink: 1,
        margin: 0,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 8,
        borderColor: 'black',
        borderWidth: 1,
        color: 'black'
    },
    itemSeparator: {
        height: 1,
        backgroundColor: 'black',
    },
    flatListContentContainer: {
        flexGrow: 1
    },
    customItemContainer: {

    },
    customItemLabel: {
        fontStyle: 'italic'
    },
    listMessageContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    listMessageText: {

    },
    selectedItemContainer: {

    },
    selectedItemLabel: {
        fontWeight: "bold"
    },
    modalTitle: {
        fontSize: 18,
        color: 'black'
    },
    extendableBadgeContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        flex: 1
    },
    extendableBadgeItemContainer: {
        marginVertical: 3,
        marginEnd: 7
    }
});

I tried adding (activeOpacity, pressOpacity) style but it didn’t work

<DropDownPicker
                loading={loading}
                open={open}
                value={value}
                items={items}
                setOpen={setOpen}
                setValue={setValue}
                setItems={setItems}
                maxHeight={300}

                theme="MyThemeName"
                mode="SIMPLE"
                
                translation={{
                    PLACEHOLDER: "Select an country"
                }}
                placeholderStyle={{
                    color: "lightgrey",
                    fontSize: 16
                }}

                dropDownDirection="AUTO"
                dropDownContainerStyle={{
                    backgroundColor: "#ffffff",
                    borderWidth:1,
                    borderColor:'lightgray'
                }}
                closeOnBackPressed={true}

                // Setting active styles
                style={{
                    activeOpacity: 1,
                    backgroundColor: "#ffffff",
                }}
            />