I have a mapped list of Text
in TouchableOpacity
components in a react-native Modal
displayed like this:
<ModalLayout showModal={active} toggleShowModal={toggleActive} title={'Select '+ label} size="md"><View> {options?.map((option: string) => (<TouchableOpacity key={option} onPress={() => selectOption(option)} className="py-2 my-1"><Text className={text}>{option}</Text></TouchableOpacity> ))}</View></ModalLayout>
IGNORE THE className
atrributes, they are from nativewind; this is react native, not react.
Might be irrelevant, but the The modal layout's code looks like this:
<Modal visible={showModal} animationType="slide" onRequestClose={toggleShowModal} transparent={true} onTouchStart={toggleShowModal}><TouchableWithoutFeedback onPress={toggleShowModal}><View className="flex-1 bg-black/40"><TouchableWithoutFeedback onPress={() => null}><View className={`overflow-hidden ${ dark ? 'bg-[#efefef]' : 'bg-white' } ${size === 'lg'&& 'flex-1'} ${ size === 'md'&& !hAuto && 'flex-[0.94]' } ${size === 'sm'&& 'h-auto'} shadow-2xl ${ size === 'sm' ? 'my-auto mx-5' : 'mt-auto' } ${size === 'md'&& 'rounded-t-3xl'} ${ size === 'sm'&& 'rounded-xl' } ${hAuto && 'h-auto'}`} style={styles.elevation}><View className={`py-3 px-3 ${ title && 'border-b' } border-gray-300 bg-white flex-row items-center`}><TouchableOpacity className="bg-white rounded-full p-1" onPress={toggleShowModal}><XMarkIcon color="black" size={20} /></TouchableOpacity><Text className={`${text} font-bold flex-[0.87] py-1 text-center`}> {title}</Text></View> {noScroll ? (<View className={`flex-1 ${!noPadding ? 'py-5 mx-3' : ''}`}> {children}</View> ) : (<ScrollView className={` ${!noPadding ? 'py-5' : ''}`}><View className={`${!noPadding ? 'mx-3' : ''}`}> {children}</View></ScrollView> )} {bottomElement && (<View className="p-3 border-t border-gray-300"> {bottomElement}</View> )}</View></TouchableWithoutFeedback></View></TouchableWithoutFeedback><Toast /></Modal>
The onPress handler delays for an awfully long time and I'm not sure what I can do about it. I tried adding the following snippet in the entry file:
import {TouchableOpacity} from 'react-native';TouchableOpacity.defaultProps = { ...(TouchableOpacity.defaultProps || {}), delayPressIn: 0,};
But it still delays for way longer than it should.